実際のデザイン分析とは?配色のセンスを鍛える練習方法を解説

配色のルールを本で読んで知っていても、いざ自分でデザインするととっさに応用できない。

そんな悩みを解決する一番の近道は、実際のデザインを分析する練習です。

この記事では、実際のデザイン分析とは何か、そしてどう練習すればよいのかを、初心者向けに解説します。

基本の理解

まずはこの練習方法が何を指しているのか、そしてなぜ効果的なのかを押さえましょう。

実際のデザイン分析とは、すでに公開されている優れたデザインを見て、「なぜこの色なのか」「なぜこの配色なのか」「どの色が最も目立っているのか」を自分の頭で考え、言語化する練習方法のことです。

知識としてインプットした配色のルールを、実際のデザインの中でどう使われているか確認することで、理解が深まります。

数をこなすほど、色を見て判断する感覚(センス)が磨かれていきます。

配色のルールや理論を頭で知っているだけでは、実際に自分でデザインする際にとっさに応用するのが難しいものです。

良いデザインには必ず理由があり、その理由を自分の言葉で説明できるようになることが、感覚に頼らない配色力の土台になります。

分析を始める前に、手がかりとして使う基本の用語を押さえておきましょう。

ベースカラーは最も広い面積を占める土台の色(白や淡いグレーなど)、メインカラーはデザインの印象を決める主役の色、アクセントカラーはごく狭い面積だけに使って一点を目立たせる色です。

また、色相環(赤・橙・黄・緑・青…と色みを順番に並べて輪にした図)の上で正反対に位置する色同士を補色といい、組み合わせると互いを最も強く引き立てます。

コントラストは、隣り合う色同士の明るさ(明度)や色みの差の大きさのことです。

実践方法としては、気になったWebサイトやバナーを見て、ベースカラー・メインカラー・アクセントカラーがそれぞれ何色に割り当てられているかを分析します。

「なぜこのCTAボタン(「今すぐ購入」「資料請求」など、ユーザーに取ってほしい行動へ促すボタン)の色を選んだのだろう」と考え、補色の関係やコントラストの観点から理由を推測してみるのも有効です。

同じジャンルの複数のサイト・バナーを見比べ、業界特有の配色の傾向がないか探してみるのもよい練習になります。

デザイン分析を行う際に陥りやすい失敗と、よくある疑問をまとめます。

「なんとなく良い」で終わらせてしまい、なぜ良いと感じたのかを言語化するところまで踏み込まないと、次に自分で応用できるようにはなりません。必ず理由を言葉にする習慣をつけましょう。
良いデザインの表面的な色の組み合わせだけを真似て、その背景にある目的やターゲットとの整合性を考えずに使ってしまうことがあります。色の組み合わせだけでなく、その配色を選んだ理由まで考えることが大切です。

Q. どんなデザインを分析対象に選べばいい?
A. 自分が制作しているサイトと同じジャンル・業界のサイトを選ぶと、実務にそのまま活かしやすくなります。慣れてきたら、異なる業界のデザインも見て視野を広げるとよいでしょう。
Q. 分析した内容はどう記録しておけばいい?
A. スクリーンショットに、使われている色のHEXカラーコード(#FF6600のように、Webで色を指定するときに使う6桁の英数字の記号)や、気づいたことをメモとして書き添えておくと、後から見返して自分の配色の引き出しとして活用できます。