SEO対策なら株式会社ペコプラ > WEB制作・開発実例・コラム > ランディングページにおけるレスポンシブデザインの制作ポイント！

ランディングページにおけるレスポンシブデザインの制作ポイント！

WEB制作・開発実例・コラム

2018.09.26

2018.11.07

ランディングページは売り出したいサービスや商品をを画面の中で存分にアピールし申し込みや購入をさせる為のページになります。
コーポレートサイトなどと比べ、デザインの自由度が高く、訴求力の強いインパクトのあるページが多い事が大きな特徴の一つです。

そんなランディングページですが、MFIの風潮が強くなってきた今、レスポンシブで作る事も多くなってきていると思います。弊社でも基本的にはレスポンシブデザインで作らせてただいています。

しかしランディングページをレスポンシブデザインにするには注意点もあります。
今回はランディングページをレスポンシブにするにあたってのメリットと注意点、レスポンシブでも魅力的なランディングページを作るポイントを5つまとめました！

1 レスポンシブWEBデザインのメリットは？
2 レスポンシブWEBデザインの注意点
3 レスポンシブでも魅力的なランディングページを作る5つのポイント！
4 まとめ
- 4.1 この記事を共有する

レスポンシブWEBデザインのメリットは？

一般的なレスポンシブデザインの最大のメリットは一つのHTMLで管理できる点です。改修や修正がある時などにも1つ修正すれば良いので直し漏れなどがありません。
PCとモバイルで画像を切り替える事はよくあるものの、基本的には画像も1種類で済みます。画像の修正を何パターンも行っていくのは大変です。

レスポンシブWEBデザインの注意点

レスポンシブデザインは運用面ではメリットが多い事がわかりましたが、注意点もいくつかあります。

テキスト量によって見え方が変わる
シンプルでフォーマット化されたレイアウトになりがち
それぞれにあったレイアウトやパーツのサイズが必要になる
操作方法が異なるので考慮しなければならない
PCとモバイルでユーザー層に違いがある
画像を共通にするとデザインに制限がかかる

レスポンシブを意識しながら計算してデザインしていくと、モバイルではもちろん、PCデザインにも制限が出来てきてしまいます。個人的には特に、HTMLテキストベースで作る事で、スマホで見た時にテキスト量が多く、単調なデザインになっているものが多いと感じています。

自由度が高く訴求力の強さを出さないといけないランディングページデザインでのレスポンシブは、今のところあまり相性が良いとは思えません。

デバイスによってユーザー層に違いも大きいですし、コンバージョンを狙っていくのであれば、PCはPCで最適なデザイン、スマホはスマホで最適なデザインを作れるのがベストだと思います。

レスポンシブでも魅力的なランディングページを作る5つのポイント！

しかし時代はMFI。。レスポンシブでPCでもモバイルでも訴求力が強く、インパクトのあるページをつくる為にはどうすれば良いのでしょうか。

レスポンシブのランディングページを例に、5つのポイントを紹介します！

TOPページにはナビのみ！

https://www.nichiha.co.jp/premium/index.html

昨今ではランディングページにナビゲーションを入れるのは定番になっています。デザインの前の構成の段階の話ではありますが、このサイトのようにTOPページはナビゲーションと、下層ページへのリンクボタンのみで構成し、細かい内容は全て下層ページで説明していく事で、TOPページはスッキリとイメージ重視で作る事ができます。

モバイル時こそジャンプ率を意識する

https://www.oleary.jp/creamyessencefoam/

PCデザインだと意識してとってるジャンプ率。レスポンシブのモバイルデザインの時こそ特に大げさにジャンプ率を高くする事を心がけてください。

スマホなどのモバイルではPCよりも内容が縦に長くなってきます。ボリュームのあるテキストは少し読みづらくても小さめに、その分見出しはしっかり余白を取ったりフォントサイズに気をつける事で、伝えたいポイントが伝わるデザインになります。

モバイルサイズのコンテンツ幅で自由にレイアウト！

https://www.ya-man.com/brand/rei-beaute/lp/grande/#page-faq

モバイルのデバイスのサイズである320~460pxぐらいのコンテンツ幅でポイントの説明などの画像を作成しましょう！コーディング上はただ画像を縦並びにするだけですが、モバイルで見た時でも比較的自由なレイアウトを組んでいるように見せる事が出来ます。PCとモバイルで共通の画像でいきたいときに使えるテクニックです。

細かくスライスしてパーツ化！

https://www.seirogan.co.jp/seirogan/

画像はまとめてではなくひとつひとつパーツ化しましょう。
コーディングの際に横並びのレイアウトではflexboxを。自由なレイアウトではposition:absoluteを使うと、レスポンシブでもフレキシブルにレイアウトを変更しやすくなります。

左右に振って脱単調なデザイン！

http://tigerkyoro.jp/

PC時ではよくあるデザイン手法ですが、レスポンシブにするとどうしても単純に縦並びにしがちなテキストと画像のデザイン。
最低限のfontサイズを確保し、画像のデザイン的にも問題なければ、モバイル時でも横並びのままにしてみましょう！目線が左右に振られる事でレイアウトに動きが出てPC同様リズム感のある単調ではないデザインになります。