デザインの考え方はランディングページの目的によって大きく変わる！
特に、ユーザーが最初に目を通すファーストビューの部分や、入力フォームに繋がるボタンのデザインが要。そこで、効果的なランディングページにするための、デザインの考え方を伝授いたします。
目次
目的を明確にする
購入を促す場合、ベネフィットの部分を大きく取り、商品を購入することでこんな利点があるという事を知ってもらう必要があります。
問い合わせや資料請求を促す場合は、他社との違いをはっきり示すことが大切です。商品を他の商品と比較した際に、何が違いどのような利点があるかユーザーに伝わらない場合、他社に流れてしまうかもしれません。
だからこそ、目的に合わせてランディングページの構成が大きく変わるため、制作する前に目的は明確にしておくことをおすすめします。
ファーストビューでユーザーの心を掴む
ファーストビューでしっかりユーザーの心を掴むことができれば、ランディングページのコンバージョン率の向上も期待できます。そのくらい重要なファーストビューのデザインの考え方にはポイントがあります。
まず、商品やサービスがどのような結果を出すのか、利用することで手に入ることは何か、を伝える必要があります。「この商品はサプリメントです。」と言われても、何の効果があるか全く分かりません。「サプリを飲めば、透明感あるお肌をゲットできる！」のように結果を最初に伝えます。さらに「誰もが触りたくなる雪肌に」のようなキャッチコピーや、肌の白い女性の写真などを掲載し、ユーザーが一目でイメージしやすいよう作ることがポイントです。「初回は500円で購入可能」などを加えると、お得感もアピールすることができます。
このように、簡素でイメージがしやすく、お得感や安心感、限定感を意識してファーストビューを作ることで、よりユーザーの心を掴むことができます。
商品購入が目的の構成
誘起
インパクトを残せるように、画像を多用するなど工夫してください。
ただし、画像が重すぎて、読み込み速度が遅くなると、ユーザーが離脱してしまう原因になります。画像の最適化を行うことを忘れないようにしてください。
また、雑誌掲載、ランキングNO.1などの権威付けがあると、ユーザーの期待を高めることができます。
ベネフィット
商品に関しては結果にフォーカスした文章を書き、どのような商品かイメージしやすいように作ります。ベネフィットに関しては、商品を使うことで今よりも良い状態になるという魅力を伝える部分であり、競合商品と差をつける部分でもあります。ベネフィットが伝わらないと他社製品に流れてしまうかもしれないため、画像や分かりやすい文章を添えて、しっかり説明をしてください。他社と差をつけるために「なぜ安いのか」「どんな食材（成分）を使っているのか」など理由の明記を忘れないようにしてください。
ユーザーの声
そのため、客観的な意見はユーザーにとって貴重な情報源になります。
また、ユーザーの声の他に、実証データやメディア情報の紹介などもあれば掲載しましょう。
購入を促す
そのため、購入を決めてもらうためのアピール部分を作ります。ベネフィットを再度まとめることや、数量限定や初回限定など今買うべき理由を加えること、また全額保証があるなどの安心感を付け加えて、確実にユーザーの心を掴んでください。
そして、お申し込みに進むボタンは、分かりやすいように目立つように作ること。
また、申込フォームは面倒くさがられないように、簡潔に作ることをおすすめします。
問い合わせが目的の構成
誘起の部分を作成後、一旦アクション誘導をしてみてください。
購入と違い、ファーストビューに惹かれて、すぐに問い合わせや資料請求したいと思うユーザーがいるかもしれません。最後までスクロールしている間に離脱される可能性があるため、ファーストビューの次に「資料請求」や「問い合わせ」などのボタンを目立つように設置しておくとコンバージョン向上が期待できます。
次に、問題提起になります。婚活アプリに関するサービスであれば「出会いがありますか」と問いかけ、家庭教師の申し込みであれば「子供が勉強してくれない」など親が悩んでいそうなことを持ち出し、ユーザーの関心を惹きつけます。そして、その問題を解決する方法として、紹介するサービスが役立ちますなどを提示します。その後は、商品の購入と同じように、ベネフィットやユーザーの声、申込の促しと作り上げていきます。
お問い合わせボタンのデザイン
お問い合わせボタンの重要性
資料請求や問い合わせは、そのためのリンクから行われます。
リンクが目立っていない場合、資料請求や問い合わせの壁となってしまいます。
逆にリンクを目立たせることができれば、資料請求やお問い合わせを後押しすることができるでしょう。
このようにお問い合わせボタンは、とても重要な要素と言えます。
お問い合わせボタンのデザイン例
ボタンを目立たせたいと言っても、どのように目立たせれば良いか分からない方も多いでしょう。
ここではお問い合わせボタンのデザイン例を紹介します。
1.アウトライン
枠線の色をグラデーションにしたり、光らせたりするボタンのデザインです。
CSSでコードを記述することで、デザインすることができます。
2.ニューモーフィズム
ニューモーフィズムとは、要素が浮かんでいるように、または沈んでいるように見えるデザインです。
CSSでbox-shadowプロパティを複数重ねることで簡単に再現できます。
3.テキスト
横並びのメニューによく使用されるデザインです。
ホバーするとボタンが反応します。
ホバーを外すときのアニメーションをホバーよりも早く終わらせ、かつそのアニメーションを違和感がないようにするのがポイントです。
また、このデザインはコピペするときにボタンの横幅によってアニメーションを少し変える必要がある点にも注意が必要となります。
4.円形ボタン
要素がアイコンのみのシンプルなボタンです。
アイコンを円で囲み、その縁にボタンの判定があるようにデザインします。
デザインがシンプルなのでコードがシンプルになり、使いやすいデザインと言えるでしょう。
実装するときのポイント
1.ブラウザが持つスタイルをリセットする
せっかく作ったデザインも、ブラウザによって表現が変わってしまっては意味がありません。
この差異を解消するために使われるのがリセットCSSと呼ばれるCSSファイルです。
コーディングをスムーズに進めるために重要なポイントです。
リセットCSSの使用法は簡単で、コードをコピーしてカスタムCSS欄にペーストするだけです。
簡単だからこそ、ぜひ導入してください。
2.ユーザビリティを考慮する
タッチデバイスでbottonタグをタップした場合、ボタンではなくテキストが選択されてしまうことがあります。
ユーザビリティを考えたときに、この挙動は避けなくてはなりません。
テキストが選択されないようにするためには、user-select: noneというプロパティが適しています。
また、touch-calloutというプロパティもあります。
これは、iOS Safariで長押しした時に表示される遷移先の画面をプレビューしたり、別タブで開いたりすることができるプロパティです。
3.ホバーが有効なデバイスにおいてのみホバーの演出を行う
ホバーはパソコンのみで有効で、タッチデバイスでは発火してしまいます。
これは問題であり、対策が必要となります。
@media (any-hover: hover){}`プロパティは、ホバーが有効なデバイスかどうか判定してくれます。
ホバー演出を行うときは取り入れてみてください。
4.ボタンはCSSでデザインする
画像を用いてボタンに利用することも可能です。
しかし、画像ではデータが重かったり解像度を心配する必要があったりと大変です。
CSSを活用すればこれら問題の心配をする必要がなく、拡張性があるためおすすめです。
目的に応じたランディングページを制作しましょう
そして、目的に合わせて、構成やデザインを考えていくようにしてください。
また、今回の記事では、お問い合わせボタンのデザインについても紹介しました。
お問い合わせボタンは資料請求やお問い合わせを良くも悪くもするため、デザインが大切になってきます。
あなたの感性や目的に合ったデザインをして、より良いサイトを作っていきましょう。
へのお問い合わせはこちらから
