スマホ向けランディングページのデザインその４つのポイント : 決済サービス情報ブログ（株式会社ペイジェント）

スマートフォンの利用者が増えてくるに従って、ランディングページもスマホに向けて最適化されることが必要になってきました。

スマホに向けたランディングページのデザインは、PC向けとどのように違うのでしょうか？

どちらもお客さんとなる人に向けたものなので、基本的な要素や構成は変わりません。

ただスマホは画面が小さくなり、操作もタッチパネルでの操作になるので、そこ向けた調整が必要になってきます。

ここでは、スマホに向けたランディングページのデザインのポイントをまとめています。

ぜひ参考にしてください。

ランディングページのポイントその１．画像やテキストの量をコンパクトに

PCとスマホの一番の違いは、画面のサイズです。

PCと同じように画像とテキストを配置していたのでは、バランスも悪くなりますしページ自体が縦に長くなりすぎて読者がストレスを感じ、離脱してしまうかもしれません。

そのため調整が必要になってきます。

見出しは一行でまとまるようにコンパクトにし、テキストは改行を増やして読みやすくします。

画像やフォントのサイズがどのくらいがよいかは、扱っている商品や客層によって変わってくるでしょう。

また、視覚に訴えやすいからといって画像は多用しすぎないほうがよいです。

テキストに比べて画像の数が多すぎると、お客さんはスクロールすることにストレスを感じてしまいます。

PCサイトは高速回線を使って見ることが多いですが、スマホは携帯回線やWifiなどを利用することになるので、読み込み速度が遅くならないように注意する必要があります。

どんなにデザインセンスのよいハイクオリティなランディングページを作っても、容量が重くてなかなか開かず、せっかくクリックしたお客さんが途中で元のページに戻ってしまったのでは意味がありません。

PC向けのランディングページでは、タイトルなどに見栄えのよいフォントを使うために画像化するのが一般的です。

ですが、スマホ向けのランディングページでは容量を少なくするために画像の使用頻度はなるべく抑えたほうがよいでしょう。

テキストシャドウを使うなどの工夫で、画像化しなくても十分に美しく表示することができます。

PC上で作成した色をスマホで見ると、薄かったりくすんでいたり、違う色に見えることがあります。

また、スマホの端末によっても色が異なって見えることもあります。

スマホ向けのランディングページを作るに当たっては、その点を意識しておく必要があります。

また、PCと違い、スマホは屋外で使われることも多いです。

強い太陽光の下でスマホを使うと、デザインの色使いによっては見づらいことがあります。

特に白などの薄い色は太陽光を反射しやすいです。

逆に、黒などの濃い色は光を吸収するので、そこに薄い色のテキストを入れると文字が見やすくなります。

お客さんが屋外でランディングページを見る可能性よりも屋内で見る可能性のほうが高いですし、色使いはサイトの印象を決める要素なので必ずしも背景を濃い色にしなければいけないわけではありませんが、選択肢の一つとして意識しておくとよいと思います。

スマホはPCと違い指で操作するので、アクションボタンの大きさと場所は重要です。

小さすぎては画面を拡大しないとボタンが正確に押せなくなり、お客さんの離脱を招きやすくなります。

また、アクションボタンを複数並べて配置するときには押し間違えない間隔かどうか、必ず実際にスマホで確認しましょう。

以上が、スマホに向けたランディングページのデザインの４つのポイントです。

スマホ用のランディングページは、小さい画面で見るものではありますが実際にデザインを作成する際には大きく作ることになります。

大きく作ったものを小さい画面で見ると間隔や色の感じ方に違いが生じるので、必ずスマホでデザインの確認をしましょう。