スマホのランディングページ参考サイトを集めました！
スマホのランディングページは、PCと作り方も注意点も違います。スマホには、スマホの特徴があり、それに合わせたランディングページ作りが大切です。
調べてみるといろんな説明がされていますが、まずは、実際のスマホのランディングページを見てみるといいでしょう。そこからヒントやコツが盗めるかもしれません。
今回はスマホのランディングページ作成のポイントと、スマートフォンLPデザインの参考サイトを集めてみました。
ご紹介する内容を見ていきながら、オンリーワンのスマホのランディングページを目指しましょう。
スマホのランディングページ作成のポイントは？
スマホは今や生活に欠かせない必須ツールとして、全世界で普及しています。
スマホの普及にあわせて、ECサイトのランディングページを作成する際も、スマホに対応したページ作りが重要となってきました。
スマホのランディングページ作成には、パソコンとは違ったアプローチが必要となります。
まずは作成時のポイントを押さえていきましょう。
1．文字や画像のサイズを意識する
「文字や画像のサイズを意識する」ことも、スマホのランディングページを作成する際のポイントとなります。
画面が小さいスマホでは、小さい文字や画像はユーザーにとって見づらいだけでなく、インパクトにも欠けてしまいます。
文字や画像はできるだけ大きくすることを意識し、パッと見て商品の特徴やアピールポイントが分かるような工夫を施しましょう。
スマホのフォントサイズは16pxが基準です。16px未満の文字はほとんど読まれないものと考えてください。
2．上から順には読まれない
スマホに特徴的なユーザーの動きとして、ザッピングが挙げられます。
コンテンツを上から順に読むのではなく、気軽にスクロールを行い、気になった部分だけをじっくりと読むという閲覧のしかたです。
スクロールされることが前提なので、ユーザーに注目してもらいたいコンテンツには、スクロール中でも目に留まるように画像を使いましょう。
強調表現の他に、前後の余白の使い方も重要です。
3．クリックボタンを分かりやすくする
ランディングページの目的はどこにあるのでしょうか？
言うまでもなくコンバージョンに繋がることが最大の目的となります。
そのため、購入ボタンや入力フォームへの「クリックボタンを分かりやすくする」ことは重要なポイントとなります。
とくにスマホはパソコンと違いサイト全体を俯瞰して見ることができないため、ボタン探しに戸惑う傾向にあります。ユーザーが「購入したい！」と感じた瞬間を逃さないよう、見やすいクリックボタンを作成しましょう。
4．ページの表示速度を速くする
スマホのランディングページでは「ページの表示速度を速くする」ことも意識しましょう。
パソコンに比べスマホでは、ユーザーがページの表示速度にシビアに反応することが分かっています。
検索や広告などからテンポよくランディングページへ飛べるよう、表示速度を速くするよう取り組んでおきましょう。
ただし、美容・健康ジャンルのランディングページは長く作るものなので、「ページのすべてが表示されるまでの時間」には限界があります。全体の表示時間に加えて「ファーストビューが表示されるまでの時間」を最適化しましょう。
スマートフォンLPサイトをご紹介
ここまでスマホのランディングページ作りのポイントをご紹介しましたが「具体的なデザインが見たい！」という方もいらっしゃいますよね？
そこでここからはスマホのランディングページデザインの参考になるサイトをご紹介します。
したがって、アクションボタンや文字、写真も見やすいサイズ、つまり大き目のサイズがいいです。ですので、文字数も制限されてきます。少ない文字数で、何を伝えるのか。そこも、スマホのランディングページの難しさの一つです。そこで、実際にいい例を見てみると分かりやすいと思います。参考になりそうなデザインを、見つけていきましょう。
『スマートフォンサイトを集めました。』
様々なジャンルのスマートフォンサイトを見ることができます。スポーツや美容など、ジャンル毎に分けられているので、参考にしやすいランディングページがすぐに見つかると思います。実際にあるランディングページなので、サイトに行って、ランディングページの使いやすさを試してみるのもいいでしょう。
見やすさだけでなく、使いやすさも重要な要素です。そういった部分も考慮して、ランディングページを見てみましょう。
『iPhoneデザインボックス』
スマホのランディングページデザインはもちろん、アプリやインスタグラムのページデザインまで見ることができます。
カテゴリの分類がとても細かくされており、取り扱い商品やサイトの色、サイトの業種など幅広いジャンルから検索をかけることができます。
『LPアーカイブ』
登録ページ数のボリュームが多いサイトです。
表示されるページ画像も大きめに設定することで、参考にしたいデザインを探しやすい工夫がなされています。
商材やイメージ、カラーなどからカテゴリ検索を行うことができるだけでなく、スマホとPCの両方のランディングページを切り替えることができる点も特徴の1つです。
『Landing Page Data Base』
色別にランディングページを分類しているので、また違った視点でランディングページを比較できそうです。もちろん、ジャンルごとにも分類しています。
ランディングページは、キャンペーン期間などが終わると、消されるものも多いのですが、このサイトでは、消されてしまったページも見ることができます。ぜひ、参考にしてみてください。
『Landingpage Bookmark』
http://www.landingpage-link.jp/
健康商品や美容関係の商品に特化して、ランディングページを載せています。美容、健康関係の商品を取り扱おうと思っている方は、一見の価値ありです。情報をどのように配置し、どのような情報を掲載しているかも重要な要素です。その部分に注目して、見比べてみるのも面白いと思います。
商材別のランディングページ作成のポイント
最後に商材別のランディングページ作成のポイントを見ていきましょう。
ECサイトではどんな商材を扱うかによって、ランディングページを作成するポイントも違ってきます。
代表的な商材のポイントを確認してみましょう。
健康食品LPのポイント
健康食品を通販で購入する場合、ユーザーは販売されている商品やサイトが本当に信頼できるのか、シビアな目線で判断します。
そのため、ランディングページを作成する際も「安心・安全」を伝えられるようなページデザインを意識しましょう。
具体的には、過度に価格優位性を重視するのではなく、商品の品質や製造方法を丁寧に伝える方法や、有識者や製造者のコメントや顔写真を掲載することで信頼感を高めるといった方法が考えられます。
詳しいポイントはこちら
化粧品LPのポイント
化粧品のランディングページは、使いやすさだけでなくデザイン性にもこだわるようにしましょう。
化粧品を求めるユーザーは「美しさや可愛さ」に敏感です。サイトのデザインにも、商品の特徴やイメージにあった「おしゃれさ」を意識してみましょう。
詳しいポイントはこちら
見やすさ、使いやすさを意識したスマホLPを
ランディングページは何と言っても、見やすさと使いやすさが大事です。多くのランディングページを見て、発想を広げていきましょう。多くの引き出しを持っていると、その分、アイディアが生まれやすくなります。
見ただけでは、ピンとこない人もいるかもしれません。技術的なサポートが必要な方は、ネットショップの立ち上げからしっかりサポートしてくれるプレックスのリピストというサービスを覗いてみてはいかがでしょうか。リピストのランディングページも参考になります。
