どうすれば「リッチな」印象のページになる?
ランディングページの製作時、デザインを「こんな印象のページにしたい」というのはあっても、いざ「どんな配色で」「どんなフォントで」「どの程度の派手さで」を決めるとなると、一体どうやったら自社のターゲットに適したデザインに仕上がるのか分からない! ということはありませんか?
今回は、「真面目で冷静な」「先進的な」「信頼感のある」といったイメージ・印象ごとに、適した配色・フォント等デザインを実際のサイトを例に出してご紹介します。
あなたの「こんな印象を与えたい」という思いをデザインにするとこうなる! というのを具体的にまとめていますので、デザインの方針を立てる上での参考にしてください。
※ランディングページ改善に重要な要素を大きく4つに分け(ファーストビュー、ライティング、導線、その他のポイント)それぞれの項目で訴求ポイントのチェックが行えるシートを無料で公開しています。こちらもご参照ください。
目次
【信頼感のある】印象のデザイン
配色は?
背景は白をベースとし、紺色、緑、水色、茶色など大地・空や海・草木などを連想させる色を使う
ここぞという強調する要素には、深みのある赤も効果的
フォントは?
HGS創英角ゴシックUBなど、比較的ゴシックのオーソドックスのもの、クセのないフォントが望ましい
その他、デザインで演出するには?
・コピーは斜めにしたり、シャドウなどをつけたりなど装飾は控えて、平行に整列させて配置する
・各要素をとにかく整理整頓し、枠で囲むなど仕切る。派手な装飾は控える
・安心しているのが伝わるような消費者の写真を入れる
【親しみやすい・さわやかな】印象のデザイン
配色は?
緑・オレンジ・淡いピンクなど、春の公園で目にするような色を選ぶ
フォントは?
HGS創英角ゴシックUBなど、比較的ゴシックのオーソドックスのもの、クセのないフォントが望ましい
その他、デザインで演出するには?
・あまり綺麗すぎるモデル画像よりも身近にいそうな親近感のあるモデル画像を使う
・モデルは1人よりも複数人集合しているものの方が
「みんなに支持されている」という印象を与えやすい
・空・草原・花畑など、身近にある平和な風景を取り入れる
【ゴージャス・リッチな】印象のデザイン
配色は?
メインカラーは紫や黒など濃度の高い色を使用。ゴールドやシルバーをアクセントカラーにする
フォントは?
明朝体、教科書体など、大人っぽい印象のフォントが望ましい
その他、デザインで演出するには?
・グラデーションを多用する
・イラストではなく解像度の高い写真を使う
・各要素間のスペースは大胆に空けることにより、
落ち着きと知的、高級感を演出できる(ごちゃごちゃさせない)
・キラキラやスポットライトのような装飾をつける
最後に
ランディングページの見本サイト集
ランディングページ集めました。
ランディングページデザインリンク集
ランディングページデータベース(Landing Page Database)
ランディングページのデザインに関するよくあるご質問
ランディングページのデザインでお悩みの方に役立つQ&Aをまとめています。
Q.ランディングページデザインで最初に考慮すべきポイントは何ですか?
A.まず、ターゲットユーザーを明確にすることです。ユーザーの関心や期待に応じたデザインにすることで、直感的に理解されやすいページを作ることができます。
Q.ランディングページの効果的なファーストビューのデザインの特徴は?
A.視覚的に魅力的で、ユーザーにとっての利点を短く伝えることが大切です。CTA(Call to Action)ボタンを明確に目立たせ、ユーザーが次に取るべきアクションをすぐに理解できるようにします。
Q.ランディングページのフォント選びで効果を上げるには?
A.読みやすさが最優先です。特に見出しとCTA部分には、太く大きなフォントを使い、視認性を高めます。全体的に使用するフォントは、ユーザーの興味やページのテーマに合うものを選びます。
Q.ランディングページの信頼性を高めるためのデザイン要素は?
A.信頼性を高めるためには、ユーザーレビューや実績を表示するのが効果的です。会社のロゴ、受賞歴、第三者機関の承認を示すバッジなども有効です。
Q.ランディングページのレスポンシブデザインは必要?
A.現代では多くのユーザーがスマートフォンやタブレットを使用しています。そのため、ランディングページがどのデバイスでも正しく表示され、使いやすいようにレスポンシブデザインを採用することが重要です。
まとめ
いかがでしたか?
「こんな印象にしたい!」という大方針が決まれば、あとはこれらのポイントをおさえてデザインをつけていくだけで思い通りのランディングページになるはずです。
参考:ランディングページ作成ツールの一覧 ≫
※バナーの場合は下記記事もご参考ください
【LISKUL】【バナーデザインの教科書】訴求したいイメージ別|王道デザイン8選!
また、イメージの固め方、デザイナーへの伝え方などは下記記事をご参考ください。
【LISKUL】WEBディレクションの10のコツ~構成からデザインまで~
ぜひ参考にしてみてください。
※ランディングページ改善に重要な要素を大きく4つに分け(ファーストビュー、ライティング、導線、その他のポイント)それぞれの項目で訴求ポイントのチェックが行えるシートを無料で公開しています。こちらもご参照ください。