想定読者
- デザイナーではないが、配色を一定基準以上にしたい人
- 配色をどう考えればいいか参考にしたい人
この記事で得られること
-
配色迷子を脱出するためのプロセスを、実例付きで手順化しています。（印象づくり → メイン色抽出 → 補色 or 類似色決定 → 70 : 25 : 5 比率に落とし込む）。
-
Muzli Colors・Adobe Color・Material Theme Builder のツールがどういうものかわかります。
-
Before／After 画像を公開しているので、非デザイナーでもすぐにブログへ適用できます。
いかにして配色するか
[[タイポグラフィ改善でブログの可読性を向上させる]]でタイポグラフィの改善を行いました。一定の成果はあったものの、配色に問題があります。例えばあまり考えず複数の色を使っています。イラスト上の字がみづらい。などがあります。
現状
私の主観では以下が気になります。
- 統一感がない。
- イラストの上の文字が見にくい。緑色がよくないと感じる
- フッターの青色はなぜその色なんだろう
まず、色を選ぶ
色がもつ印象や効果を考慮し、色を選ぶことが必要と学びました。私はこのブログでは以下の印象を持つようにしたいと思いました。
- 楽しい
- リラックス
- フレンドリー
このような印象を持つ色はオレンジです。 イラストの面積が大きいので、オレンジをベースにしたイラストに変更することにしました。 ちなみにキャラクタは娘を生成AIでイラストにしました。
イラスト
イラストに含まれる色で #fdbc2e をテーマカラーに決めました。
色の組み合わせを考える
どの色をどの比率で使うかも重要です。 以下のような比率が基本です。メインカラーは決めましたので、他のを決めていきます。
| カラー | 比率 | 用途 |
|---|---|---|
| ベースカラー | 70% | 背景色や余白。 |
| メインカラー | 25% | もっとも見てほしい色。テーマカラー。 |
| アクセントカラー | 5% | 目立たせたいパーツやコンテンツに使用。 |
| 使う色が3色より多くなった場合はメインカラーの部分を分割するとよいです。 | ||
| アクセントカラーは類似のものを選ぶ方法と補色を選ぶ方法があります。 |
Muzli Colors
Muzli Colorsというサイトを使ってみました。これのどれかを使えばいいのでしょうか。
Adobe Color
Adobe Colorというサイトです。単純に補色がでて分かりやすいです。
Material Theme Builder
Material Theme Builderは用途が違いそうですが、試してみました。Neutralというのはベースカラーに使う色なんですかね。これは参考にできるかもしれません。
仮に決める
一旦、以下のように決めました。どうなるでしょうか。
| カラー | コード |
|---|---|
| ベースカラー | #969088 |
| メインカラー | #fdbc2e |
| アクセントカラー | #2d77fc |
可読性が改善しない
変えてみたのですが、全然いいとは思えないです。しかし、問題点が何か、どう改善すべきか分かりません。ChatGptに相談することにしました。
ChatGptに相談
以下のプロンプトで問い合わせました。
カラーを考え直して以下のようにしてブログを変更しました。 全然、よくないのですが、どうしたらいいでしょうか。 ベースカラーをつかうと字が見づらくなります。 | カラー | コード | | -------- | ------- | | ベースカラー | #969088 | | メインカラー | #fdbc2e | | アクセントカラー | #2d77fc |
返信を整理して記載します。
問題点
- ベースカラー上に白字やアクセント色の文字を置くとコントラスト不足。
- アクセント色自体も、白背景にテキストとして使うにはやや薄い。
- ベースカラーを広範囲に使うと画面が沈むうえ、他の色との相性が難しい。
コントラスト比は以下のようになっていました。 WebAIMというサイトで確認できました。 4.5以上であれば本文合格。3.0以上は18px以上の大文字なら可です。
| 背景 | 文字 | コントラスト比(WCAG) |
|---|---|---|
#969088(ベース) |
#FFFFFF |
3.16 |
#969088(ベース) |
#000000 | 6.64 |
#fdbc2e (メイン) |
#000000 | 12.4 |
#2d77fc (アクセント) |
#FFFFFF |
4.07 |
改善の方向性
- ベースカラーは薄い中立色に切り替える
- Material Design の Neutral 90–95 あたりの ごく薄いグレー／アイボリー を背景に使う
- 文字は#1C1B1Fで読みやすい
- メイン・アクセントが映える
- メインカラー、アクセントカラーを深く
- メインを ＃FDBC2E =>
#F8A900 - アクセントを # 2D77FC => # 1A5BFA
- メインを ＃FDBC2E =>
- Hero 部分は暗めグラデーションを敷いて白見出し→可読性アップ。
以下のようにします。
:root {
--base0: #f7f5f2; /* ページ背景 */
--base1: #e3e1db; /* セクション背景・カード */
--onBase: #1c1b1f; /* 通常文字色 */
--main: #f8a900; /* slightly deeper than FDBC2E */
--onMain: #1c1b1f;
/* Accent */
--accent: #1a5bfa; /* deeper blue for contrast */
--onAccent: #ffffff;
}
少し良くなりました
ChatGptに聞いた結果の方がよさそうです。
欠けていた視点はコンストラクト比ですね。
まとめ
配色について勉強し、blogを変更しました。タイポグラフィよりも難しく、良くなったのは統一感がでてきたことぐらいの気がします。 次は以下をやりたいと思います。
- lighthouseのスコアの向上
- imageの見せ方