配色

Kyoto の色は 3 つの階層で管理されています。いちばん上のカラーパレットを変えるだけでも、ストア全体の印象を変えられます。

カラーパレット：すべての色のもとになる 20 色
配色：背景・文字・ボタン・入力欄の色を組み合わせた 12 のセット。各セクションと多くのブロックは、このうち 1 つを使います。
工芸の色の面：商品写真、コレクションのタイル、カードの後ろに敷く淡い色

色の設定はすべて テーマ設定 > 配色 にあります。

カラーパレット

パレットの色を変えると、その色を使っている配色・色の面・アクセントがすべて連動して変わります。初期状態のパレットは次のとおりです。

初期値	役割
白 `#FFFFFF`	ページの背景（配色 1）
和紙 `#FAF7F2`	温かみのあるオフホワイト。2 つめの背景（配色 2）と、和紙の色の面
墨 `#1D1A17`	主ボタン
文字 `#1D1A17`	本文と見出し
補助の文字 `#5A544D`	キャプション、日付、ラベル
線 `#E7E1D8`	白・和紙の背景の上の罫線と枠線
藍 `#1F3A6B`	藍の帯（配色 4）
クリーム `#F6EEDB`	クリームの色の面（配色 5）
抹茶 `#E3ECD9`	抹茶の色の面（配色 6）
桜 `#F8DED6`	桜の色の面（配色 7）
朱 `#C8372A`	朱の帯（配色 3）と、カートの数量・新着バッジなどの小さな印
コバルト `#DCE5F6`	コバルトの色の面（配色 8）
鉄灰 `#E9E6E1`	鉄灰の色の面（配色 9）
水色 `#DCEFEF`	水色の色の面（配色 10）
金 `#F4EBCF`	金の色の面（配色 11）
ばら `#F6DCD8`	ばらの色の面（配色 12）
濃いコバルト `#2747A8`	大きな数字、点、線のアクセント
濃い金 `#8C6A1F`	アクセント
濃い抹茶 `#4B7236`	アクセント
青緑 `#1F6F75`	アクセント

色の名前は、このドキュメントで説明のために付けた呼び名です。テーマエディターのパレットには色見本だけが並ぶので、上の初期値を手がかりに見分けてください。

読みやすさを保つしくみ。 パレットの色を背景に使うとき、Kyoto は文字色（設定した文字色か白）のうちコントラストがはっきり出るほうを選び、補助的な文字の色も読める濃さまで調整します。アクセントの色は大きな文字・数字・印のための色で、小さな本文には向きません。

個別に指定した色が優先されます。 配色の中で色を直接変えると、その色は指定した値のまま固定され、パレットの変更には連動しなくなります。

配色

配色	背景	主な使いどころ
配色 1	白	ページとほとんどのセクション
配色 2	和紙	落ち着いた帯、お知らせバー、お客様の声
配色 3	朱、白い文字	締めの帯など、目立たせたい箇所
配色 4	藍、白い文字	暗い帯
配色 5〜12	クリーム、抹茶、桜、コバルト、鉄灰、水色、金、ばら	商品の棚など、淡い工芸の色の上に置きたいセクション

配色ごとに、背景、背景のグラデーション、文字、見出し、補助の文字、アクセント（リンク）、枠線、主ボタンと副ボタンの色（背景・文字・枠線）、入力欄の色を設定できます。配色の一覧の下にある追加ボタンで配色を増やせます。追加した配色は独自の色を持ち、パレットには連動しません。

配色の上には、ストア全体に関わる設定が 2 つあります。

ページ全体の配色：すべてのセクションの背後にあるページの配色です。
ドロワー・ポップアップの配色：ドロワー、検索パネル、そのほかのポップアップの色です。

特定のセクションの色を変えるときは、そのセクションを選び、レイアウト の配色で選びます。

状態を表す色

設定	初期値	使われる場所
セール価格の色	`#B3261E`	セール価格（バッジと価格のセール価格に色を付けるがオンの場合）
成功（在庫あり・追加済み）	`#1E6B45`	成功を知らせるメッセージ
エラー	`#B3261E`	フォームのエラー
注意（在庫わずか）	`#8A5300`	注意を促すメッセージ
レビューの星	`#A8660B`	レビューアプリの星

背景の上で読めるよう、暗めの色を選んでください。これらの色で表示する文字は、コントラスト比 4.5:1 以上が目安です。

工芸の色の面

工芸の色の面は、商品写真の後ろに敷く淡い色です。白背景で撮った写真は白い部分が面の色に置き換わり、商品の実際の影はそのまま残ります。商品が並ぶページが、色とりどりの展示台を並べたように見えるのが特徴です。生活シーンを写した写真は、そのまま表示することもできます。

色の面が使われる場所は次のとおりです。

場所	設定	色の決まり方
商品ページの色の面の舞台ギャラリー	色の面の舞台ブロックの面の色（既定）、色の名前と面の色	色のバリアントごとに、オプションの値に含まれる言葉（例：`indigo: #DCE5F6`）、オプションのスウォッチの色、バリアントのメタフィールド custom.field_colour のいずれかで決まります。どれもなければ、商品のメタフィールドかこのブロックの初期色を使います（商品ページ）。
コレクションページのグリッド	商品の並びの見た目ブロックの写真を淡い色の面に置く、面の色（パレットの淡い色を順に、1 つ）、面の色（1 色）	商品のメタフィールド custom.field_colour が優先されます。なければパレットの色の面を順番に使うか、指定した 1 色を使います。
コレクションのバナーの色の面と棚	面の色	この設定 → コレクションのメタフィールド custom.field_colour → 桜、の順に決まります。
商品の棚セクション	棚の品ブロックのこの品の色の面	ブロックの設定 → 商品のメタフィールド custom.field_colour → パレットの色の面を順番に、の順に決まります。
コレクションのリスト（色の面・丸窓のレイアウト）	コレクション1つブロックの色の面	ブロックの設定がなければ、セクションの配色から工芸の色を順番に使います。
重なるカード	カードブロックのカードの色（背景）、点の色	ブロックの設定。
ギフトの案内（予算のタイル）	予算のタイルブロックの面の色	ブロックの設定。
タイムラインの項目	項目1つブロックの画像の地の色	ブロックの設定。
お客様の声	お客様の声1件ブロックの商品の面の色	ブロックの設定。

商品・バリアント・コレクションごとに、どの場所でも共通の色の面を使いたい場合は、メタフィールド custom.field_colour（タイプは カラー）を作成します（メタフィールド）。

色の面に映える写真の撮り方

白かごく明るい無地の背景で、片側から柔らかい光を当てて撮ると、影がきれいに残ります。
すべての商品を同じ距離・同じ構図で撮ると、色の面の上で大きさがそろって見えます。
色の面の上に商品を単独で立たせる場所（商品の棚、コレクションのバナーの棚、組み合う見出しの最初の画面）には、背景が透明な切り抜きの .png を使います（切り抜き画像）。