現時点の CSS で使っている色を整理してみました
サイトの見た目を触っていると、どの色を基準にしていたのかを後で見返したくなることがありますよね。そこで今回は、現時点で CSS に入っている色を大まかに整理して、後から確認しやすいようにまとめておきます。
今のところは、全体として暗めの背景に、珊瑚色寄りの赤と金色を差し込む構成が中心ですね。そこに、ジャーナルや解析ページ、ポイント管理まわりで必要な補助色が足されているような形になっています。
全体の基調色
まず、サイト全体で軸になっている色はこのあたりです。
| 役割 | 色 | メモ |
|---|---|---|
| ベース背景 | #333 | サイト全体の土台になっているダークグレーです。 |
| 濃い背景 | #1a1a1a / #222 / #2a2a2a / #3a3a3a / #444 / #555 | セクションやカード、フォーム、線の階調に使っています。 |
| 本文文字 | #e7e6e1 | 少し生成り寄りの白で、本文の基準色です。 |
| 白系文字 | #fff / #ffffff / #fff7f7 | 強いコントラストが欲しい場面で使っています。 |
| 補助文字 | #ccc / #ddd / #eee / #aaa / #999 / #777 | 説明文や補足、弱めのラベル用です。 |
赤系のアクセント
一番目立つ色は、やはり赤系のアクセントですね。リンクや見出し線、枠線、ホバー演出などでかなり広く使っています。
| 役割 | 色 | メモ |
|---|---|---|
| メインアクセント | #ff6f6e | リンクや強調、見出しまわりの主役色です。 |
| 明るめの赤 | #ff8988 / #ffb5b5 | ホバー時や補助的な強調に使っています。 |
| 濃い赤 | #c20000 / #8d4038 | 一部の境界線や差し色で使っています。 |
| 朱色系の透過 | rgba(231, 76, 60, 0.2 / 0.5 / 0.6 / 0.7) | スクロールバー、選択色、ラインの演出で使っています。 |
| 珊瑚色系の透過 | rgba(255, 111, 110, 0.05 / 0.08 / 0.15 / 0.18 / 0.2 / 0.25 / 0.3 / 0.32 / 0.35 / 0.4 / 0.5 / 0.55 / 0.7) | hover、背景、枠線、吹き出し的な装飾で使っています。 |
金色と黄系のアクセント
赤系と並んで、日付やカテゴリ、ポイント系で効いているのが金色です。暗い背景の上でも見えやすいので、情報の優先度を少し上げたいときに重宝します。
| 役割 | 色 | メモ |
|---|---|---|
| 日付・カテゴリ | #ffd980 | 時刻表示やカテゴリ導線などでよく使っています。 |
| 強めのゴールド | #ffd700 | ポイント、管理画面、確認ボタンなどの主役色です。 |
| 補助の黄系 | #ffed4e / #e8d68a / #e0c86a / #d9c36a / #c9b154 | 見出し補助や注意のニュアンスに使っています。 |
緑系と状態表示の色
ポイント機能や確認メッセージでは、成功と失敗がひと目で分かるように、緑系と赤系の状態色も入れています。
| 役割 | 色 | メモ |
|---|---|---|
| 成功背景 | #4a5d4a / #3d4a3d | 成功メッセージや達成状態の背景です。 |
| 成功の線・文字 | #7cb37c / #a3e8a3 / #7bed9f | 成功、達成、準備完了などの表示に使っています。 |
| 失敗背景 | #5d4a4a | エラー系の背景です。 |
| 失敗の線・文字 | #d47575 / #ff9999 / #ff6b6b / #ff5252 | エラー、削除、警告系の表示に使っています。 |
解析ページと補助的な色
通常の公開ページとは少し趣を変えて、解析や表組みでは青系などの補助色も使っています。
| 役割 | 色 | メモ |
|---|---|---|
| 解析テーブルの強調 | #0066cc / #66ccff / #404050 | テーブル見出しや hover の差を出すための色です。 |
| 週末や区別用 | #ff8080 / #80bfff | カレンダーの曜日差分などで使っています。 |
| 明るい面の補助 | #f2f2f2 / #f4f4f4 / #e4e4e4 / #d8d8d8 | アイコン背景や軽い UI 部品で使っています。 |
外部サービス寄りの色
SNS ボタンや共有まわりでは、各サービスを連想しやすい色も混ざっています。このあたりはサイトの統一色というより、用途に合わせて置いている色ですね。
| 色 | 用途のイメージ |
|---|---|
| #1877f2 | Facebook 系の青 |
| #00b900 | LINE 系の緑 |
| #00a4de / #4fabff / #80bfff | 青系サービスやリンク補助 |
| #2bb24c / #3eb144 / #3aa655 | 緑系の補助アクセント |
| #ff9900 / #ffb03b / #f87 | 通知や補助アイコン向けの暖色 |
| #ff4d6d / #ff5b59 / #d9a7ff / #b94add | 装飾や差し色として入っている色 |
透明色とオーバーレイ
見た目の印象を決めているのは、単色だけではなく透過色の使い方もかなり大きいですね。特に、赤系の透過を重ねることで、柔らかい光り方に寄せています。
- rgba(0, 0, 0, 0.05 / 0.25 / 0.3 / 0.4 / 0.5 / 0.7 / 0.75)
- rgba(255, 255, 255, 0.03 / 0.04 / 0.05 / 0.08 / 0.1 / 0.12 / 0.2 / 0.85)
- rgba(255, 217, 128, 0.1 / 0.16)
- rgba(255, 176, 59, 0.1)
- rgba(255, 128, 128, 0.16)
- rgba(255, 91, 89, 0.1)
- rgba(62, 177, 68, 0.1)
- rgba(79, 171, 255, 0.1)
- rgba(126, 237, 159, 0.15 / 0.3)
- rgba(127, 179, 124, 0.3 / 0.6)
- rgba(217, 167, 255, 0.1)
- rgba(225, 240, 255, 0.95)
- rgba(255, 215, 232, 0.95)
- rgba(255, 225, 232, 0.95)
今の印象をひとことで言うと
今の CSS は、暗めの灰色を土台にしつつ、#ff6f6e をリンク色や鳥居、見出しまわりなどのメインコンテンツ側に使い、#ffd980 をタイトルや時間表示などのサブコンテンツ側に置いている形になっています。そこに、成功系の緑や解析用の青を必要な分だけ足しているので、全体としては「ダーク寄りだけれど、赤を主役、金色を補助にした配色」と言えそうです。
今後デザインをさらに詰めるなら、役割をもう少し明文化してもよさそうですが、色の見え方としては現状でも十分まとまっているかなと思います。現時点の整理としては、ひとまずこの配色メモを基準にしていきたいですね。
