Shopify 管理画面が新しいデザインに 検索・通知・ストア切替はサイドナビへ、Sidekick はフローティングチャットへ

図解 ： Shopify 管理画面の新しいデザイン（A new look for the Shopify admin） Admin / 改善 Shopify 管理画面が新しいデザインに 検索・通知・ストア切替はサイドナビへ、Sidekick はフローティングチャットへ 2026年9月15日から段階的に提供開始。全ページで色・文字・余白・アイコンが新しくなり、新しいフレームに収まる。設定は不要で、各ストアの管理画面に自動で反映される。 このページの構成 そもそも何が変わるのか（30秒で理解） レイアウト図解 ： 何がどこへ移動したか 変更点の一覧 従来 vs 新デザインの比較 提供方法・利用条件 マーチャント側でやること（3ステップ） 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が変わるのか Shopify 管理画面の 見た目（色・文字・余白・アイコン）が全ページで刷新 され、新しいフレームに収まる。 あわせて 検索・通知・ストア切替がサイドナビに集約 され、 Sidekick は画面下部のフローティングチャット になる。 見た目の刷新 新しい色・タイポグラフィ・余白・アイコンが、すべてのページに適用される。 サイドナビ集約 検索・通知・ストア切替がサイドナビへ。サイドナビは折りたためて、ページの作業領域を広く使える。 Sidekick が浮遊チャットに サイドパネルから、全ページ下部に出るフローティングチャットへ移動。どの画面からでも呼び出せる。 2 レイアウト図解 ： 何がどこへ移動したか 上図の「従来」側のレイアウトはイメージ。元記事が明示しているのは 「検索・通知・ストア切替がサイドナビに移った」「Sidekick がサイドパネルから画面下部のフローティングチャットに移った」 の 2 点。各要素の正確な配置は Shopify ヘルプセンターで確認すること。 3 変更点の一覧 全ページに適用される見た目の変更 色 新しいカラー 文字（タイプ） 新しいタイポグラフィ 余白 新しいスペーシング アイコン 新しいアイコン 配置が変わったもの サイドナビへ 検索・通知・ストア切替 3 つともサイドナビゲーションに移動。 新挙動 サイドナビの折りたたみ サイドナビを折りたたむと、ページの表示領域が広がる。 画面下部へ Sidekick サイドパネル → 全ページ下部のフローティングチャットへ。作業中の画面から離れずに呼び出せる。 4 従来 vs 新デザインの比較 項目 従来 新デザイン 見た目 従来の色・文字・余白・アイコン 刷新 全ページで新しい色・文字・余白・アイコン、新フレーム 検索／通知／ストア切替 記載なし（従来の配置） サイドナビ に集約 サイドナビ 記載なし 折りたたみ可 ページを広く使える Sidekick サイドパネル フローティングチャット 全ページ下部 導入作業 — 不要 段階的に自動で反映 5 提供方法・利用条件 設定不要・自動で届く 新デザインは各ストアの管理画面に自動で反映される。マーチャント側で有効化する操作は不要。 段階的なロールアウト 2026年9月15日に提供を開始し、順次展開。ストアごとに反映のタイミングが異なる。 対象プラン・対象地域・全ストアへの反映完了時期・旧デザインに戻せるかどうかは 記載なし 。 6 マーチャント側でやること（3ステップ） 1 反映を待つ 段階提供なので、管理画面に自動で届くまで待つだけ。 2 サイドナビの場所を確認 検索・通知・ストア切替がサイドナビにあることを確認する。 3 Sidekick の新しい位置を把握 画面下部のフローティングチャットから呼び出す。 詳細は Shopify ヘルプセンターの新デザイン解説ページを参照するよう、元記事で案内されている。 7 技術者が押さえるべき5つのポイント 1. 段階ロールアウト ＝ ストアごとに見た目がズレる 同じ時点でも、新デザインのストアと旧デザインのストアが混在しうる。複数ストアを扱う場合、画面の見え方がストアごとに違う前提で動く。 2. 主要な導線がサイドナビへ移動 検索・通知・ストア切替の場所が変わる。社内手順書・操作マニュアル・スクリーンショットで、これらの位置に触れている箇所は影響を受ける。 3. Sidekick は全ページで呼び出せる位置に サイドパネルから画面下部のフローティングチャットへ移動。どのページで作業していても手の届く場所にある。 4. アプリ・API への影響は記載なし 埋め込みアプリの表示、Polaris などの UI コンポーネント、API への影響については元記事に記載なし。アプリ開発者は自分のアプリが新しいフレーム内でどう表示されるかを実機で確認すること。 5. サイドナビは折りたためる ＝ 作業領域が可変 サイドナビを折りたたむとページ領域が広がる。 管理画面のスクリーンショットを資料に使う場合、ナビの開閉状態で見た目が変わる ので、撮影時の状態を揃えておくと資料の一貫性が保てる。 8 業務に活かせる3つのユースケース USE CASE 1 運用マニュアル・納品ドキュメントの更新 課題 クライアントに渡した管理画面の操作マニュアルに、検索・通知・ストア切替・Sidekick の旧配置のスクリーンショットが入っている。 打ち手 新デザインが反映されたストアで、配置が変わった 4 要素（検索・通知・ストア切替・Sidekick）に関わるページを優先して撮り直し・書き直しする。 効果 「マニュアルと画面が違う」という問い合わせを減らせる。 技術メモ 段階提供のため、旧デザインのままのストアもありうる。どちらの画面を前提とした資料かを明記しておく。 USE CASE 2 店舗スタッフ向けの「新デザインの変更点」周知 課題 管理画面を日常的に使うスタッフが、ある日突然見た目が変わって検索や通知の場所を見失う。 打ち手 反映前に「検索・通知・ストア切替はサイドナビへ」「Sidekick は画面下のチャット」「ナビは折りたためる」の 3 点を 1 枚にまとめて共有する。 効果 切り替わり直後の混乱や問い合わせを最小限にできる。 技術メモ 設定作業は不要と明記されているため、周知は「操作が必要」ではなく「場所が変わる」にとどめてよい。 USE CASE 3 作業中の画面から Sidekick を使う運用を広げる 課題 Sidekick がサイドパネルだったため、作業画面とは別物として扱われ、日常業務の中で使われにくかった。 打ち手 全ページ下部のフローティングチャットになったことを伝え、商品編集や注文確認などの作業中にその場で Sidekick を呼び出す使い方を案内する。 効果 画面を切り替えずに Sidekick を呼べるので、日常業務での利用機会が増える。 技術メモ Sidekick 自体の機能変更は記載なし。今回変わったのは表示位置と呼び出し方のみ。 9 提案で使える1行サマリ 「Shopify 管理画面が全ページで新デザインに。 検索・通知・ストア切替はサイドナビへ、Sidekick は画面下のチャットへ。設定不要で段階的に自動反映。 やるべきことは、マニュアルとスタッフへの『場所が変わった』周知だけ。」 source ： changelog.shopify.com / see-the-shopify-admin-s-new-look 原文公開日 2026-09-15