Horizon カラーパレット徹底解剖 ― 1色決めると何が自動導出され、どのパーツに適用されるのか

Shopify公式テーマ「Horizon」の v4系では、配色の仕組みがカラースキーム方式からカラーパレット方式へ全面刷新されました。旧方式は6つの固定スキームに対して約50項目の色を1つずつ手で指定するものでしたが、新方式は「パレット」を1つ決めるだけで、各UI要素の色が自動的に導出されます。

この記事では、その「1色決めると、何が自動で設定され、どのパーツに適用されるのか」という波及構造を、3つの層に分けて解剖します。（v4.1.1全体の変更点は「v4.1.1 アップデート解説」をご覧ください。）

まずは要点を1枚で。「パレットとは何か」「変更すると何が影響を受けるか」「自動で設定される色の正体」「旧方式から何が一番変わったか」「メリット・デメリット」の5つの疑問に沿って整理しました。

▲ カラーパレットの早わかり。この5点を頭に入れてから、以下で仕組みを層ごとに見ていきます。

全体像 ― 3層のカスケード

カラーパレットは、上流から下流へ3段階で色が流れていきます。

• ① あなたが設定する層 ― カラーパレット（背景・メインカラー＋任意の色）。ここだけを触る
• ② 自動で導出される層 ― 各要素の色を「パレット参照」で割り当て ＋ color-palette.liquid が計算（コントラスト・ホバー色など）→ CSS変数に展開
• ③ 適用されるUIパーツ ― ボタン・入力欄・バリアント・カートなど。各コンポーネントはCSS変数を参照するだけ

▲ ①パレット（狭い＝少数）から、②導出・③パーツ（広い＝多数）へと波及していくピラミッド構造。

層① ― カラーパレット（触る唯一の入口）

color_palette は v4 で追加された新しい設定型で、中身は名前付きの色の集合です。デフォルトは背景・メインカラーの2色だけで、必要に応じて color1 color2 …と足せます。

"color_palette": {
  "background": "#ffffff",
  "foreground": "#000000",
  "color1": "#333333",
  "color3": "#dfdfdf"
}

公式が「マーチャントが編集できる1つの色のグリッド」と表現しているのがこれです。マーチャントが触るのは原則この層だけになります。

補助色（color1〜）のルール ― 自動で使われるのはごく一部

誤解しやすいポイントですが、テーマが自動で参照するのはほぼ「背景」と「メインカラー」の2色です（テーマ内の参照回数を数えると、それぞれ約50箇所ずつに対し、補助色は各1箇所程度）。補助色にあらかじめ配線されているのは次の数カ所だけです。

では「＋」で追加した補助色はどこに使われるのかというと、どこにも自動適用されません。追加した色はテーマエディタのすべてのカラーピッカーに候補スウォッチとして並ぶようになり、セクションやブロックの色設定に手動で割り当てて使います。HEX直指定と違うのは、後からパレット側で色を変えると、割り当てた全箇所が一括で追従すること。つまり補助色の正体は「自動で使われる色」ではなく「名前付きのブランドカラー変数」です。

層② ― 自動で導出される（参照 ＋ 計算）

(1) 参照で割り当て ― 各要素の色はパレットを指す

ボタン・バリアント・入力欄などの色設定は、固定のHEXではなくパレットへのLiquid参照で持ちます。

"palette_primary_button_background": "{{ settings.color_palette.foreground }}",
"palette_primary_button_text": "{{ settings.color_palette.background }}",
"palette_variant_background": "{{ settings.color_palette.background }}",
"palette_input_text": "{{ settings.color_palette.color1 }}"

つまり、パレットの foreground を1つ変えると、それを参照している全要素が一斉に変わる。これが「変更がテーマ全体に反映される」の正体です。

(2) 計算で生成 ― color-palette.liquid が"効いた色"を作る

ここが賢い部分です。単なる参照の展開ではなく、以下を自動計算します。

スマートコントラスト ― パレット内の全色をループし、color_brightness で最も明るい色・暗い色を1回だけ算出。ホバー時やフォールバックの文字色を、背景の明るさに応じて自動で選びます（明るさ128超なら暗い色、そうでなければ明るい色）。

for palette_color in settings.color_palette
  assign b = palette_color | color_brightness
  # 最大→palette_lightest / 最小→palette_darkest に記録
endfor

ホバー色の自動生成 ― util-palette-hover-shift.liquid が、元の色の明るさ・透明度に応じて明度を機械的にシフトします。

「暗い色は明るく、明るい色は暗く」寄せるので、どんなパレットでも自然なホバーになります。加えて、muted / subdued などの薄い文字や disabled 状態も、メインカラー色に不透明度を掛けて自動生成されます。

最終的に、これらは :root のCSS変数として出力されます。

:root {
  --color-foreground: #000000;
  --color-primary-button-background: rgb(...);
  --color-variant-hover-text: rgb(...);   /* ←自動計算した色 */
  --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-muted-text));
}

層③ ― 適用されるUIパーツ

各コンポーネント（ボタン・入力欄・バリアントスウォッチ・カートドロワー・ポップオーバー・バッジ…）のCSSは、層②で出力された --color-* 変数を参照するだけです。色の決定ロジックはすべて層②に集約されているため、コンポーネント側は「どの変数を使うか」だけを知っていればよい構造になっています。

結果として、マーチャントが操作するのは数色のパレットだけで済みます。パレットを選び直すと、冒頭の早わかり図 Q2 で挙げた要素（ボタン・文字・背景・枠線・フォーム・バリアント・バッジ・カート…）が一斉に、調和を保ったまま色を変えます。

旧「配色」（カラースキーム）はどこへ行ったか

v3系までの「配色」は、背景・見出し・テキスト・リンク・枠線・影・ボタン一式…といった項目色を詰めた「束（スキーム）」を最大6セット作り、セクションごとに束を当てる方式でした。一括で揃えられる便利さの半面、「枠線」や「影」が実際にどの要素に効くのか見えず、どのセクションがどのスキームを使っているかも一覧できない、という分かりにくさがありました。

v4 はこの束を3つに分解しました。

• 色の値そのもの → カラーパレットに一元化
• 項目ごとの割り当て → テーマ設定の要素別カテゴリ（ページ／ボタン／入力フィールド／ドロワー…）へ移動
• ホバー色などの微調整項目 → 設定自体が消滅し、自動計算に置き換え

旧スキームの項目がそれぞれどこへ移ったかを対応表にすると、こうなります。

つまり項目リストは消えたのではなく、要素ベースの置き場所に再配置されました。「ボタンの色はどこ？」→「ボタン」の中、と設定名から引けるようになったのは大きな改善です。ただし1つだけ実損があります。セクション単位で束ごと当て替える使い方（このセクションだけ黒背景の反転配色にする等）は1操作ではできなくなり、セクション側の背景色設定＋個別の色指定で作り込むことになります。

コントロールの要点 ― 「値・既定・個別」の3軸

ここまでを運用目線でまとめ直すと、v4 の配色は次の3層の継承構造で動いています。

① カラーパレット（色の値の置き場）
      ↓ 参照
② テーマ設定の要素別カテゴリ（サイト全体の既定）
      ↓ 継承 … ブロック側が空なら、この既定が効く
③ セクション／ブロックの色設定（個別の上書き）

「どこを触ればいいか」はやりたいことで決まります。

ポイントは③の上書き時にも、カラーピッカーにはパレットのスウォッチが候補として並ぶこと。スロット参照のまま個別化すればその箇所もパレット変更に追従し続け、固定色を指定すれば連動から切り離せます。旧スキームの「一括の便利さ」はパレットに引き継がれ、そのうえで個別の自由が加わった——というのが v4 の設計です。

「1色変えると何が波及するか」を見る

たとえばメインカラー（foreground＝文字・見出し・ボタンに使われる主役の色）を1つ変えると、本文テキスト・プライマリボタン背景・バリアント文字・選択中バリアント背景・補助テキストまで、広範囲が一斉に変わります。下図はメインカラーを起点にした波及先をハイライトしたものです。

▲ メインカラーを起点にした波及。背景専用のパーツ（クイック追加など）だけが対象外で、それ以外は広く影響を受ける。

逆に背景（background）は面の色、color1 以降は文字色や境界線の微調整に効きます。「どの色を変えると、どこまで波及するか」を把握しておくと、配色変更の見通しが立てやすくなります。

カスタムCSSへの示唆

この仕組みは、カスタムCSSの扱いにも影響します。

一方で、カスタムしやすくなった面もあります。custom.css で --color-* 変数を上書きすれば、その変数を使う全パーツにまとめて効きます。狙って変数名を押さえれば、少ない記述で一括変更ができます。

まとめ

Horizon v4 のカラーパレットは、「①パレットを決める → ②参照＋計算で自動導出 → ③各パーツが変数を参照」という3層のカスケードで動いています。

• 手作業だった「調和・コントラスト・ホバー調整」がテーマ側に移り、マーチャントは色のグリッドを触るだけで統一感を保てる
• メインカラーのような上流の色ほど波及範囲が広い。変更時は影響範囲を意識する
• カスタムCSSは変数名の変化に注意しつつ、--color-* の上書きで一括変更もできる
• 運用で触る軸は3つ ― 値（パレット）・既定（テーマ設定）・個別（ブロック上書き）。いまどの軸を触っているかを意識すると迷わない
• 迷ったら逆引き ― 要素のカラーピッカーを開けば、参照先のスウォッチがその場で分かる

旧「配色」が束を選ぶ1軸だったのに対し、v4 は3軸の使い分けになりました。自由度が上がったぶん最初は戸惑いますが、「1色でテーマ全体が調和する」体験の裏側にあるこの構造を頭に入れておけば、配色は確実にコントロールできます。

付録：デフォルト Horizon のパレット配線図

参考資料として、デフォルトの Horizon v4.1.1 の配線を場所ごとに一覧化しました。各行グループの左に、そのセクション・ブロックのプレビュー（Horizon 標準デザイン）を添えています。名称はテーマエディタの日本語表示、グレーのカッコ内は内部キーです。

1. テーマ設定（「設定」の各色項目）― 30項目

サイト全体の既定です。ほとんどが背景かメインカラーを参照し、固定色の項目はパレットを変えても動きません。

2. 各ページのセクション・ブロックが参照している色 ― 29箇所

テンプレートに保存されている配線をセクションごとにまとめました（固定色の指定は省略）。ほぼすべてがセクション背景で、背景スロットに繋がっています。

3. ブロック・セクションを新規追加したときの初期配線 ― 50項目

エディタでブロックを新しく置いたとき、その「カスタム色」系の設定が最初から参照している先です。新規ブロックもパレットに追従した状態で生まれる、という本文の話の根拠がこれです。

▲ v4.1.1（2026年7月時点の upstream）の settings_data／templates／sections／blocks から抽出。名称は locales/ja.schema.json、プレビューは Horizon 標準デザイン（Figma）に基づく。