Color palettes in Themes テーマの色を「1枚のグリッド」でまとめて管理できる新設定

図解 ： Color palettes in Themes（テーマのカラーパレット） Themes / 開発者向け新機能 Color palettes in Themes テーマの色を「1枚のグリッド」でまとめて管理できる新設定 新しい color_palette 設定タイプが登場。マーチャントは色のグリッドを直接編集でき、変更はテーマ全体に反映される。個別の color / color_background はパレットの色をデフォルトとして参照でき、セクション・ブロック単位での上書きも可能。 このページの構成 そもそも何が追加されたのか（30秒で理解） 仕組み図解 ： パレットと参照・上書きの関係 color schemes（既存）との関係 color schemes vs color palettes 比較 対象・前提・記載なしの整理 触ってみる（3ステップ） 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が追加されたのか テーマに 新しい color_palette 設定タイプ が追加された。 マーチャントは 色のグリッド（パレット）を1か所で直接編集 でき、その変更が テーマ全体に反映 される。 パレット ： 色のグリッドを直接編集 マーチャントが色を1枚のグリッドとして編集できる。1か所の変更がテーマ全体へ波及する。 参照 ＆ 上書き 個別の color / color_background 設定はパレットの色をデフォルトとして参照できる。マーチャントはセクション・ブロック単位で任意の色を上書きしてローカルに制御できる。 2 仕組み図解 ： パレットと参照・上書きの関係 ポイントは 「中央集権（パレット）＋例外（個別上書き）」の二層構造 。普段はパレットを1か所いじれば全体の色が揃い、どうしてもピンポイントで変えたい箇所だけセクション／ブロックで上書きできる。 3 color schemes（既存）との関係 後方互換 color schemes は引き続き動作 既存テーマは変更不要。これまでの color schemes はそのまま使い続けられる。 任意 新テーマでも必須ではない color palettes は新しいテーマや Theme Store への提出で必須化されてはいない。 推奨 新規構築では推奨 より良い編集体験を提供するため、今後の開発はパレットに注力。新テーマ構築時はパレットを推奨。 実装例として Horizon の最新版（4.0.0） が紹介されている。Horizon 4.0.0 は新しいパレットシステムを全体で採用しており、動作を実際に確認できる。 4 color schemes vs color palettes 比較 項目 color schemes（既存） color palettes（新） 編集体験 スキーム単位で色を管理 1枚のグリッド を直接編集、テーマ全体へ反映 個別設定との連携 —（記事に記載なし） color / color_background がパレット値を default として参照 ローカル上書き —（記事に記載なし） セクション・ブロック単位で任意の色を上書き可 既存テーマへの影響 そのまま動作 移行は不要（既存テーマは変更不要） 新テーマ / Theme Store 提出 これまで通り利用可 必須ではない （ただし新規は推奨） 今後の開発方針 — 注力対象 （パレット中心へ） 5 対象・前提・記載なしの整理 記事が明言していること 新設定タイプ color_palette の追加／パレットのグリッド編集とテーマ全体反映／color・color_background のデフォルト参照／セクション・ブロック単位の上書き／既存 color schemes 継続／新規での推奨／Horizon 4.0.0 が採用。 記載なし（推測しない） パレットに持てる色数の上限・命名規約、Liquid / settings_schema.json での具体的な記法、対応 Online Store / テーマアーキテクチャのバージョン要件、color schemes からの自動移行手段、提供開始の地域・段階リリースの有無は本記事に 記載なし 。詳細は開発者ドキュメントで確認。 実装に踏み込む前に、必ず color_palette の開発者ドキュメントで設定記法・制約を確認すること。本記事は概要のアナウンスであり、API レベルの仕様は別ページに委ねられている。 6 触ってみる（3ステップ） 1 Horizon 4.0.0 を確認 最新版 Horizon はパレットシステムを全体採用。実際の編集体験を確認できる。 2 color_palette を定義 テーマに新設定タイプを置き、color / color_background がパレット値をデフォルト参照するよう構成する。 3 編集 → 全体反映を確認 パレットを1か所編集し全体反映を確認。必要なセクション／ブロックだけ上書きする。 ※ 手順の細部（管理画面の導線・記法）は記事に記載なし。開発者ドキュメントおよび Horizon 4.0.0 の実装を参照のこと。 7 技術者が押さえるべき5つのポイント 1. 新設定タイプ color_palette が中核 単発の色設定ではなく「色のグリッド＝パレット」を扱う設定タイプ。デザイントークンの中央集権化に近い発想。 2. default 参照という結合のしかた color / color_background はパレット値を「デフォルト」として参照する。パレットを変えれば参照側が追従し、個別の値は独立して保持できる。 3. 上書きの粒度はセクション/ブロック ローカル制御はセクションまたはブロック単位。例外的な配色をピンポイントで当てつつ、その他は全体追従にできる。 4. 非破壊・移行不要 color schemes は引き続き動作し、既存テーマは変更不要。導入はオプトインで、既存資産を壊さずに段階採用できる。 5. 新規はパレット前提で設計するのが将来安全 必須ではないが、Shopify は今後の開発をパレットに注力すると明言。新テーマは color_palette を起点に設計しておくと、将来の機能追加・編集体験の改善を受けやすい。実装例として Horizon 4.0.0 が全面採用済み。 8 業務に活かせる3つのユースケース USE CASE 1 ブランドカラー変更を「1か所差し替え」で全ページ反映 課題 リブランドやキャンペーンでブランド配色を変える際、各セクションの色設定を1つずつ直していて漏れ・ブレが出る。 打ち手 color_palette にブランドの基本色を定義し、各 color / color_background をパレット参照に統一。変更はパレット側だけで行う。 効果 編集箇所が1か所に集約され、全ページ一括反映。色の不整合と確認工数を削減。 技術メモ 個別に上書きしたセクションは追従しないため、例外箇所の棚卸しを事前に行う。 USE CASE 2 制作会社のテーマ開発を「色トークン設計」で標準化 課題 複数クライアントのテーマを作るたびに色管理の流儀がバラつき、引き継ぎ・保守でコストがかかる。 打ち手 新規テーマは color_palette 起点で設計するテンプレを社内標準化。Horizon 4.0.0 の採用構成を参照実装にする。 効果 納品テーマの色管理が統一され、マーチャント自身の編集体験も向上。保守・引き継ぎが容易に。 技術メモ color schemes 継続のため、既存案件は急いで移行せず新規からパレットに寄せる漸進方針が安全。 USE CASE 3 マーチャント自身がセルフで季節配色を切り替え 課題 セール・季節ごとに配色を変えたいが、毎回ベンダーへ依頼していてスピードとコストがネック。 打ち手 パレットを1枚のグリッドとして編集できる前提で構築し、運用ガイドを渡してマーチャントが自分で色を差し替えられるようにする。 効果 施策のたびの外注を減らし、配色変更のリードタイムを短縮。重要箇所だけ上書きで守れる。 技術メモ 触ってほしくない箇所はセクション／ブロックで明示上書きしておけば、パレット変更の影響から隔離できる。 9 提案で使える1行サマリ 「テーマの色を 1枚のパレットで中央管理し、変更をテーマ全体へ一括反映 できる新設定 color_palette 。 既存 color schemes は継続・移行不要、必須ではないが 新規テーマでは推奨 。 個別設定はパレットを参照し、セクション／ブロック単位で上書きもできる。」 source ： shopify.dev / changelog / color-palettes generated 2026-06-22