Admin / 改善

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

2026年9月15日から段階的に提供開始。全ページで色・文字・余白・アイコンが新しくなり、新しいフレームに収まる。設定は不要で、各ストアの管理画面に自動で反映される。

このページの構成
  1. そもそも何が変わるのか(30秒で理解)
  2. レイアウト図解 : 何がどこへ移動したか
  3. 変更点の一覧
  4. 従来 vs 新デザインの比較
  5. 提供方法・利用条件
  6. マーチャント側でやること(3ステップ)
  7. 技術者が押さえるべき5つのポイント
  8. 業務に活かせる3つのユースケース
  9. 提案で使える1行サマリ

1そもそも何が変わるのか

Shopify 管理画面の 見た目(色・文字・余白・アイコン)が全ページで刷新 され、新しいフレームに収まる。
あわせて 検索・通知・ストア切替がサイドナビに集約され、Sidekick は画面下部のフローティングチャットになる。

見た目の刷新

新しい色・タイポグラフィ・余白・アイコンが、すべてのページに適用される。

サイドナビ集約

検索・通知・ストア切替がサイドナビへ。サイドナビは折りたためて、ページの作業領域を広く使える。

Sidekick が浮遊チャットに

サイドパネルから、全ページ下部に出るフローティングチャットへ移動。どの画面からでも呼び出せる。

2レイアウト図解 : 何がどこへ移動したか

従来 ストア 検索 ナビ ページ本体 Sidekick サイドパネル 9/15〜 段階提供 設定不要・自動反映 新デザイン ストア切替 検索 通知 « 折りたたみ可 ページ本体(広く使える) Sidekick チャット
上図の「従来」側のレイアウトはイメージ。元記事が明示しているのは 「検索・通知・ストア切替がサイドナビに移った」「Sidekick がサイドパネルから画面下部のフローティングチャットに移った」 の 2 点。各要素の正確な配置は Shopify ヘルプセンターで確認すること。

3変更点の一覧

全ページに適用される見た目の変更

色
新しいカラー
Aa
文字(タイプ)
新しいタイポグラフィ
余白
新しいスペーシング
アイコン
新しいアイコン

配置が変わったもの

サイドナビへ

検索・通知・ストア切替

3 つともサイドナビゲーションに移動。

新挙動

サイドナビの折りたたみ

サイドナビを折りたたむと、ページの表示領域が広がる。

画面下部へ

Sidekick

サイドパネル → 全ページ下部のフローティングチャットへ。作業中の画面から離れずに呼び出せる。

4従来 vs 新デザインの比較

項目従来新デザイン
見た目 従来の色・文字・余白・アイコン 刷新 全ページで新しい色・文字・余白・アイコン、新フレーム
検索/通知/ストア切替 記載なし(従来の配置) サイドナビ に集約
サイドナビ 記載なし 折りたたみ可 ページを広く使える
Sidekick サイドパネル フローティングチャット 全ページ下部
導入作業 — 不要 段階的に自動で反映

5提供方法・利用条件

設定不要・自動で届く

新デザインは各ストアの管理画面に自動で反映される。マーチャント側で有効化する操作は不要。

段階的なロールアウト

2026年9月15日に提供を開始し、順次展開。ストアごとに反映のタイミングが異なる。

対象プラン・対象地域・全ストアへの反映完了時期・旧デザインに戻せるかどうかは 記載なし。

6マーチャント側でやること(3ステップ)

1

反映を待つ

段階提供なので、管理画面に自動で届くまで待つだけ。

2

サイドナビの場所を確認

検索・通知・ストア切替がサイドナビにあることを確認する。

3

Sidekick の新しい位置を把握

画面下部のフローティングチャットから呼び出す。

詳細は Shopify ヘルプセンターの新デザイン解説ページを参照するよう、元記事で案内されている。

7技術者が押さえるべき5つのポイント

1. 段階ロールアウト = ストアごとに見た目がズレる

同じ時点でも、新デザインのストアと旧デザインのストアが混在しうる。複数ストアを扱う場合、画面の見え方がストアごとに違う前提で動く。

2. 主要な導線がサイドナビへ移動

検索・通知・ストア切替の場所が変わる。社内手順書・操作マニュアル・スクリーンショットで、これらの位置に触れている箇所は影響を受ける。

3. Sidekick は全ページで呼び出せる位置に

サイドパネルから画面下部のフローティングチャットへ移動。どのページで作業していても手の届く場所にある。

API ?

4. アプリ・API への影響は記載なし

埋め込みアプリの表示、Polaris などの UI コンポーネント、API への影響については元記事に記載なし。アプリ開発者は自分のアプリが新しいフレーム内でどう表示されるかを実機で確認すること。

5. サイドナビは折りたためる = 作業領域が可変

サイドナビを折りたたむとページ領域が広がる。管理画面のスクリーンショットを資料に使う場合、ナビの開閉状態で見た目が変わるので、撮影時の状態を揃えておくと資料の一貫性が保てる。

8業務に活かせる3つのユースケース

USE CASE 1

運用マニュアル・納品ドキュメントの更新

課題
クライアントに渡した管理画面の操作マニュアルに、検索・通知・ストア切替・Sidekick の旧配置のスクリーンショットが入っている。
打ち手
新デザインが反映されたストアで、配置が変わった 4 要素(検索・通知・ストア切替・Sidekick)に関わるページを優先して撮り直し・書き直しする。
効果
「マニュアルと画面が違う」という問い合わせを減らせる。
技術メモ
段階提供のため、旧デザインのままのストアもありうる。どちらの画面を前提とした資料かを明記しておく。
NEW LOOK
USE CASE 2

店舗スタッフ向けの「新デザインの変更点」周知

課題
管理画面を日常的に使うスタッフが、ある日突然見た目が変わって検索や通知の場所を見失う。
打ち手
反映前に「検索・通知・ストア切替はサイドナビへ」「Sidekick は画面下のチャット」「ナビは折りたためる」の 3 点を 1 枚にまとめて共有する。
効果
切り替わり直後の混乱や問い合わせを最小限にできる。
技術メモ
設定作業は不要と明記されているため、周知は「操作が必要」ではなく「場所が変わる」にとどめてよい。
USE CASE 3

作業中の画面から Sidekick を使う運用を広げる

課題
Sidekick がサイドパネルだったため、作業画面とは別物として扱われ、日常業務の中で使われにくかった。
打ち手
全ページ下部のフローティングチャットになったことを伝え、商品編集や注文確認などの作業中にその場で Sidekick を呼び出す使い方を案内する。
効果
画面を切り替えずに Sidekick を呼べるので、日常業務での利用機会が増える。
技術メモ
Sidekick 自体の機能変更は記載なし。今回変わったのは表示位置と呼び出し方のみ。

9提案で使える1行サマリ

「Shopify 管理画面が全ページで新デザインに。
検索・通知・ストア切替はサイドナビへ、Sidekick は画面下のチャットへ。設定不要で段階的に自動反映。
やるべきことは、マニュアルとスタッフへの『場所が変わった』周知だけ。」