カラーガイドラインの使い方

各カラーの役割

プライマリーカラー

• メインのテキスト色として使用

• ヘッダーやフッターの背景色

• ナビゲーションバーの背景色

• ボタンの枠線や非アクティブ状態の色

セカンダリーカラー

• サブヘッダーのテキスト色

• 重要な情報やリンクの色

• サイドバーの背景色

• アクティブな状態のボタンの背景色

アクセントカラー

• ホバー状態のボタンやリンクの色

• 強調したい要素（アイコン、小見出しなど）の色

• プログレスバーやグラフの色

具体例

プライマリーカラー：ミディアムグレー (#6D6D6D)
セカンダリーカラー：ダークブルー (#1E3A5F)
アクセントカラー：スカイブルー (#87CEEB)

上記を設定した場合、下記のような使い方になる

• ナビゲーションバー：背景をミディアムグレー、テキストを白、アクティブなリンクをスカイブルーに

• ボタン：通常時はミディアムグレーの枠線とテキスト、ホバー時はスカイブルーの背景とダークブルーのテキスト

• 見出し：大見出しをダークブルー、小見出しをミディアムグレーに

• フォーム：入力フィールドの枠線をミディアムグレー、フォーカス時にスカイブルーに変更