BLOG
サイトの配色を分析・解読する — なぜその配色が効いているのかを読み解く
「このサイトの配色、いいな。自分のサイトにも取り入れたい」——そう思っても、いざ真似ようとすると、どの色が、どこに、どれくらい使われているのか が、目で見ただけでは正確に分からない。なんとなく色を拾って使ってみても、元のサイトのような洗練は出ない。配色は、デザインの中でも特に「良し悪しは感じるのに、理由を言葉にしにくい」要素です。
世の中には「配色の決め方」「おすすめ配色ツール」といった、これから配色を 作る・決める 人向けの記事があふれています。それらは役に立ちますが、この記事の切り口は違います。お伝えしたいのは、配色を決める前に——すでにある良いサイトの配色を「分析・解読」して、「なぜその配色が効いているのか」を理解する 力です。色を生成するツールでも、決め方の理論だけでもなく、既にある配色を読み解く 視点。これは、yorunoma が最も得意とする領域でもあります。
配色の「読み解き方」が身につくと、参考サイトから学べる量が一気に増えます。「なんとなくおしゃれ」が「ベースを絞り、差し色を一点効かせているから締まって見える」に変わる。この記事は長めです。配色を構成する役割と原理を、「決める」ためでなく「読み解く」ために、深く解説していきます。
配色は「なんとなく」ではなく「役割」で作られている
良いサイトの配色を見て、まず理解してほしいのは、それぞれの色には「役割」がある ということです。配色は、好きな色を並べたものではありません。画面の土台を作る色、世界観を決める色、一点だけ効かせる色——役割の異なる色が、決まった面積のバランスで組み合わされて、あの「まとまり」が生まれています。
だから、配色を学ぶ近道は、決め方の理論を暗記することではなく、良い配色の「役割分担」を読み解けるようになる ことです。役割が見えると、「なぜこのサイトは締まって見えるのか」「なぜあのサイトは高級に見えるのか」を言葉にできます。そして言葉にできれば、その原理を——色そのものではなく、色の 使い方 を——自分のサイトに持ち込めます。これが、配色を「真似る」から「活かす」に変える分かれ目です。
なお、ここで扱うのは 見た目のデザインの配色 です。何％が申し込んだかという CVR や、アクセス数を見る アクセス解析とは別の領域 で、この記事も yorunoma も、そこには踏み込みません。「なぜその配色が良く見えるのか」を読み解くことに、役割を絞ります。
サイトの配色を読み解く、4 つの視点
ここが、この記事の心臓部です。サイトの配色は、次の 4 つの視点で読み解けます。それぞれ、「決め方」としてではなく「読み解き方」として、一歩深い"なぜ"まで見ていきましょう。
1. 3 つの役割と比率 — なぜ「70:25:5」が心地よいのか
配色の基本は、3 つの役割 です。画面の大半（およそ 70%）を占める ベースカラー（土台・背景をなす色）、25% 前後を占める メインカラー（世界観・ブランドを表す色）、そして 5% ほどしか使わない アクセントカラー（差し色。CTA など一点を強調する色）。よく「70:25:5」と言われるこの比率には、ちゃんと理由があります。
面積のバランスが、視線と印象を作る からです。土台となる色を広く取ることで全体が落ち着き、その上でメインカラーが世界観を添える。そして、ごく狭い面積にしか使わないからこそ、アクセントカラーは「特別」に見え、そこに視線が集まります。もしアクセントカラーを 30% も使えば、それはもう「特別」ではなくなり、強調が効かなくなります。この比率は、暗記する数字ではなく、「なぜこの面積配分だと心地よいのか」を理解すると、どんなサイトの配色も読み解けるようになります。実際のサイトで、どの色がどの役割を担い、どれくらいの面積を占めているかは 配色を役割と占有率まで調べる方法 で 1 色ずつ確かめられます。
2. 色数を絞る理由 — なぜ増やすと「まとまり」が崩れるのか
良い配色は、たいてい色数が絞られています（役割ごとに 1 色ずつ＝実質 3 色前後）。なぜ絞るのか。色数が増えると、二つの問題が起きる からです。一つは、視線が散って「まとまり」が失われること。もう一つは、色が多いぶん一つひとつの色の存在感が薄まり、アクセントカラーの「効き」が消える こと。差し色は、他に強い色がないからこそ際立つのです。「なんとなくごちゃごちゃする」配色は、たいてい色数が多すぎます（この切り分けは サイトが「なんかごちゃごちゃする・まとまりがない」原因の当たりのつけ方 で詳しく扱っています）。逆に「洗練されている」と感じる配色は、色を我慢して絞った結果です。
3. コントラストと可読性 — なぜ「純黒（#000）」を避けるのか
配色は、美しさだけでなく 読みやすさ も左右します。背景と文字の 明度差（コントラスト） が小さいと、文字が読みにくくなります（薄いグレーの背景に薄いグレーの文字、が典型的な失敗）。読み解くときは、「本文がストレスなく読めるだけのコントラストがあるか」を見ます。
もう一つ、上級者が知っている読み解きポイントがあります。洗練されたサイトの多くは、真っ黒（#000000）や真っ白（#ffffff）を避け、少しだけ濁らせた黒・白を使っています。純黒は強すぎて目が疲れ、コントラストがきつくなりすぎるため、わずかに色味を含んだ「ソフトな黒」を使うと、上質で落ち着いた印象になります。良いサイトの黒が「実は完全な黒ではない」ことに気づけると、配色を見る解像度が一段上がります。コントラスト不足が読みにくさ（見づらさ）につながる仕組みは ホームページが見づらい原因と、その見つけ方 でも扱っています。
4. 色とトーンの印象 — なぜその色が「らしさ」を作るのか
最後は、色そのものが与える印象です。暖色（赤・オレンジ）は活発・親しみ、寒色（青・緑）は誠実・清潔、といった色相の印象に加えて、トーン（明るさ・鮮やかさ） も印象を大きく左右します。同じ青でも、明るく澄んだ青は爽やか、暗く沈んだ青は重厚。読み解くときは、「このサイトは、色相とトーンで、どんな"らしさ"を狙っているか」を言葉にします。ただし、色の印象に絶対の正解はなく、配色の良し悪しは目的次第 です。にぎやかさが武器になるサイトもあれば、静けさが効くサイトもある。「この目的に、この配色が合っているか」という視点で読み解くのが大切です。
実際のサイトで、配色を読み解いてみる
4 つの視点が分かると、気になるサイトの配色を自分で読み解けるようになります。実際に良いサイトを開いて、次の順で見てみてください。
- どれがベース／メイン／アクセントか — 画面の大半を占める色（ベース）、世界観を作る色（メイン）、一点だけ効いている色（アクセント）を見分けます。CTA ボタンに使われている色が、たいていアクセントです。
- 色数はいくつか — 役割の異なる色が何色使われているかを数えます。絞られているほど、締まって見えます。
- コントラストは十分か — 本文が背景から浮き上がって、ストレスなく読めるかを確かめます。黒が「純黒」か「ソフトな黒」かも見てみましょう。
- 全体の印象（色相・トーン） — 暖色か寒色か、明るいか落ち着いているか。その印象が、サイトの目的に合っているかを考えます。
この視点で 1 つのサイトを読み解くだけでも、「なんとなく良い配色」が「なぜ良いか」に変わります。ただ、正確に読み解こうとすると——色を目視で見分け、役割を判断し、占有率を見積もる——手作業ではかなり難しい のも事実です。似た色の微妙な違いや、正確な面積比は、目だけでは掴みきれません。そこで、次の選択肢が出てきます。
yorunoma で配色を分析すると
ここからは、実際に yorunoma で配色を分析するとどう読み解けるのかを、実データ で見ていきます。配色は yorunoma が最も得意とする領域なので、複数の実例で見せます。
まず、主役の色が映えるコスメサイトを分析すると、使われている色が 1 色ずつ、役割と占有率つき で読み解かれます。主役のミディアムピンク（#cf5074）が、アクセントとして何％の面積に、どこに使われ、どんな印象を作り、視線をどう集めているか——理論で言う「アクセントカラー 5%」が、実データとして目の前に現れます。「なんとなく可愛い配色」が、「差し色のピンクが、狭い面積だからこそ効いている」という分析に変わります。
まったくテイストの違う配色 でも、同じように読み解けます。黒を基調にしたダークなサイトを分析すれば、極めて暗いベース色（実は純黒ではなく、わずかに濁らせた黒）が高級感の土台を作り、少量の差し色が引き立っている——という設計が言語化されます。理論で学んだ「ソフトな黒」「ベースを広く・差し色を狭く」が、実データで確かめられます。
さらに、気になった色は 詳細 まで確認できます。HEX・RGB・HSL といった色の値、役割、コントラスト、心理的な印象まで、1 色ずつ言語化されます。手作業では見積もるしかなかった占有率や、目では区別しにくい色の値が、正確に手に入る。手作業で難しかった配色の読み解きが、URL を 1 つ入れるだけで済む——これが、配色分析を看板とする yorunoma の違いです。
こんな使い方
配色を読み解く力は、次のような場面で役立ちます。
- 参考サイトの配色を分析して学ぶ — 「良い」と感じる配色を 1 色ずつ読み解き、役割分担・比率・コントラストがどう効いているかを言語化します。色そのものでなく、色の使い方を理解して、自分のサイトに翻訳します。真似でなく理解する姿勢は サイトのデザインをパクリにせず参考にする方法 もどうぞ（分析は全プランで使え、登録なしの無料体験でも試せます）。
- 自分のサイトの配色を、客観的に確かめる — なんとなく選んだ配色が、役割分担できているか・色数が多すぎないか・コントラストは十分かを、客観的に確かめます。優先度つきの改善提案まで欲しいときは「診断」（Pro プラン以上）が向いています。
- 競合と配色を、並べて比べる — 目指したいサイトと自分のサイトの配色を見比べ、差を掴みます。2 つを並べて差分を出す「比較」は Premium プランの機能です。
配色の読み解きは、才能ではなく「視点」です。役割で見る目を持てば、どんなサイトの配色からも学べます。
よくある質問（FAQ）
無料で使えますか。
はい。URL を入れて配色・フォント・コピー・構造・アニメの 5 要素を読み解く「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。まずは配色が気になるサイトの URL を 1 つ入れて、色を 1 色ずつ読み解くところから始められます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
配色を提案・生成してくれますか。
いいえ。yorunoma は、色を新しく作ったり配色を提案したりする道具ではありません（それは Adobe Color のような配色ツールの役割です）。yorunoma がするのは、既にあるサイトの配色を、1 色ずつ役割・占有率つきで読み解く こと。ゼロから色を作るのではなく、「良い配色がなぜ良いのか」を分析して理解するための道具です。
CVR やアクセス数などの成果も分かりますか。
いいえ。yorunoma は 見た目のデザインを読み解くツール です。CVR（コンバージョン率）・アクセス数・売上といった成果や数字は、測りません。それらはアクセス解析ツールの領域です。yorunoma が扱うのは配色などデザインの中身で、「なぜその配色が良く見えるのか」を読み解くところに役割を絞っています。配色の良し悪しも目的次第で、「この配色なら売れる」とはお約束しません。
自分のサイトの配色も分析できますか。
はい。自分のサイトの URL を入れれば、同じように配色を 1 色ずつ読み解けます（分析は全プランで使え、無料体験でも試せます）。自分のサイトについて優先度つきの改善点まで出す「診断」は Pro プラン以上、2 つのサイトを並べて見比べる「比較」は Premium プランの機能です。
競合と自社の配色を比較できますか。
はい。2 つのサイトを並べて、配色を含む 5 要素の差分を出す「比較」は Premium プランの機能です。まずはサイト単体の「分析」を、全プランで使える無料体験で試してみてください。
まとめ
サイトの配色は、「なんとなく」ではなく「役割」で作られています。土台をなす ベース（約 70%）、世界観を作る メイン（約 25%）、一点を強調する アクセント（約 5%）——この役割分担と比率、色数を絞る理由、コントラストと可読性、色とトーンの印象。この 4 つの視点で「なぜその配色が効いているのか」を読み解けるようになると、参考サイトから学べる配色の量が、何倍にもなります。大事なのは、色そのものを真似ることではなく、色の"使い方"を理解して自分のサイトに翻訳すること。手作業では難しい配色の読み解きも、気になるサイトの URL を 1 つ入れるだけで、1 色ずつ役割・占有率つきで手に入ります。配色を「感じる」から「読み解ける」へ。今日から、見る目を変えていきましょう。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。