Seren ブランドカラーガイド
社内スタッフ向け／サイト・販促物制作時の配色ルール
■ カラーパレット
機能色（メイン）
#62796d（くすみグリーン）
差し色（意味色）
#A9884A（ゴールド）※極小面積のみ
■ 色の役割の考え方
| 役割 |
色 |
機能 |
| ベース背景 |
#fcf3e0 |
サイト全体の土台 |
| 機能色 |
#62796d |
ボタン・ナビ・アイコン・リンクなど「使う」色 |
| 意味色 |
#A9884A |
特別感を「添える」色。バッジ・アイコン縁取りのみ |
■ コンポーネント別 使用ルール
| コンポーネント |
使用色 |
備考 |
| ページ背景（基本） | #fcf3e0 | 全ページ共通 |
| セクション背景（区切り用） | 白／クリーム交互 | ゴールドは背景に使わない |
| ヘッダー/フッター背景 | #62796d | ナビ文字は白抜き |
| 見出し／本文テキスト | 濃ニュートラル（#3a3d38目安） | グリーンそのものは見出しに使わない |
| CTAボタン（主要・副とも） | #62796d | 全CTA共通。ゴールドは使わない |
| ボタンhover時 | #4a5c52目安 | グリーンを一段暗く |
| 本文中リンク／アイコン | #62796d | 下線あり |
| バッジ・タグ（資格・新規オープン等） | #A9884A | ゴールドの主戦場 |
| アイコンの縁取り・ワンポイント装飾 | #A9884A | 枠線のみ。塗りつぶし不可 |
| 区切り線・ボーダー | #e6ddc8目安 | ゴールドではなくニュートラル |
| エラー／成功メッセージ | #c0554f ／ #6b8f6a目安 | フォーム等 |
■ 迷ったときの判断基準
- これは「ユーザーに行動してほしい」要素か？ → Yesならグリーン（CTA・リンク・フォーム）
- これは「見て特別に感じてほしい」だけの装飾要素か？ → Yesならゴールドを検討可（バッジ・資格アイコン等）
- ゴールドは1画面内に1〜2箇所までを目安にする（多用すると差し色の意味を失う）
最終更新：2026年7月／このガイドはSerenブランドのWebサイト・販促物制作時に参照してください。
