ランディングページに欠かせないものの1つにUIデザインがあります。UIデザインとは『User Interfase』の略で、Web業界ではWebサイトとそのユーザーとをつなぐもの、つまりWebサイトの見た目や機能など目に見える部分の大半を指します。
UIデザインを一歩間違えてしまうと、ユーザーにとって使い勝手が悪かったり見にくかったりと、さまざまなデメリットが生じかねません。今回はUIデザインのポイントやUIデザインの参考になるランディングページを紹介していきますので、ぜひランディングページ制作上の参考にしてくださいね。
この記事を読んだらわかること
・ランディングページUIデザインで最も重要なこと
・参考になるランディングページのUIデザイン9選
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！
ランディングページのUIデザインのポイント
一口にUIデザインと言っても、ランディングページにはさまざまなパーツがあり、デザインする上で注意すべき点はそれぞれ異なります。ここではランディングページのUIデザインで気をつけるべきポイントを、サイトのパーツごとに分けてご紹介していきます。
コンバージョンエリア
コンバージョンエリアとは、購入・申し込み・問い合わせなどユーザーがコンバージョンするために必要な導線のことを言います。コンバージョンエリアはアクションボタンはもちろん、その周辺のコピー・テキスト・装飾なども全て含みます。ここではコンバージョンエリアのUIデザインでポイントとなる2点について解説します。
配色
ランディングページのメインカラーはターゲットユーザー層や商材のイメージに合わせて選ばれますが、これに対してボタンなどコンバージョンエリアのパーツは目立つ色を選ぶ必要があります。同系色でなじませてしまうと目立たなくなり、コンバージョン率に影響が出る場合があるためです。また、ボタンのみならず、その周辺のコピーなどもメインカラーに応じて、ユーザーの目に留まりやすいかどうかを基準に選択するようにしましょう。
クリッカブル
ボタンにしろ画像にしろ、クリックできるパーツはクリックできることをデザインで明確にする必要があります。たとえばカーソルを合わせた時に光る・動くなどしてクリッカブルであることを示せば、ユーザーは迷いません。また、浮き上がって見えるよう立体的にしていかにも『ボタンです』というデザインにすることも非常に有効です。
ヘッダーボタン
ランディングページの最上部、つまりファーストビューの上部に固定して設置するメニューボタンやコンバージョンボタンのことをヘッダーボタンといいます。ヘッダーボタンの見せ方によって、ランディングページ内の各ボタンの配置など見せ方も変わってくるので、ヘッダーボタンを設置する場合には、それがボタンデザインの基準となります。
固定型サイドメニュー
サイドメニューボタンを固定設置するデザインも人気上昇中です。固定型サイドメニューには、コンバージョンボタンはもちろん、各コンテンツへ誘導するための目次のようなボタンデザイン、さらに画面トップに戻る用ボタンを含めることが重要です。異なる用途のボタンを並べるため、色・デザインでそれぞれの役割が異なることを一目瞭然にすることも必要となります。
下部に配置するバナー型ナビメニュー
スマートフォン向けのランディングページデザインに関するポイントですが、画面の下部に各コンテンツへのナビメニューとなるバナー型のボタンをデザインすると、ユーザーの利便性が高まります。スマホはユーザーが片手で画面を操作することが多いため、親指でボタンを押しやすくなる下部に固定ボタンを設置すると有効的です。
アンカーリンクボタン
ランディングページでは、アンカーリンクボタンは主にページ内におけるジャンプに使用します。これは、ユーザーが気になるコンテンツを効率良く閲覧するのに大変便利ですが、最も目立たせたいコンバージョンボタンと差別化するために、デザイン・配色には工夫が必要です。また、矢印アイコンを載せてクリックを誘導したり、コンバージョンボタンよりも小さめのサイズを採用したりするといった配慮も不可欠となります。
アコーディオンメニュー
アコーディオンメニューとは、内容が長くなるコンテンツをすっきりとコンパクトにまとめる機能であり、クリックすることで折り畳まれていた部分が開き詳細が現れる構造のデザインです。短いランディングページなら不要ですが、長くなり過ぎるランディングページには重宝する機能と言えます。アコーディオンを使う場合には、仮にこうした機能を知らないユーザーが見ても、直感的に操作できるデザインを採用する必要があります。
スライダーのボタン
スライダー機能とは、Webページのファーストビュー画面でスライドショーのように展開させるデザインのことです。スライダーデザインにはメリット・デメリットどちらもありますが、長くなり過ぎるランディングページでは、これを取り入れることにより内容をコンパクトにまとめることができます。見たいコンテンツに移動させる場合は矢印ボタンや現在地を示す丸いナビゲーションボタン両者の配置が必要です。ちなみに、スライダーデザインはGoogleの検索機能でも使用されています。
ランディングページでは、お客様の声や制作実績などのコンテンツで使用される機能です。
タブ切り替え
タブ切り替えとは、Webページを遷移しなくてもタブをクリックするだけで指示範囲内の表示内容を変更することができる機能です。スライダー同様、サイトをコンパクトにまとめられる便利な機能ではありますが、スライダーほど目立たず気づかれにくいのは難点。現在地が表示されるわかりやすいUIデザインとなるよう意識することが重要です。
細部まで丁寧に制作していくことがUIデザインでは最も重要です。
ZERO式ランディングページ制作はこちら
ランディングページのUIデザインは読み続けてもらうことが重要
ここまでは”操作性”の観点からランディングページのUIデザインについてポイントを解説してきましたが、そもそもランディングページで最重要なのは、ユーザーに読み進めてもらうことです。つまり、UIデザインにおいてもその点が一番に配慮される必要があります。
ランディングページとは、言ってみれば隅から隅までがUIデザインと言っても過言ではありません。操作性や利便性における工夫も、読み進めてもらうためにはどうするのかという視点を持つことが大切です。キャッチコピー・見出しなどのデザインから背景色・構成の順番に至るまで、全てはなるべく先まで読み進めてもらえるようなデザイン上の工夫が不可欠となります。
参考になるランディングページのUIデザイン9選
ここでは、ユーザーから好まれるUIデザインとして参考になるランディングページを9つご紹介します。先ほどご紹介した便利なUIデザインや機能に注目してご説明していきますので、ランディングページ制作の際にぜひお役立てください。
レコレル
ヘッダーのシンプルで大きな固定ボタンが安心感を与えるランディングページです。スクロールして読み進めるごとに美しく色づくコンテンツの見出しが、次に読み進める意欲をもたらします。クリッカブルもカーソルを合わせると変色するためわかりやすいほか、随所がユーザー目線で設計されたすぐれたUIデザインが印象的です。
FROGGY（フロッギー）
かわいいイラストを交えたわかりやすい商材解説を、実際のスマホをイメージさせる楽しい画像配置とともに展開させている魅力溢れるランディングページです。つい次のコンテンツを読みたくなる巧みな構造となっているほか、コンバージョンエリアのコピーやアンカー、配色にも工夫が凝らされています。
株式会社ピーディーアール（P.D.R.）
固定ヘッダー、スライダー、固定サイドメニューなど、効果的なUIデザインが駆使されたランディングページです。固定ヘッダーではカーソルを合わせると文字がくるりと回転してつい押したくなり、ファーストビューからスクロールした途端に現れる固定サイドメニューなど、次々に仕掛けが出てきて遊び心に溢れ、ユーザーがどんどん読み進められるUIとなっています。
Ginco – 安心・安全の仮想通貨ウォレット
スライダーを使うことによって、実際のスマホにサービス内容がどのように見えるかがリアルにイメージできるUIデザインが特徴的なランディングページ。後半部分のパートナー紹介でも効果的にスライダーが使われており、ファーストビューに多様されがちなスライダーをうまく応用して内容をコンパクトにまとめています。
MIRAI DRIVE PROJECT
固定ヘッダーと併せて、コンテンツナビを手動のスライダーで目次のように見せている画期的なランディングページです。読み進めるとアニメーションが仕掛けてあったり、実際のサービスの見え方をスマホ画像のフレーム内で見られるようになっていたりと、まるで飛び出す絵本のような楽しさを持ち、ユーザーを飽きさせません。
ASUMO（アスモ）
シンプルなバナーや誘導するためのアンカーをファーストビューに配したランディングページです。ターゲットユーザーをよく分析し、商材の紹介部分はきわめてシンプルに文章で構成されているのが印象的。コンバージョンボタンをあちこちに置かず、ファーストビューのバナーを際立たせています。
Jobbuild ＜ジョビルド＞
ファーストビュー下部の固定メニューボタンとヘッダーのコンバージョンボタンで無駄を排除し、ユーザーの閲覧しやすさが追求されたランディングページです。メニューボタンを大きめにし、カテゴリーをアイコン化しているのも効果的。最下部の問い合わせフォームもシンプルでサイズも大きく、ユーザー目線にこだわったUIデザインが効いています。
HAVE
読み進めるごとにクリッカブルがわかるよう、色に動きをつけたランディングページです。また、商材である土地活用例をスライダーでたっぷり見せたり、バナーにわかりやすい画像を使用していたりと、実績豊富であることをUIデザインでさりげなくアピールすることにも成功した例と言えます。
YAMETOKI
緊急性の高さをメインカラーやシャープなフォントで示し、ランディングページの長さもコンパクトにまとめた、商材に最適なUIデザインが印象に残るサイトです。ファーストビューのメニューボタンはシンプルながらよく目立ち、アコーディオンでスマートに格納できる仕組みとなっています。操作しやすいうえ読み進めやすく、きわめて戦略的にデザインされていることがわかります。
まとめ：ユーザーにとって使いやすいUIデザイン
ランディングページは、それ自体にUIデザインが凝縮されたWebサイトであることをお伝えしてきましたが、参考にしていただけましたか？ユーザーの目を引き、操作しやすく読み進めやすいデザインがコンバージョンの成否を分けるため、どのパーツのデザインにも気を抜けません。
ランディングページのUIデザインは、とにかく読み進めてもらうことが重要です。全てのパーツでユーザー目線での検証を行い、ユーザーがいかに使いやすく読み進めるのが楽しくなるかをよく吟味してデザインに反映させましょう！
この記事のおさらいポイント
・UIデザインはどのパーツもユーザー目線に立って操作性や利便性を高めなければならない
・ランディングページでは、読み進めてもらうためのUIデザインを意識することが最重要
・長くなり過ぎなランディングページではアコーディオンやスライダー機能などを上手に使う
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！
