スマホのランディングページを作る際に注意すべき3つのポイント

公開日:2015-06-29 更新日:2024-01-31 by SEデザイン編集部

目次

検索サイトや広告などからユーザーが直接アクセスしてくるページのことを、「ランディングページ(LP)」と呼びますが、LPを通じて、ユーザーがどういった内容を知りたいかが把握できるため、LPで見せるべきコンテンツの考え方や作り方にこそ、工夫のしどころがあります。

自社ホームページの中にLPを用意する場合、ユーザーに対して最大限の効果を発揮させるために、ページデザインするうえで気を付けておくポイントはどこでしょうか。スマートフォン向けのサイトをベースに、3つのポイントをご紹介します。

ファーストビューを大事にする

ユーザーがアクセスした時、スクロールせずに1画面内に見える領域が「ファーストビュー」です。掲載している情報を印象付ける部分であり、ユーザーが「自分の求める情報があるページなのか」を一瞬で判断する部分でもあります。したがって、下記のような点に注意する必要があります。

詰め込みすぎない

見せる要素をできるだけ整理して、ユーザーが目的とするものをひと目で見つけやすい簡潔な内容にする。

「起承転結」の「結」を見せる

資料請求や問い合わせなどのアクションに誘導したい(もしくはユーザーがそれを望んでいる)のであれば、そのアクションに移るための導線(リンク)をファーストビューに含める。

参考例
ABCクッキングスタジオ
http://www.abc-cooking.co.jp/first/

ABCクッキングスタジオ画面


リンクや文字・装飾要素は最小限に止められていて、次の導線へのリンクボタンが見える。その導線の先で得られるメリットがはっきり分かるバナー画像もポイント。

V-CUBE
http://jp.vcube.com/lp_mtg/25/sp/

V-CUBE画面


シンプルなキャッチコピーと大きな画像、ボタンで構成されるファーストビュー。こちらも何がメリットであるかがすぐに理解でき、資料請求するための次の導線もしっかり見えている。

CTA(Call To Action:行動喚起)のあしらいを考慮する

要素をシンプルに並べるだけでは、狙った効果を発揮できません。その要素の表現方法、たとえば言葉やキーワードの使い方1つで、ユーザーに次の行動を促したり、興味を持ってもらうことにつながります。カギとなるのは、「気持よく行動を促すデザインかどうか」です。

ボタンの名称は動詞表現にする

行動を促すボタンやバナーには、「動詞」を使うのが一般的です。例えば、「参考事例」とだけ書くと突き放されたイメージがありますが、「参考事例を見てみる」などとすると印象が変わります。また、日本人がターゲットであるなら、できるだけ日本語を使いましょう。

「押せる」「押したくなる」感のあるボタンに

見た目ももちろん大切です。他のクリックできない場所と区別しやすいよう立体的なデザインにするのはもちろんのこと、配置する場所や数にも注意します。
たとえば申し込みボタンなど次のアクションへのリンクボタンはページの合間に差し込むことで、わざわざページ最上部や最下部まで戻ることなく、興味をもった時にすぐ押せるようになります。

参考例
万田発酵 公式オンラインショップ
https://mandahakko.com/mh/shop/

万田発酵 公式オンラインショップ画面

 

進行方向を指し示すマークをあしらう

ページ途中に矢印・三角マークの要素を配置することで、ユーザーの視線や次に見るべき方向(場所)を誘導することができます。順序よく、最も理解しやすいように内容を読み進めてもらうのに役立ちます。

参考例
万田発酵 公式オンラインショップ
https://mandahakko.com/mh/shop/

万田発酵 公式オンラインショップ画面

読みやすさ、理解しやすさを重視する

一般的なWebページのレイアウトにこだわりすぎないようにし、読み進めやすく、理解しやすいページ作りを心がけましょう。上から下へと流れで読ませるようなレイアウトや、1画面に1テーマを収めるレイアウトも分かりやすくする方法です。

流入経路と一致しているかどうか

資料請求やサービス申し込みなど、コンバージョンを獲得することを目的としたLPでは、アクセスしてきたユーザーがそもそもどこからLPにたどり着いたのか、という流入経路を考えることも重要です。たとえば、LPへの流入経路として考えられるのは、主に以下の3つです。

・オーガニック検索(自然検索)
・リスティング広告
・ディスプレイ広告

これら検索結果での表示内容や、広告の内容(デザイン)に、そのジャンプ先となるLPの内容も一致させる(同じ内容だとひと目でわかるようにする)ことが、ユーザーに「目的のページに間違いなく来た」という安心感を抱かせ、スムーズにコンテンツを閲覧してもらう要因になります。

また、広告の場合はその訴求内容や、LPにアクセスした際のユーザーの状態(購買プロセスの段階)に応じたCTAが用意されていることも、ユーザーに対する信頼性向上に効果的です。

参考例
Lancers
http://www.lancers.jp/lp/app?ad_campaign=google_PJ013_SP

Lancers 画面 Lancers 画面


Aflac
http://www.aflac.co.jp/sp/campaign/aflac/?pnum=pmk16294

Aflac 画面 Aflac 画面


H.I.S.

H.I.S. 画面 H.I.S. 画面

まとめ

以上、ファーストビューのあり方、CTAに向けた工夫の仕方、流入経路の考慮というLPにおける3つの重要なポイントについて解説しました。LPを全てホームページのトップに設定してしまうなんてもってのほか。せっかく検索結果や広告から興味を抱いてアクセスしてきたわけですから、そのユーザーがしっかり理解して満足できる工夫を、あらゆる側面から検討してLPに反映したいものです。

Webサイトを外注する前に押さえておきたい4つのポイント
新規CTA

関連記事

コンテンツマーケティングで、
ビジネスの効果を最大化しませんか?

もっと詳しく知りたい方

ご質問・ご相談したい方