基礎設計

使用箇所

面

sectionはbgとbg-softだけを交互に使う

境界

カードはborder + shadow-smを基本にする

本文

本文はfg、補足はfg-muted、メタはfg-subtle

禁止

ページ単位で第三の淡色背景を増やさない

運用ルール

• 面の数を絞る

  公開ページの大きな背景は白と補助背景の2種類を基本にし、カード内カードを避ける。

• コントラストを先に確認する

  本文、補足、プレースホルダーは用途別に濃度を分け、淡い文字だけで重要情報を表現しない。

• フッター専用色は混ぜない

  フッターの濃色はフッター帯だけに使い、本文カードやCTAへ流用しない。

使用箇所

検索セル

選択済みラベル、件数バッジ、フォーカスリング

セクションCTA

一覧へ移動など、主行動ではない案内ボタン

チップ

ランキング、こだわり数、状態ラベル

モーダル

モバイル検索パネルのヘッダーグラデーション

禁止

主CTAの塗りを青緑にしない。主CTAは黒ピルを基準にする

運用ルール

• 主役化しすぎない

  ブランド色はナビゲーションと選択状態のために使い、検索実行などの決定操作は黒ピルで統一する。

• 透過段階を固定する

  背景、選択、境界、フォーカスで濃度を固定し、白混ぜの直値を作らない。

• 日本語の可読性を優先する

  濃い青緑面の上には白文字を使い、長文本文は載せない。

使用箇所

評価

星、集計、レビューグラフだけに使う

成功

保存完了、公開中、認証済みだけに使う

エラー

削除、通信失敗、入力エラーだけに使う

注目

見出し下線など、文章の強調だけに使う

グラデーション

NEWバッジ、モバイル検索ヘッダー、ヒーロー被せに限定

運用ルール

• 意味を変えない

  成功色を単なる装飾として使わず、ユーザーが状態を判断する場所に限定する。

• 評価色をCTAに使わない

  星の黄色は評価専用にし、ボタン、背景、リンクへ流用しない。

• エラーは文言とセットにする

  赤だけで警告を伝えず、理由と次に取る行動を日本語で添える。