LPの作り方

【初心者OK】レスポンシブデザインのランディングページを作る方法

質問者

最近はスマホ利用者が増えていると聞きましたが、ランディングページでもレスポンシブデザインにした方がいいのでしょうか?

レスポンシブデザインという言葉をよく聞くけどそんなに大事?」と疑問に思っている人もいるかもしれません。

すでにタイトルにもありますが、結論から言うと「レスポンシブ対応は必須」です。今の時代レスポンシブ対応していないページなどありえません。

今回の記事ではレスポンシブデザインで作ることの重要性を解説します。

また、中には「重要性はわかっても作り方がわからない」という方もいると思います。

そんな方のために初心者でもレスポンシブ対応のランディングページを作る方法を紹介しています。

ぜひ最後までお付き合いください。

この記事でわかること
  • レスポンシブデザインが重要である3つの理由
  • レスポンシブデザインのランディングページを作る方法
Mino

それでは早速詳細をみていきましょう!

レスポンシブデザインとは?

レスポンシブデザインとは、スマホやタブレットでWebサイトをみたときに画面崩れなく綺麗にWebページをデザインすることです。

  • フォントの大きさ
  • レイアウトの構成
  • ボタンの位置

など、読者により見やすく使いやすいように追及します。

10年ほど前まではPCのみのデザインが主流でしたが、スマホやタブレットが急速に普及したことにより、今では「当たり前」です。

スマホファーストという言葉があるぐらいで、スマホ画面を優先的にデザインされることも圧倒的に増えました。

ランディングページをレスポンシブデザインにすべき3つの理由

ランディングページをレスポンシブデザイン対応させるべき理由は3つあります。

3つの理由
  1. 世帯毎のスマホ保有率は8割以上
  2. ECサイトのスマホ利用率は8割以上
  3. ネット閲覧率はスマホが6割

上の数字をみてどうですか?

レスポンシブ対応しないなんてありえない」という意味がよくわかったのではないでしょうか。

1. 世帯毎のスマホ保有率は8割以上

今や世帯のスマホ保有率はなんと8割を超えます。

私の母はもうすぐ70歳ですがiPhoneを使っています。買い物はアマゾンのタブレットでしますし、最近はインスタグラムをはじめました。

中学生になる甥と姪は暇さえあればスマホでYoutubeやアニメを見まくり、私とのやりとりはLINEです。

それぐらいスマホは私たちの生活の中に普及しており、それを無視することなどあり得ないのです。

2. ECサイトのスマホ利用率は8割以上

今やECサイトの購入の8割がスマホです。

この間エルゴヒューマンの椅子を買いましたが、その時もスマホを使って購入しました。私の奥さんはスマホでよく家具や家電を買っています。

あなたはどうでしょうか?以前はパソコンで購入することが多かった人も最近はスマホでの購入が増えていませんか?

今の20代は家にパソコンがない人も多いと言われています。

3. ネットの閲覧率はスマホが6割

通勤や買い物で電車に乗ることがあればゆっくりとまわりを見渡して見てください。スマホの画面を見ている人結構多くありませんか?

私がこの間電車に乗った時に試しに数えて見たのですが、「20人中18人」がスマホの画面を見ながら何かしていました。

私自身もそうですが、調べ物があれば今はスマホで検索します。わざわざパソコンを開いて調べる機会もだいぶ減りました。

会社で普段パソコンを使っているとついつい世間も同じように使っていると錯覚しがちですが、スマホ利用率の方が今は圧倒的に高いのです。

ランディングページのレスポンシブ対応は必須

いかがでしょうか?

上記の理由を理解してもらえれば、ランディングページをレスポンシブデザインに対応させることの重要性をわかっていただけたと思います。

最近では稀ですが、スマホで見た時にデザインが崩れて画面の外まで画像が伸びてしまっているサイトを見かけることがあります。

そんなサイトを見ると「チャンスを逃している」と思わずにはいられません。デザインの崩れたサイトからは誰も申し込みたくないですからね。

サイトは見た目もめちゃくちゃ大事です。

予算の都合でパソコンとスマホのデザインどちらを優先するか迫られたら、スマホを優先した方が良いぐらい大切なことです。

【初心者OK】レスポンシブデザインのランディングページを作る方法

とはいえ「どうやってレスポンシブデザイン対応させたら良いかわからない」という方がほとんどだと思います。

一番簡単な方法は「レスポンシブ対応済みのサービスを利用する」こと。

以前は制作会社に20万円〜30万円ほど払って依頼するのが当たり前でしたが、今は個人でも低コストでランディングページを作る方法があります。

いずれのサービスも

  • HTML&CSSの知識不要
  • 簡単操作で綺麗なランディングページが作れる
  • 何もしなくてもレスポンシブ対応済み

なので、初心者でも簡単にページを作ることができます。お金をかけずにランディングページを作りたい人には最適な方法です。

具体的な内容ついては以下の記事を参考にしてみてください。

【初心者用】ランディングページの作り方!30分でできる3つの方法「専門知識が無い初心者はどうやってランディングページを作ったらいいのだろう」と悩んではいませんか? 今回の記事では知識0の初心者でもランディングページが作れる方法を厳選して紹介します。 ランディングページを自分で作りたいと考えている人は必見です。...

あなたがまったくの初心者であっても、操作に慣れれば短時間でランディングページを作れるようになります。

また自分でランディングページを作るとなると、ライティングや文章構成についても疑問が湧いてくると思います。

それにも解決方法はあるので以下の記事を参考にしてください。

【売上UP】ランディングページの作り方が学べるおすすめ本7選「ランディングページを作りたいけど読んでおいた方が良いおすすめの本はあるかな」と疑問に思っていませんか? 今回の記事ではランディングページを自分で作るのに役立つおすすめの本を厳選して紹介します。 ランディングページを自作する方法も解説しているので必見です。...
商品が売れるランディングページの鉄板文章構成【実例で解説】 質問者 ランディングページを作りたいのですが、文章の書き方がわかりません。何かテンプレートみたいなものはありますか? 「商品を...

【結論】ランディングページは必ずレスポンシブデザインにする

あなたがどんな方法でランディングページを作るとしても、レスポンシブデザインをまずは優先するようにしてください。

今は小学生からお年寄りまでスマホを持つ時代です。アマゾンや楽天のサイトはどんどん使いやすくなり、数クリックで買い物できるようになってきました。

スマホでの購入に消費者も慣れ、高額なものでもバンバン売れています

レスポンシブ対応していないとそれだけで大きなビジネスチャンスを逃す可能性だってあります。

「レスポンシブ対応をするかしないか」ではなく、レスポンシブ対応は必須なので、まだ対応できていない場合はすぐにするようにしましょう。

Mino

これからランディングページを作ろうと考えている方は、上記で紹介した方法をぜひ試してみてください!