Admin / Improvement

Unified Branding
「ブランド設定」を一度だけ : Checkout × Customer Accounts × Sign-in を一括統一

ロゴ・色・タイポグラフィ・セクションスタイルを一箇所で設定するだけで、購入から会員ページまで全部にそのまま反映。チェックアウトをいじったらカスタマーアカウントが崩れた、はもう起きない。

このページの構成
  1. そもそも何が変わるのか(30秒で理解)
  2. 仕組み図解 : 設定が反映される範囲
  3. 主な機能 4 つ
  4. 従来 vs Unified Branding の比較
  5. カラーパレットの仕組み
  6. 設定手順
  7. 技術者が押さえるべき5つのポイント
  8. 業務に活かせる3つのユースケース
  9. 提案で使える1行サマリ

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

今までは「チェックアウト」「カスタマーアカウント」「サインインページ」のブランド設定が分かれていて、片方を直してももう片方が崩れることがあった。
今回の更新で 3 つの面のブランディングが「Checkout & Accounts エディタ」一箇所に統合 された。
不一致

従来 : 面ごとに別設定

Checkout の設定と Customer Accounts/Sign-in の設定が独立。色やロゴを直し漏れて、面によって見た目が違う状態になりがちだった。

新 : Unified Branding

「Checkout & Accounts エディタ」で一度設定すれば、チェックアウト/カスタマーアカウント/サインインの 3 面に一貫して反映。

2仕組み図解 : 設定が反映される範囲

Checkout & Accounts エディタ ロゴ 色 / パレット タイポグラフィ セクションスタイル 単一の設定ソース Checkout 購入面 Customer Account 会員ページ Sign-in Page サインイン面 Shopify Plus 限定 Checkout and Accounts Configuration API 面単位の詳細上書き
「Checkout & Accounts エディタ」で設定したブランド情報は、Checkout・Customer Accounts・Sign-in の 3 つの面に共通して降りていく。
面単位の細かい上書き(Surface-specific override)は Shopify Plus のみ、Configuration API 経由で可能。

3主な機能 4 つ

① 一括統一

ロゴ・色・タイポ・セクションスタイルを 1 箇所で設定し、Checkout/Customer Account/Sign-in に一貫適用。

② 自由な色指定

「カラースキーム」の制約から解放、直接カラー値で指定可能。色数の制限なし。

③ 再利用パレット

ブランドカラーを最大 20 色までパレットに保存。パレットの色を 1 回直すと、使われている全箇所に反映。

④ 面別オーバーライド

面ごとに別ロゴ/別メイン背景色を指定可能。Shopify Plus は API 経由でより細かい上書きも可能。

4従来 vs Unified Branding の比較

項目従来Unified Branding(新)
設定箇所 分散 面ごとに設定 統合 Checkout & Accounts エディタ 1 箇所
色の指定方法 カラースキームに割り当て(数に制限) 直接カラー値 で自由指定
ブランドカラーの管理 記載なし(個別に都度設定) パレット保存 最大 20 色、変更は一括反映
面ごとの上書き 記載なし ロゴ・メイン背景色は標準で可。詳細は Plus + API
面間の不整合リスク 直し漏れで崩れる 設定の出処が単一

5カラーパレットの仕組み

ブランドパレット(最大 20 色) #008060 ← 「Brand Primary」として登録 ボタン 見出しアクセント A テキスト色 背景
パレットの色を 1 回更新すれば、そのブランドカラーを使っている全箇所が一斉に変わる。 リブランド・キャンペーン用カラー差し替えの作業コストが大幅に下がる。

6設定手順

1

Checkout & Accounts エディタを開く

管理画面から該当エディタへアクセス。

2

ブランド要素を設定

ロゴ・色・タイポグラフィ・セクションスタイルを設定。色はパレットに保存可。

3

3 面に自動反映

Checkout・Customer Accounts・Sign-in に一貫適用。必要なら面別オーバーライドを設定。

面単位の詳細オーバーライド(Surface-specific override)は Shopify Plus 限定、かつ Checkout and Accounts Configuration API 経由。Plus 以外のプランは標準でロゴ/メイン背景色の差し替えまで。

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

SoT

1. 設定の Single Source of Truth 化

Checkout・Customer Accounts・Sign-in のブランディング設定が一本化された。今後はこのエディタが「ブランド設定の真実の源」になる。

RGB / HEX

2. カラースキーム制約からの解放

数に縛られた「カラースキーム」ではなく、直接カラー値で指定する方式へ。ブランドガイドラインの忠実な再現がやりやすくなった。

PLUS API

3. 面別オーバーライドは Plus + API

標準でできるのはロゴ/メイン背景色の差し替えまで。それ以上の面特化は Shopify Plus が Checkout and Accounts Configuration API から実施。

PALETTE 20

4. パレットは「参照」で繋がっている

パレットの 1 色を更新すると、その色を参照しているすべての箇所が一斉に変わる。CSS の変数のように扱える設計思想。

5. 旧 Checkout Branding API との関係は記事中に明記なし

既存に「Checkout Branding API」が存在するが、それと今回の Configuration API がどう統合/併存するかは元記事に 記載なし。導入前に dev docs での仕様確認が必要。アプリ/テーマ側のブランディング呼び出しがある実装は事前検証推奨。

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

USE CASE 1

リブランディング案件の「面ごとのズレ」をゼロにする

課題
ロゴ刷新/カラーリニューアル時に、Checkout だけ直してカスタマーアカウントとサインインの色が古いまま、という事故が起きやすい。
打ち手
Unified Branding に集約してから、ロゴ・パレット・タイポを 1 度更新するだけで 3 面同時切替。
効果
リブランド作業のチェック項目とリリースリスクが大幅減。デザイナー / マーチャント双方の確認工数も削減。
技術メモ
パレットの色更新は「参照」なので一斉反映。差し替え前にプレビューで全 3 面を確認しておく。
本店 支店A 支店B 支店C
USE CASE 2

マルチブランド/マルチストアでの「面別ブランド味付け」

課題
同じグループ内で複数ブランドのストアを運営、面によって少しずつトーンを変えたい(例 : サインインだけ落ち着いた色)。
打ち手
共通設定は Unified Branding で 1 ストアごとに統一しつつ、必要な面だけロゴ/メイン背景色をオーバーライド。Plus なら Configuration API で詳細制御。
効果
「統一感」と「面別の意図的な差別化」の両立。ブランドガイドラインへの忠実度が上がる。
技術メモ
面別オーバーライドの詳細上書きは Plus 限定。複数ストアで運用する場合は Configuration API の自動化スクリプトが効く。
キャンペーン色
USE CASE 3

シーズン/キャンペーン用カラーの「一括差し替え運用」

課題
セール期・ホリデー期にメインカラーを差し替えたいが、面ごとに直していたため反映漏れが出やすかった。
打ち手
「キャンペーンカラー」をパレットの 1 枠として登録 → 期間ごとに HEX を差し替えるだけで Checkout/Customer Account/Sign-in に一括反映。
効果
キャンペーン投入と撤収のオペが軽くなる。ブランド一貫性を保ちながら短サイクル運用が可能に。
技術メモ
パレットは最大 20 色。常設ブランドカラーと一時利用カラーで枠の使い分け設計を最初に決めると運用が破綻しない。

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

「Checkout・Customer Account・Sign-in のブランド設定が Checkout & Accounts エディタ 1 箇所 に統合。
色は直接指定 + 最大 20 色のパレット参照で一括反映、面別オーバーライドも可。
リブランド作業の事故率を下げ、キャンペーン色差し替えのオペを軽量化する。