こんにちは。あいりです。
LP（ランディングページ）でスマホ版を作成する必要になったことはありませんか。
スマホ版LPはWEB版のLPとは違い、画面が小さくなります。
WEB版LPをそのまま表示させると、LPのレイアウトが崩れてしまい、コンテンツが見づらくなります。
WEB版のLPを画面サイズに合わせてレスポンシブ対応するだけでは、コンテンツが見づらいLPになってしまうので、スマホ用のサイズ、レイアウトに合わせてデザインにしていかなければなりません。
スマホ版LPのデザインはこういうものなんだと参考デザインサイトを見て感覚で掴んできてから、スマホ版LPを作成する上での観点、作成方法をご紹介します。
目次
スマホ版LPの必要性
多くの方がPCで見るよりもスマホでインターネットを利用しています。
LPを作成する場合はWEB版だけではなく、スマホ版のサイトを作成する必要があります。
スマホ版LPの参考デザイン集
スマホ版LPが沢山掲載されているサイトがございますので、ご紹介します。
いいなと思ったスマホ版LPがありましたら、サイトで「お気に入り登録」をする、もしくはLP画像を保存してみるといいでしょう。
また、スマホ版LPの参考デザインで見てほしいことは以下になります。
以下を確認することでスマホ版LPのデザインのレイアウト、サイズ感、テイストがつかめてくるのではないでしょうか。
1.コンテンツ1つ1つのサイズ
2.LP全体のテイスト
3.見出しの文字の大きさ、見やすさを意識されているデザインか
4.説明文の文字の大きさ
5.ファーストビューのサイズ
※業界ごとにファーストビューのコンテンツサイズが異なる。化粧品、美容系はファーストビューのサイズを大きくとっていることが多いです。
6.ファーストビューにある文字の大きさ、位置
7.ファーストビューにある写真や素材の大きさ、位置
8.ファーストビューの文字、写真、素材のレイアウトのバランス
特にファーストビューはLPの中でも重要なコンテンツです。
LPを見に行くユーザがファーストビューで目に留まったら、次のコンテンツに進んで読んでくれます。
もし、ファーストビューが悪ければ、LPを見ることをやめてしまいます。
参考デザインのファーストビューを見るべきです。
LANDINGPAGE_DESIGN BOOKMARK_SMARTPHONE
オススメ度★
掲載数が少ない。
クオリティが低いデザインもあるので、参考を探すときは見極めが必要。
掲載されているおすすめLPをご紹介します。
LP名：「ノブ ACアクティブ」
TOP部分：参考にできる
インパクトがあり、タイトル文字が見やすい。
サブタイトルの文字がもう少し見やすくなるとよい。
商品の金額案内：参考にできる
ボタンがボタンらしくてよい。
レイアウトが整っている。
全体：参考にできる
テイストが統一感ある。
見出しだと分かるような文字の大きさ、デザインがされている。
LP ARCHIVE
オススメ度★★
掲載数は7000以上ととても多いです。
PCデザイン、スマホデザインどちらもございます。
掲載されているLPのデザインのクオリティが高いです。
気に入ったデザインをお気に入り登録できます。
どんどんお気に入り登録をして、制作にいかして頂ければと思います。
LPのキャッチコピーで探したいときは、「キャッチコピー一覧」でキャッチコピーのみが並んで表示されるので、気に入ったキャッチコピーを探すことができます。
LPのデザインで探したいときは、「デザイン一覧」でデザインがサムネイルで表示されるので、気になったデザインを探すことができます。
カテゴリ別（サービス、美容、食品等）またはテイスト（シンプル、おしゃれ、ゴージャス等）でLPを探すことができます。
スマホ版LPのおさえるべきポイント
スマホ版LPのおさえるべきポイントをご紹介します。
１．適切な文字サイズや行間、改行を行うこと
フォントサイズは1８px以上です。
文字の行間を少し開けましょう。
（例：文字の大きさが18pxの場合、24ぐらいです。）
２．文字数は短くすること
スマホは画面が小さいので、できるだけ文字数を減らしましょう。
1行につき20文字〜30文字以内に収めるようにしましょう。
特に見出しは20文字以内に収めるようにしましょう。
3．スマホ用のサイズで作成すること
スマホ版LPの横幅で480px〜960px、縦幅で320px〜640pxです。
ファーストビューは大体460pxほどです。
4．コンテンツの切れ目を認識できるようにすること
ユーザがLPを読んでいてどこまで読んだのか分からなくなるので、ここまで読んだと分かるように、コンテンツの切れ目に、白抜き文字がハッキリとわかる色を使用するか、コンテンツの枠に影をつけるなど工夫してメリハリをつけましょう。
5．表示速度（画像容量、ソースコード）を意識すること
Google PageSpeed Insightsで表示速度を確かめてみましょう。
Google PageSpeed Insightsで対象のURLを入力して確かめると、点数で表示され、修正が必要な箇所を指摘してくれます。
修正方法を提案してくれますので、参考にしてみてください。
私の記事に画像を圧縮する方法を記載している記事がございますので、こちらを参考に少しでも表示速度が改善されて頂ければと思います。
最後に
スマホ版LPの特徴が分かりましたでしょうか。
作成にすぐに入る前にスマホ版用にレイアウトを設計してから取り掛かるようにしましょう。
