Polaris 2.0 リリース候補版 アプリの見た目を「新しい管理画面デザイン」に揃える

図解 ： Polaris 2.0 リリース候補版（新しい Shopify 管理画面デザインへの追従） Developer / Polaris Web Components Polaris 2.0 リリース候補版 アプリの見た目を「新しい管理画面デザイン」に揃える 埋め込み App Home 向けに Polaris 2.0 の RC を公開。新しい Shopify 管理画面の色・文字・余白・アイコンを取り込める。ストアごとに旧デザイン／新デザインへ自動で合わせて表示されるので、1 つのアプリで両方の画面に対応できる。 このページの構成 そもそも何が出たのか（30秒で理解） 仕組み図解 ： どの見た目で描画されるか 採用は「明示的」 ： 自動では切り替わらない タイムラインと Built for Shopify の期限 テスト手順（3ステップ） 移行パターン別の対応 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が出たのか 2026年9月15日から、 新しい Shopify 管理画面デザイン がマーチャントに順次展開されている。 Polaris 2.0 リリース候補版（RC） を使うと、埋め込み App Home の UI をその新デザインに揃えられる。 対象 ： 埋め込み App Home 管理画面内に埋め込まれるアプリのホーム画面（App Home）が対象。 中身 ： 新しいビジュアル 新しい管理画面の色・タイポグラフィ・余白・アイコンが Polaris Web Components に入る。 特徴 ： 1 つのアプリで両対応 旧デザインのストアでは旧スタイル、新デザインのストアでは新スタイルで描画される。 2 仕組み図解 ： どの見た目で描画されるか 見た目の切り替えは ストアごとの現在の管理画面デザイン に従う。アプリ側でデザインを判定して分岐を書く必要はない。 管理画面の外で描画すると新スタイルになるので、 新デザインのストアにまだアクセスできなくても新しい見た目を試せる 。 3 採用は「明示的」 ： 自動では切り替わらない 読み込んでいるスクリプト Polaris 2.0 になるか 見た目 polaris.js （レガシー URL） ならない 自動では Polaris 2.0 に移行しない polaris-1.js ならない 自動では Polaris 2.0 に移行しない polaris-2.0-rc.js なる ストアのデザインに合わせて新／旧を出し分け 何もしなければ見た目は変わらない。 新デザインに揃えたいなら、自分で CDN URL を書き換える必要がある。 4 タイムラインと Built for Shopify の期限 Built for Shopify アプリ 2027年5月1日までに対応 埋め込み App Home の UI を Shopify 管理画面のビジュアルスタイルに合わせて更新する必要がある。 RC を使うメリット ロールアウト中に先行準備できる 各ストアで使えるデザインにコンポーネントが合わせるので、どちらのデザインのマーチャントにも同じアプリで対応できる。 Polaris 2.0 の正式版（RC ではない版）の公開時期、ロールアウトの完了時期は記事に 記載なし 。 5 テスト手順（3ステップ） Shopify CDN からリリース候補版を読み込む： <script src="https://cdn.shopify.com/shopifycloud/polaris-2.0-rc.js"></script> そのうえで、次の 3 つの環境で動作と見た目を確認する。 1 新デザインのストア 手元に無ければ、フィーチャープレビュー「Shopify admin's new design」を有効にした新しいストアを作る。 2 旧デザインのストア 従来どおり polaris-1.js と同じ見た目で表示されるかを確認する。 3 Shopify 管理画面の外 コンポーネントが新スタイル（既定）で描画されることを確認する。 画面下部に固定 UI があるアプリは要注意 フローティング表示の Sidekick バー が UI を覆わないように、Environment API の CSS 変数 --shopify-safe-area-inset-bottom を使う。 対象 ： ビューポート下部付近に fixed／sticky のコンテンツを置いているアプリ。 6 移行パターン別の対応 パターン A Polaris Web Components を使用中 CDN URL をリリース候補版に差し替えて、既存の UI をテストするだけ。 パターン B Polaris React を使用中 移行ガイドに沿って Polaris Web Components へ移行する。まず Page / Section / Button から。新デザインに揃えたとき見た目への影響が最も大きいコンポーネント。 パターン C Polaris Web Components 未使用 Polaris 2.0 を採用するには、先に Polaris Web Components へ移行する必要がある。 拡張機能は自動で追従する。 Admin UI extensions と App Home UI extensions は、各マーチャントが使える管理画面デザインに自動で合わせる。機能は変わらず、新スタイルを適用するために拡張のコードを更新する必要はない。 7 技術者が押さえるべき5つのポイント 1. 切り替えは opt-in polaris-1.js とレガシー polaris.js は自動で 2.0 にならない。 polaris-2.0-rc.js を明示的に読み込んだアプリだけが対象。 2. 新旧の出し分けは Polaris 側で行う ストアの管理画面デザインに応じてコンポーネント自体が見た目を変える。アプリ側でデザイン判定や条件分岐は不要。 3. 管理画面の外では新スタイルが既定 ローカル環境や Storybook など管理画面外での描画は新スタイルになる。新デザインのストアが無くても見た目を確認できる。 4. 下部固定 UI は safe-area 変数で逃がす --shopify-safe-area-inset-bottom （Environment API）を使い、フローティングの Sidekick バーとの重なりを避ける。 5. 今は「リリース候補版」の段階 URL 名は polaris-2.0-rc.js 。正式版の URL や公開時期は記事に記載なし。バージョンの付け方は関連ドキュメント「Polaris CDN semantic versioning」を参照。 拡張機能（Admin UI / App Home UI extensions）はコード変更不要で自動追従 するので、手を入れるのは App Home 本体の UI だけ。 8 業務に活かせる3つのユースケース USE CASE 1 Built for Shopify バッジを守るための先行対応 課題 Built for Shopify のアプリは、2027年5月1日までに埋め込み App Home を管理画面のビジュアルスタイルに合わせる必要がある。 打ち手 CDN URL を polaris-2.0-rc.js に差し替え、新デザイン／旧デザイン／管理画面外の 3 環境でテストする。 効果 ロールアウト中に先行して準備でき、どちらのデザインのマーチャントにも 1 つのアプリで対応できる。 技術メモ 新デザインのストアが無い場合は、フィーチャープレビュー「Shopify admin's new design」付きのストアを新規作成する。 USE CASE 2 Polaris React アプリの段階的な移行計画 課題 App Home が Polaris React で作られていて、このままでは Polaris 2.0 を採用できない。 打ち手 移行ガイドに沿って Polaris Web Components へ移行。まず Page / Section / Button から置き換える。 効果 見た目への影響が最も大きいコンポーネントから着手するので、新デザインとのズレを早く小さくできる。 技術メモ Web Components への移行後に CDN URL を RC に差し替える順番。拡張機能のコードには手を入れなくてよい。 USE CASE 3 下部固定の保存バー・CTA が Sidekick に隠れる問題の予防 課題 App Home の画面下部に固定の保存ボタンや操作バーがあり、フローティングの Sidekick バーに覆われるおそれがある。 打ち手 固定／sticky 要素の下余白に Environment API の --shopify-safe-area-inset-bottom を使う。 効果 操作ボタンが隠れて押せない、という UI の不具合を避けられる。 技術メモ CSS 変数の具体的な書き方や値は記事に記載なし。Environment API のドキュメントで確認する。 9 提案で使える1行サマリ 「CDN の URL を polaris-2.0-rc.js に差し替えるだけで、App Home がストアごとの新旧管理画面デザインに自動で追従する。 切り替えは opt-in・拡張機能は自動で追従・Built for Shopify の期限は 2027年5月1日。 ロールアウト中の今が、テストと Polaris React からの移行を始める時期。」 source ： shopify.dev/changelog/polaris-2-0-release-candidate 原文公開日 2026-09-24（Developer Changelog）