ランディングページはパッと見た瞬間の印象が重要で、この第一印象を左右するのがデザインです。ここでユーザーを逃してしまうと、商材をアピールする機会が絶たれてしまいかねません。ランディングページには欠かせない要素がいくつかありますが、今回はユーザーを惹きつけるデザインの特徴をご紹介します。どのようにしてランディングページのデザインを決めれば良いのかお悩みの方は、ぜひ参考にしてくださいね。
この記事を読んだらわかること
・参考にしたいおすすめランディングページ9選
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！
ランディングページのデザインで意識する5つのポイント
ランディングページをデザインする際には、念頭に置いておくべき重要な点があります。ここではより効果的なランディングページデザインに共通するポイントを5つご紹介します。ぜひともサイトの制作時には、以下の5点を意識してみてください。
ターゲットに適したデザイン
ランディングページはアピールしたいターゲット層を設定して制作する広告サイトです。そのターゲット層は具体的な人物像を分析して決められるものなので、その人物像が好みそうなデザインを考案することが重要となります。
例えばヘアケア商品のランディングページをデザインする場合、同じヘアケア商品であっても、30代女性をターゲットとした商品と20代男性に向けたものとでは自ずと趣きが変わってくるものです。ここを間違えてしまうと、せっかくサイトを見に来てくれたユーザーにすぐ離脱されかねません。
CTAにこだわったデザイン
CTA（Call To Action）とは、ユーザーが商材の購入や申し込みにつながる具体的行動につながるパーツのことをいいます。ランディングページでは、主に問い合わせボタンや購入ボタンなどがこれに該当します。
CTAは押すのに勇気が要ることもあり、ユーザーがより押しやすくなるような大きさ・色・形を重視する必要があります。またボタン上のコピーもユーザー心理を動かすようこだわったものを考案しましょう。
強弱をつけたデザイン
ランディングページは広告の体裁を取っているため、全てのコンテンツ内のコピー（文章）を全て細かく読んでもらえない可能性が高いと言えます。このため、ここは止まって熟読してほしいというコンテンツはよく目立つようなフォントやカラーを選ばなくてはなりません。
一方、流し読みでもOKと妥協できる文字数の多いコンテンツなどは地味なフォントにするなど、強弱をつけたデザインを心がけると最後まで目を通されやすくなります。また、フォントや色で強弱をつけてアイキャッチ効果を高め、ユーザーの購買意欲をかきたてる工夫も必要です。
ファーストビューは画像にこだわったデザイン
ページのトップ部分であるファーストビューは、ユーザーが最初に目にする最重要箇所です。目にした最初の数秒でこのページに留まるかどうかを決められてしまうとも言われる部分なので、ターゲットユーザー（＝ペルソナ）が思わず見入ってしまうような画像やキャッチコピーを配することが必要となります。
ターゲット層が好みそうであるという観点に加え、商材の特徴や魅力を十分に引き出せるようなデザインを採用し、商材のイメージをよりよくできるよう工夫しましょう。
お客様の声を掲載し、ユーザーの信用を獲得できるデザイン
サイト運営者側から発信するコピーや画像・動画だけでなく、第3者が商材を評価している実績が見られるコンテンツをデザインすると効果的です。口コミ・受賞歴・ランキングなどの客観的評価は、商品購入を後押しする重要な要素となります。
また、権威性を表すものは他にも有名人からの使用感想やおすすめコメントなどを画像つきで掲載するようなコンテンツも有効です。このようなコンテンツで安心感を与えて購買につなげられるよう、目立つデザインでアピールしましょう。
単調なデザインが続いたり、反対に派手でギラギラしたデザインが続いたりするとユーザーも読んでいて飽きてしまうので、メリハリのあるデザインが重要です。
ZERO式ランディングページ制作はこちら
参考にしたいおすすめランディングページ9選
成果を上げているランディングページのデザインは、いずれも先ほどご紹介した5つのポイントを踏まえて制作されています。ここでは、売れるランディングページを作る時に参考になる、既存のランディングページをあれこれご紹介します！
リンクス（ネット風評対策）
https://rinkus.jp/
リンクスのランディングページは、ファーストビューでユーザーのハートをつかむ工夫が施されています。目を引く個性的なイラストとともに、動きをつけることで視線を外さない巧妙な仕掛けが効果を上げています。
冒頭にいきなり無料相談の入力フォームを設置したり、対応可能な業務をわかりやすいイラストつきの小窓で一覧にしたりするなど、操作するのが楽しくなるデザインが採用されていることがよくわかります。ネットの風評被害で困っているユーザーが、思わず「あるある」と頷いてしまうような実例を元に強弱をつけたコピーとユニークなイラストで紹介して飽きさせない点もポイントです。
アーク（害虫駆除）
https://pest.service-ark.com/
ファーストビューから印象的に使用される複数の人物画像が、ページを一貫して案内するかのように要所ごとに配されている統一感あるデザインです。害虫駆除の依頼を検討する方の視線が行きそうな黄色と黒を基調とした配色もイメージによく合っています。
お客様の声や駆除対応できる虫の種類などは、大きめのフォントと見やすいコンテンツデザインで、熟読率が上がるように工夫が見受けられます。また、価格の安さや簡便性などを競合と比較し、ユーザーがライバル社のサイトに行くまでもなく、思わずそのままコンバージョンしてしまいそうです。
タンゴネット（賃貸管理ソフト）
https://www.dangonet.co.jp/lp/chintai_meijin/
ファーストビューから自社ソフトの導入実績などを目立つところに配置したり、スクロールしてもついていくるコンバージョンボタンで、タイミングを逃さないよう留意したりするなど、ユーザー心理をしっかりととらえたデザインです。
テレビや紙媒体で紹介された実績が何度も目に入る構成になっており、ユーザーが読み進めるごとに信頼度を高めていくようデザインされています。お悩みと導入後の改善例を見やすく示したケーススタディも効果的です。
アールスタイル（男性化粧品）
https://www.andgino.jp/products/bshampoo.html
ファーストビューのシックでダークな大人の男性をイメージしたデザインが目を引くサイト。推し商品やキャンペーン価格などの紹介が盛り込まれた動くコンテンツが次々に眼の前に現れて、離脱するのを忘れさせます。
商品紹介のコンテンツでは、商品の上にカーソルを置くだけで商品ページへの移動ボタンが浮かび上がるように現れ、思わず操作したくなります。忙しいビジネスパーソンをターゲット設定したと思われる全体のコンパクトさも好印象です。
side bizz（セールス特化型求人媒体）
https://www.sidebizz.net/entry/supplyer
商材が営業のクラウドソーシングというだけあって、ビジネスライクな”できる”感じのデザインが魅力的なランディングページ。「こんな企業にオススメ」「特徴」「使い方の流れ」「FAQ」と必要十分な要素をシンプルで見やすく展開してビジネスパーソンが良い印象を持つようデザインされています。
ファーストビューの画像とコピーは、いかにも営業戦略が成功しそうなイメージであり、設定したターゲット層に刺さるデザインを具現化している良い例と言えます。
健康家族（健康食品）
http://cp.kenkoukazoku.co.jp/ad/dnr31/pc002701/index.html
ファーストビューで商品そのものの画像を大きくレイアウトしているのは、すでに知名度の高い商材である場合に効果的。目にしたユーザーに、「期待していたものを見ることができた」という安心感をもたらします。また、売上日本一といった権威性も同時にアピールしてユーザーのハートをつかんでいます。
知名度があるためすぐに商品の定期購入コースを推すことができ、ページの前半から定期購入コースのお得さの訴求に的を絞ってコンバージョンを高めるよう工夫されていると言えます。自社商材をどう売るべきかをよく理解したうえで制作されたページデザインの代表例です。
エスオーシー（飲料水）
https://www.onsensui.com/
競争が激化している飲料水市場の中で、権威性と効能を前面に押し出したデザインで成功しているのがこちらのランディングページです。ターゲットユーザーとなっている年齢層の女性画像を有効的に使って共感を促し、心をとらえるページ展開をしています。
ファーストビューに写り込んでいるお試しコースのお得感と、揺れるコンバージョンボタンも効果的。こちらも先ほどの健康食品同様、知名度を獲得している商品ならではの攻めのデザインであると言えます。
ミライホワイト（女性化粧品）
https://www.miraiwhite.jp/
お肌のエイジングケアに悩む年代の女性にフォーカスしたこちらのサイトは、清潔感溢れるカラーや女性らしいフォントデザインでユーザー層の心をつかむことに成功しています。きれいな素肌を実現するための有用成分を紹介するコンテンツを、大きく見やすい文章で丁寧にアピール。
競合他社との比較を、配合している有用成分や価格などの項目でわかりやすく表にして紹介しており、自社商材の優位性を上手に訴求しています。たびたび現れるキャンペーン価格の紹介も絶妙な間隔です。
ISEA（美容治療）
https://www.tokyoisea.com/acne/lp/
ファーストビューでいきなり1ヶ月無料トライアルをアピールして読み進めてもらうという手法が印象的なランディングページです。また、読み進めていくと、ニキビの改善実例をビフォーアフター画像とともに紹介することで商材の効果に説得力を持たせています。
おすすめの治療法タグが動いてクリックを促す仕組みや、吹き出しタイプのコピーが横から現れる面白いデザインも、読んでいる人を飽きさせません。高額になりがちなニキビの治療サービスの価格例と自社の定額料金を比較したり、無料トライアルの流れをわかりやすく見える化したりするなど、ユーザーが安心してコンバージョンボタンを押したくなる工夫が随所に見られます。
まとめ：ターゲットに沿ったランディングページのデザインを心がけよう
今回は売れるランディングページのデザインの共通点を、成功している実例も交えてご紹介してきましたが参考になりましたか？ランディングページのデザインは、とにかく商材のターゲットユーザーに刺さる画像・コピーなどを選び、その層に対して有効的にアピールすることが大事です。
まずはターゲットの分析と設定をしっかりと行い、その層に響くデザインを決めていきましょう。専門の制作会社にデザインを発注する際には、自社商材と似た業界のWeb制作実績がある会社かどうか確認してから依頼することを忘れないでくださいね。
この記事のおさらいポイント
・ユーザーの年齢層・性別・悩みの内容に合う画像・イラスト・色・フォントを選ぼう。
・商材の特徴によってどんなコンテンツが必要か見極める。
・動くコンテンツや揺れるコンバージョンボタンなど視覚的効果のあるデザインも取り入れよう。
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！
