スマホ最適化が成果のカギ！モバイルファーストなLPを制作するための5つのポイント

2007年の初代iPhone発売から爆発的に普及したスマートフォン。総務省の調査によると、2010年には端末別のインターネット利用者数がパソコンを上回り、2022年には7割以上の人がスマホでインターネットを利用しているというデータもあります。

このような背景もあり、最近ではスマホ表示に最適化した、いわゆる「モバイルファースト」なランディングページ（LP）を見かける割合も増えてきました。

しかしながら、ときどきスマホで見るとレイアウトが崩れていたり、テキストや画像が小さくて見づらいLPに遭遇することはありませんか？

たとえ商材が魅力的でも、これでは途中離脱やコンバージョン率悪化などの機会損失になりかねません。もちろんパソコン経由の流入が多い商材もありますが、どんな商材でもスマホで情報収集しているユーザーが閲覧する可能性がある以上、スマホでの見た目を無視することはできないでしょう。

そこで本記事では、LP制作に携わる方や改善提案をする立場の方に向けて、モバイルファーストなLPを制作する上での知識と、押さえておきたい5つのポイントを解説していきます。

パソコンとモバイルの表示の違いとは？

パソコンとモバイルの大きな違いは、Webページを見たときの画面の縦横比です。

パソコンは横長の長方形で、ユーザーの視線は「左から右」の流れで読み進めていきます。対するモバイルは縦長の長方形で、横への視線移動がパソコンに比べて少なく、基本的には上から下へスクロールして読み進めます。

そのためモバイルでは横よりも縦の流れを意識することが大切です。たとえばパソコン上で横に3つ並べていたコンテンツを、スマホの画面でもそのまま横並びで表示させると非常に小さくなってしまいます。

このコンテンツの分割数をWeb用語で「カラム数」と言いますが、モバイルにおいてはコンテンツを1つずつ縦に並べたシングルカラム（1カラム）で構成していくのがおすすめです。

わかりやすい例として、漫画で考えてみましょう。一般的な紙面の漫画は右上→左上→右下→左下とジグザグに読み進めていくコマ割りが多いですが、これをスマホで見ると1コマが縮小されて読みにくくなってしまいます。

そこで登場したのが、スマホでスクロールして読むことを前提にした「縦読み漫画」です。1コマずつ縦に並んでいる構成なので、スマホの画面いっぱいにコマが表示され、文字も絵も見やすくなります。

縦読み漫画と同じように、モバイルファーストなLPを作る際も縦の流れを意識したシングルカラムにすることで、見やすさがアップするでしょう。

モバイル用LPの制作パターン

「モバイルファーストなLPを作りたい！」と思い立ったときに、まず押さえておきたいのがモバイル用のLPの制作パターンです。代表例として、以下の3つの方法を紹介します。

①レスポンシブデザインでデバイス別に表示を変える

パソコンとモバイルそれぞれに適したデザインを表示させる方法です。いわゆる「レスポンシブデザイン」と呼ばれているもので、デバイス別に表示を切り替えられるようにコーディングで調整していく必要があります。

②モバイルとパソコンで共通のデザインを使用する

広告用のLPでよく見かける方法です。パソコンとモバイルで共通のデザインを使用するため、制作の工数をおさえることができます。

モバイルを基準として作る場合、パソコンで見たときに左右の余白が広かったり文字が大きすぎたり、多少サイズ感が気になる場合があります。

③モバイルとパソコンで共通+パソコンの余白部分にデザインを追加する

近年急速に普及してきた方法です。メインコンテンツのデザインが変わらないため、レスポンシブであってもデザインやコーディングの工数をおさえることができます。パソコンの余白部分のデザインは固定し、メインコンテンツだけスクロールする仕様で作られていることが多いです。

3つの制作パターンを工数がかかる順番で並び変えると、①＞③＞②です。予算やLPの種類や目的に応じて選択しましょう。

モバイルファーストなLPにおける大切な5つのポイント

ここからは、モバイルファーストなLPにする上での具体的なポイントを5つご紹介します。

なるべくシングルカラムで作成することを前提に、プラスαで押さえておきたい要点をまとめました。

スクロールごとに見える範囲を意識する

パソコンと違って見える範囲が狭いため、ユーザーがスクロールしていて困惑するような構成は避けたいですよね。

たとえば長文テキストが延々と続いていたり、どこからどこまでが1つのコンテンツの区切りかわかりにくいと、ユーザーが大事なポイントを読み飛ばしてしまうかもしれません。

見出しや画像を入れてメリハリをつけたり、背景の色を変更するなどして変化をつけ、ななめ読みしているユーザーにも重要なポイントが伝わる構成を意識しながら作ると良いでしょう。

またモバイルにおいてはスクロールが長くなってしまうため、ヘッダーやCTA（コール・トゥー・アクション）ボタンなどの重要な要素を上部や下部に固定して見せる手法がよく使われています。ただし固定する要素が多すぎると、表示範囲が狭くなり圧迫感が出てしまいかねません。タップすると表示されるアコーディオンメニューにしたり、下の方までスクロールするとボタンが表示されるようにするなどの工夫をするとベターです。

テキストサイズ・可読性を担保する

モバイルのスクロールのスピードはパソコンよりも速いため、テキストの中でも特に見出しは瞬時に見て伝わるサイズ感を意識しましょう。全体的に余白を多めにとったり、行間もパソコンよりもやや広めにとってあげると読みやすくなります。

また改行も見落としがちなポイントです。レスポンシブデザインのLPで、改行位置がモバイルで見たときに不自然になっているケースをよく見かけます。たとえばモバイルだけテキストを改行せずに流し込みにしたり、パソコンとモバイルでそれぞれCSSの改行指定を変えてあげると可読性が高まるでしょう。

画像も同じく、パソコンと同じ画像をモバイルにそのまま流用すると小さすぎて読みにくいことがあります。可能であればモバイル用に最適化した画像を別に用意しましょう。

リンクボタンまわりを工夫する

パソコンと違ってモバイルではカーソルが出ないため、オンマウスでリンクボタンの色が反転したり、カーソルが指マークになるなどの変化をつけられません。そのため、見た目のみでリンクボタンであることを伝える必要があります。

たとえば矢印や「▶️」マークをつけて次にページがあることを表現したり、立体感や丸みをつけてボタンらしさを強めたり、テキストリンクであれば下線や色をつけるなどの工夫をすると良いでしょう。あるいは「～～について詳しく見る」など、テキスト自体をリンクボタンだとわかる内容に調整します。

また、ユーザーが意図していない誤タップを防ぐためにリンクボタンの上下には広めの余白をつけ、ボタン自体は押しやすいように縦幅を太めにすることを推奨します。

行動を促すCTAボタンはLPの中でも重要な要素なので、コンテンツが多くて長めにスクロールしないと表示されない……ということは避けたいですよね。そんなときは下部に固定で表示されるフローティングボタンを活用することも有効です。

パソコンと見せ方を変えてコンパクトにする

先の内容でシングルカラムにするのが良いとお伝えしましたが、すべてのコンテンツを縦に並べ続けると、長くなって間延びした印象になってしまう場合もあります。

その際は以下の見せ方を検討してみてください。

• スライドショー

横にスライドしていく要素です。口コミや商品紹介など、コンテンツ数が多くコンパクトに見せたいときに役立ちます。自動で動かしたり、左右に矢印をつけてタップで動かすなどの調整が可能です。ファーストビューに使うケースもあります。

• タブ

ウィンドウのタブと同じように、クリックで表示切り替えができる要素です。料金表など比較したいものを見せるときに便利な手段です。

• アコーディオンメニュー・パネル

コンテンツを収納しリンクのクリックで開閉できる要素です。長いコンテンツを短くしたいときに使えます。

• モーダルウィンドウ（ポップアップ）

ボタンを押すとページ上に新たなウィンドウが表示され、「閉じる」ボタンなどを押さない限り消せない仕様の要素を指します。モーダルウィンドウとスライドショーを組み合わせてギャラリー風にしたり、小さく配置した写真を拡大して見せたいときにも使えます。注意事項などの大事なお知らせをページ遷移直後に自動で表示させるパターンもあります。

ページの表示速度を上げる

ここまではモバイルでの見せ方の工夫について紹介してきましたが、忘れてはいけないのがページの表示速度です。

どんなデバイスでも表示速度はパフォーマンス全体に影響する重要な要素ですが、特にモバイル端末ではパソコンに比べて画面の表示範囲が狭いため、読み込み速度が遅いと何の情報も表示されず、欠陥のあるページだと誤解されて一瞬で離脱されてしまう可能性もあります。

モバイルで見せる必要のない要素は非表示にして軽くするというのも1つの手です。

表示速度を改善する方法について知りたい方は、こちらの記事をご参照ください。

Webページの表示速度を改善するには？PageSpeed Insightsでよく提案される改善項目と対応方法を解説

最後に必ず実機で確認を

上記で紹介したポイントをLPに取り入れたら、最後は必ず実機で確認しましょう。

モバイルビューはパソコン上の開発者ツールを使って、ウィンドウ幅を狭めて確認することもできますが、実際のスマホとパソコンでは目から画面までの距離もスクロールのスピードも違います。

まずデザインカンプが完成した時点で、一度スマホに画像データを送って視認性や可読性を確認します。そしてコーディングが完了したら、ふたたびスマホで挙動を確認します。スクロールして上から下まで読んでみたり、実際にボタンを押して違和感がないかひとつひとつチェックしていきましょう。

高齢層もインターネット利用機器はスマホがトップに

パソコン版のLPデザインを考えてからモバイル版を作る……といった従来の流れで取り組んでしまう方もまだまだ多いかもしれません。「自分が担当している商材のターゲットは、年齢層が高めだから」と考えている方もいるでしょう。

しかし年齢層別でインターネット利用機器の状況を見ると、2022年の総務省調査ではどの世代もスマホが1番高くなっています。2020年時点ではパソコンがスマホを上回っている世代もありましたが、高齢層のスマホによるインターネット利用率は、年々高くなっているのが実情です。

また、BtoB商材などコンバージョン内訳を見るとパソコンの方が高い場合もありますが、それでも仕事以外の時間はスマホで情報収集をしていることを考えると、やはりどの商材でもモバイルファーストの視点は欠かせません。

これまでモバイルファーストの視点で考えていなかったという方も、ぜひ記事でご紹介したポイントを取り入れて、より成果につながるLPを制作していきましょう。