デザイン会社が発信するLP制作情報メディア

デザインの考え方はランディングページの目的によって大きく変わる!

2022.5.4
デザインの考え方はランディングページの目的によって大きく変わる!

ランディングページが成功するかの分かれ道にもなる要素の1つがデザインです。

特に、ユーザーが最初に目を通すファーストビューの部分や、入力フォームに繋がるボタンのデザインが要。そこで、効果的なランディングページにするための、デザインの考え方を伝授いたします。

目次

目的を明確にする

目的を明確にする

ランディングページは特定の商品やサービスの魅力を伝え、購入・資料請求・問い合わせなどに繋げるためのWEBページです。そのため、企業や目的に合ったデザインを考えなければ、成果が出ず広告費用が無駄に終わってしまうこともあります。まずは、商品やサービスの最終目的を明確にすることが重要になります。

購入を促す場合、ベネフィットの部分を大きく取り、商品を購入することでこんな利点があるという事を知ってもらう必要があります。

問い合わせや資料請求を促す場合は、他社との違いをはっきり示すことが大切です。商品を他の商品と比較した際に、何が違いどのような利点があるかユーザーに伝わらない場合、他社に流れてしまうかもしれません。

だからこそ、目的に合わせてランディングページの構成が大きく変わるため、制作する前に目的は明確にしておくことをおすすめします。

ファーストビューでユーザーの心を掴む

ファーストビューでユーザーの心を掴む

ユーザーが最後までランディングページを閲覧するためには、ファーストビューに懸かっていると言っても過言ではありません。ユーザーの立場で考えた時、閲覧するWebサイトに残るか、違うサイトに流れるかは最初のデザインやキャッチコピーで決めていると言われています。

ファーストビューでしっかりユーザーの心を掴むことができれば、ランディングページのコンバージョン率の向上も期待できます。そのくらい重要なファーストビューのデザインの考え方にはポイントがあります。

まず、商品やサービスがどのような結果を出すのか、利用することで手に入ることは何か、を伝える必要があります。「この商品はサプリメントです。」と言われても、何の効果があるか全く分かりません。「サプリを飲めば、透明感あるお肌をゲットできる!」のように結果を最初に伝えます。さらに「誰もが触りたくなる雪肌に」のようなキャッチコピーや、肌の白い女性の写真などを掲載し、ユーザーが一目でイメージしやすいよう作ることがポイントです。「初回は500円で購入可能」などを加えると、お得感もアピールすることができます。

このように、簡素でイメージがしやすく、お得感や安心感、限定感を意識してファーストビューを作ることで、よりユーザーの心を掴むことができます。

  • 安心できる引っ越し「CHINTAI安心パック」のLP制作実績
  • どこでも前髪用ミニアイロンのLP制作実績
  • サロン品質ヘアケア「オージュア トライアルキット」のLP制作実績
  • 遮熱+放射冷却素材「Radi-Cool-ラディクール」のLP制作実績
  • Miele キッチン製品体験会予約のLP制作実績

zoom_in画像クリックで拡大

制作費用はこちら

商品購入が目的の構成

商品購入が目的の構成

ランディングページのデザインをする上で構成を考えなければいけませんが、構成は目的や企業によって様々なパターンがあります。まずは縦長1枚のランディングページで、購入を目的とするケースをご紹介します。

誘起

キャッチコピーやメインビジュアルなど先ほどのファーストビューにあたる部分です。

インパクトを残せるように、画像を多用するなど工夫してください。

ただし、画像が重すぎて、読み込み速度が遅くなると、ユーザーが離脱してしまう原因になります。画像の最適化を行うことを忘れないようにしてください。

また、雑誌掲載、ランキングNO.1などの権威付けがあると、ユーザーの期待を高めることができます。

ベネフィット

次に、商品の特徴やベネフィットを説明する部分を設けます。

商品に関しては結果にフォーカスした文章を書き、どのような商品かイメージしやすいように作ります。ベネフィットに関しては、商品を使うことで今よりも良い状態になるという魅力を伝える部分であり、競合商品と差をつける部分でもあります。ベネフィットが伝わらないと他社製品に流れてしまうかもしれないため、画像や分かりやすい文章を添えて、しっかり説明をしてください。他社と差をつけるために「なぜ安いのか」「どんな食材(成分)を使っているのか」など理由の明記を忘れないようにしてください。

ユーザーの声

実際に商品を手にするまでは、商品の情報や口コミで判断するしかありません。

そのため、客観的な意見はユーザーにとって貴重な情報源になります。

また、ユーザーの声の他に、実証データやメディア情報の紹介などもあれば掲載しましょう。

購入を促す

スクロールして最後まで見てくれたユーザーが、まだ購入を迷っている可能性があります。

そのため、購入を決めてもらうためのアピール部分を作ります。ベネフィットを再度まとめることや、数量限定や初回限定など今買うべき理由を加えること、また全額保証があるなどの安心感を付け加えて、確実にユーザーの心を掴んでください。

そして、お申し込みに進むボタンは、分かりやすいように目立つように作ること。

また、申込フォームは面倒くさがられないように、簡潔に作ることをおすすめします。

問い合わせが目的の構成

問い合わせが目的の構成

縦長1枚のランディングページで、問い合わせを目的とするケースをご紹介します。

誘起の部分を作成後、一旦アクション誘導をしてみてください。

購入と違い、ファーストビューに惹かれて、すぐに問い合わせや資料請求したいと思うユーザーがいるかもしれません。最後までスクロールしている間に離脱される可能性があるため、ファーストビューの次に「資料請求」や「問い合わせ」などのボタンを目立つように設置しておくとコンバージョン向上が期待できます。

次に、問題提起になります。婚活アプリに関するサービスであれば「出会いがありますか」と問いかけ、家庭教師の申し込みであれば「子供が勉強してくれない」など親が悩んでいそうなことを持ち出し、ユーザーの関心を惹きつけます。そして、その問題を解決する方法として、紹介するサービスが役立ちますなどを提示します。その後は、商品の購入と同じように、ベネフィットやユーザーの声、申込の促しと作り上げていきます。

お問い合わせボタンのデザイン

お問い合わせボタンの重要性

資料請求や問い合わせは、そのためのリンクから行われます。
リンクが目立っていない場合、資料請求や問い合わせの壁となってしまいます。
逆にリンクを目立たせることができれば、資料請求やお問い合わせを後押しすることができるでしょう。
このようにお問い合わせボタンは、とても重要な要素と言えます。

お問い合わせボタンのデザイン例

ボタンを目立たせたいと言っても、どのように目立たせれば良いか分からない方も多いでしょう。
ここではお問い合わせボタンのデザイン例を紹介します。

1.アウトライン

枠線の色をグラデーションにしたり、光らせたりするボタンのデザインです。
CSSでコードを記述することで、デザインすることができます。

2.ニューモーフィズム

ニューモーフィズムとは、要素が浮かんでいるように、または沈んでいるように見えるデザインです。
CSSでbox-shadowプロパティを複数重ねることで簡単に再現できます。

3.テキスト

横並びのメニューによく使用されるデザインです。
ホバーするとボタンが反応します。

ホバーを外すときのアニメーションをホバーよりも早く終わらせ、かつそのアニメーションを違和感がないようにするのがポイントです。
また、このデザインはコピペするときにボタンの横幅によってアニメーションを少し変える必要がある点にも注意が必要となります。

4.円形ボタン

要素がアイコンのみのシンプルなボタンです。
アイコンを円で囲み、その縁にボタンの判定があるようにデザインします。
デザインがシンプルなのでコードがシンプルになり、使いやすいデザインと言えるでしょう。

実装するときのポイント

ボタンを実装するときに、デザインに関わらず意識したいポイントを3つ紹介します。

1.ブラウザが持つスタイルをリセットする

せっかく作ったデザインも、ブラウザによって表現が変わってしまっては意味がありません。
この差異を解消するために使われるのがリセットCSSと呼ばれるCSSファイルです。
コーディングをスムーズに進めるために重要なポイントです。

リセットCSSの使用法は簡単で、コードをコピーしてカスタムCSS欄にペーストするだけです。
簡単だからこそ、ぜひ導入してください。

2.ユーザビリティを考慮する

タッチデバイスでbottonタグをタップした場合、ボタンではなくテキストが選択されてしまうことがあります。
ユーザビリティを考えたときに、この挙動は避けなくてはなりません。
テキストが選択されないようにするためには、user-select: noneというプロパティが適しています。

また、touch-calloutというプロパティもあります。
これは、iOS Safariで長押しした時に表示される遷移先の画面をプレビューしたり、別タブで開いたりすることができるプロパティです。

3.ホバーが有効なデバイスにおいてのみホバーの演出を行う

ホバーはパソコンのみで有効で、タッチデバイスでは発火してしまいます。
これは問題であり、対策が必要となります。

@media (any-hover: hover){}`プロパティは、ホバーが有効なデバイスかどうか判定してくれます。
ホバー演出を行うときは取り入れてみてください。

4.ボタンはCSSでデザインする

画像を用いてボタンに利用することも可能です。
しかし、画像ではデータが重かったり解像度を心配する必要があったりと大変です。
CSSを活用すればこれら問題の心配をする必要がなく、拡張性があるためおすすめです。

目的に応じたランディングページを制作しましょう

ランディングのデザインは自由ですが、目的に合っていなければ効果が出ないこともあります。まずは、何のために、商品やサービスの魅力を伝えるのかを明確にさせてください。

そして、目的に合わせて、構成やデザインを考えていくようにしてください。
また、今回の記事では、お問い合わせボタンのデザインについても紹介しました。
お問い合わせボタンは資料請求やお問い合わせを良くも悪くもするため、デザインが大切になってきます。
あなたの感性や目的に合ったデザインをして、より良いサイトを作っていきましょう。

この記事を書いたライター
株式会社Ryuki Design
LP制作に特化したデザイン会社です(LP制作実績)。累計取引社数4,000社以上、累計5,000本以上(2025年は年間600本以上)のLPデザインを手掛けています。
完全内製体制を採用しており、構成作成からデザイン、コーディングまで一貫して対応可能です。各種サーバーへの設置をはじめ、自社ECサイト、楽天市場、Yahoo!ショッピングなどのECモールへの反映にも対応しています。
この記事の画像を作成したデザイナー
たつみんさん
所属:株式会社Ryuki Design / 部署:デザイン部
※デザイナー一覧

紙媒体のデザインからwebデザイン(LP制作・バナー制作)までオールマイティーにデザインが可能。
デザインだけではなく構成も得意なハイスペックデザイナー。毎回クオリティの高いデザインをクライアントに提供しています。

LP制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

     
    LPアーカイブ
    mitekaku