【解説】LP(ランディングページ)の背景には写真？単色カラー？【色彩心理も活用】
本記事の内容は、
・LP(ランディングページ)の背景はどんなのが望ましいのだろう？
・背景色によってどんな印象があるか知りたい
・色の活用事例(業種)を知りたい
こういった疑問やお悩みにお答えします。
本記事のテーマ
【解説】LP(ランディングページ)の背景には写真？単色カラー？【色彩心理も活用】
LP(ランディングページ)の背景には写真？単色カラー？
LP(ランディングページ)の背景は、商材やサービスの特徴によって、単色の方が良いもの、写真(テクスチャ)が良いものと変わってくるでしょう。
どういった雰囲気に仕上げたいかで、テイストが変わってくるためです。
シンプルな感じにしたい場合は、背景も単色やグラデーションといったシンプルなもの、少しおしゃれな感じにしたいなら写真やテクスチャを使うといった具合です。
コンバージョンを意識した場合、白背景+黒テキストが良い理由
コンバージョンを意識した場合、基本的に背景色は単色カラーでテキストが見やすい色(白が最適)が良いでしょう。
その理由として、白背景に黒文字が一番見やすく、説得力も生まれやすいからです。
例えば、白背景とグレーの背景それぞれの上に文字が載っていた場合はどうでしょうか。
白背景に黒文字や赤文字が載ると、見やすく説得力のある感じが出てくると思います。
また、細い文字と太い文字を比較した場合、どちらがより強く説得力のある印象を感じるでしょうか。
太い文字の方が、こちらにしっかり伝えてくる感じが伝わるかと思います。
LP(ランディングページ)でコンバージョンに繋げるためには、いかにユーザーに商品が自分にとって有益なものなのかと感じて貰う必要があります。
先程の比較でも見て頂いた様に、信頼感に繋がりやすいのは、白背景ベースの黒文字や赤文字といったものになります。
画像やテクスチャを背景に使用する場合の注意点
背景に画像やテクスチャを使用する場合もあります。
単色と違い、雰囲気がおしゃれになるかもしれませんが、以下の様な注意が必要になります。
背景が目立ち過ぎないように、ぼかしたり、白背景を上に被せる
テキストが背景のせいで見づらくならないように、テキストの後ろに白背景などを置く
テキストが背景のせいで目立たない場合は、ドロップシャドウ+光彩でテキストの外側を白くする
あくまでもテキストが主役になる様、背景を配慮することが大切です。
ファーストビューの背景を画像にするパターンもありますが、コンバージョンを意識した場合、基本は白背景+テキストが良いと言えます。
画像を背景にする場合は、上記の点に注意する必要があります。
色彩効果による背景色選び
背景色によって、全体の雰囲気やトーンが決まったり、受ける印象もだいぶ異なります。
また人間の心理に基づく、背景色の選び方も重要になってきます。
色の及ぼす心理的影響力
色の持つ心理効果は、科学的にも明らかにされています。
色によって、人の気分が変化したり、健康面にも影響する場合があります。
お申し込みボタンの色は「緑色」が一番コンバージョン率が高いという結果もあります。
以下の記事でボタンについて解説しております↓
この様に、色の違いでもコンバージョンに影響が出てくると言えます。
色が喚起するイメージ
色によって、商品やサービスが持つイメージや雰囲気を操作することも可能です。
では、具体的にどんな色がどんな雰囲気を与えるのでしょうか。
白：清潔、神聖
グレー：真面目、落ち着き
黒：高級感、重厚感
赤：情熱、興奮
オレンジ：喜び、ポジティブ
黄色：元気、希望
緑：癒し、安定
青：信頼感、誠実
紫：神秘、優雅
ピンク：可愛い、愛情
色の活用方法
色の持つ雰囲気が分かった上で、どのように活用していけば良いかを解説していきます。
白の活用
清潔な印象を持たせたい医療関係や、明るく華やかな印象を持たせたいブライダルなどと相性が良いでしょう。
黒の活用
重厚で高級感のある印象を持たせたい商品や、高級マンションを扱う不動産なども相性が良いでしょう。
グレーの活用
落ち着いた印象を持たせるため、ビジネス関係のサービスや商品と相性が良いでしょう。
赤の活用
情熱的で興奮させる色のため、行動を促すセール(〇%引きなど)に使われることが多いです。
また、黄色と組み合わせることで、注意を促す色として目を引くことも出来ます。
オレンジの活用
陽気で暖かい印象を与えることから、家族の温もりを表す住宅関係と相性が良いでしょう。
楽しい雰囲気のイベントや、子ども向けの商品やサービスにも良いかもしれません。
黄色の活用
黄色は使い方に注意が必要です。
なぜなら、黄色は使い方によっては目立ちやすくもなり、目立ちにくくもなるからです。
黒テキスト(もしくは赤テキスト)+黄色背景は効果的でしょう。
黄色テキストは白背景などでは全く目立たないのでNGです。
黄色を沢山使いすぎると、目がチカチカしてしまうので、注意が必要です。
緑の活用
安らぎや、健康といったイメージを持たせるため、温泉や健康食品と相性が良いでしょう。
信頼感も与えやすい色なので、塾や勉強教材系のカラーとしてもありです。
青の活用
信頼感を与えるため、ビジネス系やシステム系と相性が良いでしょう。
青の色合いによっては、悲しみや冷たさを連想させるため、お悩み訴求に濃い青を使用することもあります。
紫の活用
神秘さ、上品さをイメージさせるため、優雅な女性を連想させる化粧品やスピリチュアル系と相性が良いでしょう。
ピンクの活用
可愛らしさを連想させるため、子ども系や女性系の商品やサービスと相性が良いでしょう。
幸福感や愛情の印象もあるため、贈り物関係の色にも使われます。
全体の統一感を出すためには、3色を意識する
LP(ランディングページ)全体の統一感を出すためには、大きく3色で構成すると良いと言われています。
メインカラー＋サブカラー＋強調色(赤や黄色)です。
全体の色使いは、メインカラーとなる色を明るくしたり暗くするといった、ズラした色が良いでしょう。
そうすることで、全体に統一感が生まれ、デザインのクオリティがグッと高まります。
逆に沢山の色を使ってしまうと、全体の統一感が崩れたデザインになってしまいます。
そういうデザインもあるかとは思いますが、コンバージョンを意識した上での制作の場合、色使いには注意が必要です。
まとめ
今回の、まとめは以下になります。
・LP(ランディングページ)の背景は、商材やサービスの特徴や雰囲気によって、単色の方が良いもの、写真(テクスチャ)が良いものと変わってくる。
・コンバージョンを意識した場合、白背景+黒テキストが良い。
・画像やテクスチャを背景に使用する場合の注意点は以下の通り。
－背景が目立ち過ぎないように、ぼかしたり、白背景を上に被せる
－テキストが背景のせいで目立たない場合は、ドロップシャドウ+光彩でテキストの外側を白くする
－テキストが背景のせいで見づらくならないように、テキストの後ろに白背景などを置く
・色が喚起するイメージ、色の活用方法は割愛させていただきます
・全体の統一感を出すためには、3色を意識する
以上が、今回のまとめになります。
背景色によっては、テキストの主張具合も変わってきたり、カラーによっては人間の心理が変化するため、ユーザーが受ける印象を考えながら、コンバージョンに繋がるLP(ランディングページ)を制作していきましょう！
こちらの記事を最後まで、ご覧いただきありがとうございました！