LPは配色パターンを理解するだけで垢抜ける？デザインに迷ったときの解決法

LPデザインはユーザーを惹きつける重要なポイントですが、なぜそのように言われるのでしょうか。
LPデザインを構成する重要な要素の1つに色があり、人の感情は色によって左右されると言われています。

Webデザインにおける配色は多くの場合、個人の好みに左右され、後から付け加えていくという印象を持っている方が多いでしょう。
仮にディレクターが緑が好きなのであれば、プロダクトの色は緑になることもあります。
このようにして決められることがある色ですが、思っている以上に色は人の感情を動かします。

色には人を悲しくさせたり、信頼感を構築したり、ブランドの精神を反映したりする働きがあるのです。
後半で詳しくご説明しますが、特定の色は人の感情に大きなインパクトを与える社会的に大きな意味があります。

ここでは、配色について解説する前に、配色に関する基本用語をご紹介します。
ご紹介するのは「色相」「明度」「彩度」「トーン」「純色」「補色」「CMYK」「RGB」の8つです。

実は、人は視覚からの情報が87パーセントを占めています。
つまり、Webサイトを訪れたときに、全体のデザインをみてこの先を閲覧するかどうか決める人が多いのです。
実際に、42パーセントの人が、Webサイトの全体のデザインをベースに判断しているという結果が出ています。
したがって、例え文章が良くても、配色やデザインが悪ければ閲覧される可能性が下がってしまうのです。

まずは基本的な配色方法を3つご紹介します。

1つ目は、同系色でまとめることです。
同系色には、同一色相、隣接色相、類似色相があります。

同一色相は、色相が同じで明度と彩度を変化させた組み合わせです。
隣接色相は、色相が隣り合ったもの同士の組み合わせです。
類似色相とは、色相は少し遠いけれど似ているもの同士の組み合わせです。

2つ目は、反対色でまとめることです。
反対色には、補色色相、対照色相、中差色相があります。
補色色相は色相環の対極にある色の組み合わせ、中差色相は直角に位置するもの同士の組み合わせです。
また、対照色相とは、色相環で正三角形を置いた際に、2頂点に位置するもの同士の組み合わせを言います。

3つ目は、トーンでまとめることです。
トーンには、類似トーンと対照トーンがあります。
前者は収まりの良い配色になりますし、後者はアクセントとして利用できます。

これらの色相関係が基本の配色決めの際の参考になるでしょう。

それぞれ、どのような役割を持っているのか、そして、その決め方を説明していきます。

Webページの色を決める際に、コーポレートカラーを使うことも多いと思います。
この項では、まずそのコーポレートカラーの決め方のポイントをご紹介します。

1つ目は、与えたいイメージから色を考えることです。
色にはそれぞれイメージがあります、
例えば、一般的には、赤はエネルギッシュさや情熱、青は知的さや冷静さ、緑はナチュラルさやエコなどの印象を与えることが多いです。
多くの人が持つ色への共通イメージの中から、ご自身の企業が与えたいイメージに合う色を選ぶのも良いでしょう。

2つ目は、競合との差別化を意識することです。
競合他社のサイトやロゴを調べ、同じような配色にならないようにすると良いでしょう。
例えば、メガバンクである3社は、青、赤、緑と全く違ういろをそれぞれ使っています。
しかし、社風やイメージを色に反映するとどうしても競合とかぶってしまうことはあるでしょう。

その場合は、トーンを変えたり、配色の割合を変えたりすることで同じ印象を与えないような工夫をすると良いでしょう。

3つ目は、業種や領域からネーミングなどを連想させる色を考えることです。
業種や領域から連想するというのはどういうことでしょうか。
これは例えば、環境問題を解決する企業なら「緑」、日本的な伝統的なものを扱う企業なら日の丸の「赤」というような感じです。

これは、社名からでも連想できます。
例えば、社名に光が入っていれば黄色、社名に食べ物が入っている場合はその食べ物の色などです。
このような工夫を色に反映できれば、社名を覚えてもらいやすくなるかもしれません。

4つ目は、好きな色から考えることです。
イメージや、競合他社の分析から色を決めても、いまいちピントこない場合もあるでしょう。
そのような場合は、好みで選んでしまっても良いかもしれません。

例えば、創業者の好きな色やラッキーカラーを用いることもできますし、社員で投票して決めても面白いでしょう。
しかし、この方法で決める際には、最終的にその色の持つイメージや、競合他社との関係を確かめておく必要があるでしょう。

以上が、コーポレートカラーを決めるときのポイントです。

ここまで色が人に与える印象を紹介したので、次に具体的な配色について紹介します。

もし介護サービス業の会社で、会社に対して穏やかなイメージを持ってもらいたい場合には、グレーを用いると良いでしょう。
工業系などの会社が誠実さをアピールしたい場合は、青系の色を使うと良いでしょう。

逆にフィットネスジムなどを運営している会社の場合、アクティブな印象を与えるために赤系の色を取り入れても良いでしょう。
美容室などで高級感を出したい場合は、紫を取り入れてみても良いです。

もし業界のイメージが色のイメージと異なっていたとしても、他社との差別化やブランディングの一環として、戦略的に取り入れてみるのもおすすめです。
例えば行政書士は、世間では堅苦しいイメージがありますが、ホームページにやさし色合いを用いることで、お客様に親しみやすさを感じてもらいやすくなります。

また、お客さんの感じる色の雰囲気以外にも、会社のコーポレートカラーを採用するのもおすすめです。
会社の色をホームページに使うことで、次にお客様が関係ない場所で同じ色を見つけた時に、自分たちの会社を連想してもらいやすくなります。
特に、会社のロゴに使われている色をそのまま使うと、効果が高いとされています。

色選びを始める前に、押さえておきたい色に対する人間の特性を紹介します。
それは、右脳と左脳で色は異なる捉え方をされている点です。
人間の脳は、左脳が色を機能的に捉えるのに対し、右脳は情緒的な捉え方をします。

例えば、信号の色を見て道路を渡れるか判断したり、非常ボタンの色を見て緊急時に押すものだと判断したり、トイレが男性用か女性用かを色で判断したりするのは左脳の働きです。
左脳は色を記号のように捉え、機能的に処理します。

一方で右脳が働く例としては、緑と赤の組み合わせを見た時にクリスマスを連想する例が挙げられます。
色が記憶やその時の感情を連想させ、右脳は色を直感的な印象で判断します。
クリスマスの例で言うと、緑と赤の組み合わせを見た人は、過去に経験したクリスマスに関する思い出を思い出し、その時に感じた感情も一緒に思い出します。
そのため色をうまく使えれば、お客さんのプラスな気持ちや購買意欲を引き出し、さらには企業イメージに良い影響を与える可能性があります。

このようにウェブサイトの色合いを考えて配色すると、会社の大きな利益につながる可能性があります。
色が人間に与える印象に関しては、後ほど色別で詳しく解説します。

4色以上の多色を使う場合、うまく使いこなすにはテクニックがあります。
3色目までは先ほどの説明と同様に、ベースカラー・メインカラー・アクセントカラーを同じ比率で入れていけばよいのですが、4色目を入れる際、ベースカラーの割合はそのままに、メインカラーかアクセントカラーどちらかを分割するようにしましょう。
そして分割する際には、元のカラーを等分し、なるべく偏りが出ないようにしましょう。

また、新たに入れるカラーも好きな色を選ぶのではなく、統一感を意識しましょう。
具体的には、すでにある色の色相もしくはトーンのどちらか1つだけが異なる色を採用すると良いでしょう。
トーンは明度と彩度を掛け合わせた色の考え方で、色相が同じ色でもこのトーンが変わると、明るさ、濃淡などが変わってきます。
あえて色同士に共通項のある色を使うことで、色がちぐはぐな印象にならずに済みます。

そもそも、色はどのようにして生まれているのでしょうか。
発色方法には加法混色と減法混色の2つの方法があります。
ここではそれぞれの方法の特徴をまとめていきます。

まずは加法混色です。
これは黒を下地にして、色を重ねるごとに白に近づきながら色を作り出していく方法です。
例えば、スマートフォンやパソコンのスクリーンの発色にはこの方法が用いられています。
赤、緑、青の配分を調整することによって、様々な種類の色を生み出します。

加法混色は光による混色ともいえます。
そのため、光を出力する装置が必要です。
これはつまり、装置の性能やメーカーによって発色が異なることを示しています。
加えて、それぞれのディスプレイ設定の影響もありますし、環境光の影響も強く受けます。
要するに加法混色は状況によって見え方が変わりやすい方法であるということです。

ウェブサイトではよく、担当者のディスプレイに合わせて微妙な色味の調整がなされますが、これにはほとんどといってよいほど意味がありません。
加法混色によってデザインされるものは、環境によって色の違いが生まれると考えておきましょう。

次は減法混色です。
これは白を下地として、色を混ぜることによって黒に近づきながら色を作り出して発色する方法です。

具体的には、絵具やインクを使った発色にはこの方法が用いられています。
一般的な印刷機では、シアンやマゼンダ、イエローやブラックの4色のインクを混ぜ合わせて様々な色を作り出します。
理論上ではシアンとマゼンダ、イエローで全ての色を作れるはずですが、黒以外の色を使って黒を表現するのは難しいため、追加で黒が使用されています。

減法混色はインクと下地で決まる方法です。
加法混色と比較しても、人によって見え方が違う、なんてことは起きにくいです。
ただ、インクや素材によっては見え方が変わることがあります。
また、印刷機のメーカーによっても若干色味が変化することがあります。
色を完全に統一したい場合は、インクや素材、印刷機を統一して出力すると良いでしょう。

配色における3つのカラーの役割や決め方は、理解できたかと思います。ですが、それをいきなり使いこなしていくのは、なかなか難しいですよね。
なので、最後は色が与える印象についてご紹介していきます。配分によって、色の印象や効果が違うので、ぜひいろいろ試してみてください。

配色はウェブページの印象を決定づける重要な要素ですよね。
少しの色味の違いによって雰囲気が一気に変わってしまいます。
ここでは、青を上手に使った色の組み合わせをご紹介します。

ランディングページのデザインにおいて、配色は非常に重要です。
色は人々の感情や行動に影響を与え、それが結果としてビジネスにも大きなインパクトをもたらすのです。
基本的な色の選び方から、コーポレートカラーの決定、さらには色が人々の心に与える影響まで、多角的に解説しました。
色選びに迷ったとき、この記事があなたの羅針盤となることでしょう。
最後に、色は単なる視覚的要素ではなく、ブランドやビジネスに深い意味を持つことを忘れないでください。
この知識を武器に、あなたのLPデザインが世界を彩る一歩となることを願います。


今回ご紹介した内容を参考に、効果的に配色してデザインを成功させてくださいね。