販促担当者のためのデジタルマーケティング情報メディア|baXooka[バズーカ]

今さら聞けない!レスポンシブデザインとモバイルファーストの違いって?

Web制作について「レスポンシブデザイン」「モバイルファースト」でサイト制作することを前提にお話を頂くことが増えてきました。当サイトもBtoBを主としていますが、スマートフォン・モバイル端末の閲覧ユーザーが43%を占め、モバイル端末の最適化はPC同等の重要度です。

Web制作の現場では当然のように扱われる「レスポンシブデザイン」ですが、メリット・デメリットを正しく理解できているでしょうか?そこで今回は、意外に知られていない「レスポンシブデザイン」と「モバイルファースト」の違い、それぞれの意味をご紹介します。

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

レスポンシブデザインの基本


レスポンシブデザインは、その名が表す通り、同一のURLとHTMLで記述したコードがデバイスに合わせて表示サイズを「柔軟に対応(=レスポンシブ)」してくれるデザインのことを指しています。

一方、モバイル対応の手法としては、レスポンシブデザイン以外にもあります。参考までに、Googleでは以下の3つをモバイルサイトとして認識しているようです。

  • ① レスポンシブデザイン
    URL・HTMLの変更をしない。
  • ② 動的な配信
    URLの変更はないが、HTMLコードはデバイスを認識して表示させる。
  • ③ 別々のURL
    URLもHTMLも別に用意していて、それぞれのデバイスを認識して表示させる。
  • 参考:https://developers.google.com/search/mobile-sites/mobile-seo/

レスポンシブデザインは1ソースでマルチスクリーンに対応させることが可能で、表示エラー等が起きにくくユーザビリティも良くなるため、Googleはレスポンシブデザインでの記述を推奨しています。

では、レスポンシブデザインはどんなメリット・デメリットがあるのか見てみましょう。

メリットとデメリット


まずは、メリットを見てみましょう。

メリット

  • カラムや画像が自動的にスクリーンサイズにあわせて適切なサイズになる
  • 1ソース(HTML・CSS)でマルチスクリーンに対応しているため、更新や文字修正・画像の差し替え等の作業が容易
  • URLが変わらないため、共有が簡単
  • GoogleのアルゴリズムにPC用・モバイル用ページが存在することを伝える必要がない

など、ユーザーのいずれの端末でも見易いだけでなく、制作サイドのメリットも多々あります。
一方で、デメリットはどんなものがあるのでしょうか?

デメリット

  • 全てのページでPC用とスマートフォン用(他ブレークポイント※1を設定していればその分)のソースを読み込むことになるため、表示速度が低下する
    ※1:ブレークポイントとは、あるサイズに達した時にそのサイズに合わせたスタイルを適用させること。PC・スマートフォンサイズの境目に設定することが多い。
  • 画像や動画も同様に毎回読み込みを行うため、極力データサイズを最小にする必要がある
  • ブレークポイント設定が多くなればなるほど、複雑になりやすく制作工数が増加する
  • レイアウトが崩れないよう、画像枚数や文字数などをPCスマホ双方で調整する必要がある
  • マルチスクリーン対応している分、制作時のチェックにおいて確認すべきデバイスや環境等が増える

このように一長一短あります。要素が限られているコーポレートサイトやメディアサイトではレシポンシブで制作することが多いのですが、画像や文字の視認性が売上の鍵となるECサイトやランディングページでは敢えてレスポンシブを採用しないといった使い分けがなされています。

続いては、最近同様によく使用される「モバイルファースト」について確認してみましょう。

モバイルファーストとは

モバイルファーストの基本

スマートフォン世帯保有率が2010年では9.7%だったのが、2016年では71.8%まで増加していることから、いかに普及率が急増しているかが分かります。
参考:総務省「平成29年版 情報通信白書」

そこで生まれた「モバイルファースト」。この言葉から、スマートフォンを最優先に考えたサイト制作と考えてしまいがちですが、実はこれは正しいとは言えません。

モバイルファーストとは、ユーザー視点に立って、モバイル端末においても適切に表示ができるようWebサイト構築をすることを意味します。個人的には、Webサイトを制作する際にユーザーが使うデバイスだけでなく、導線やユーザビリティ等が最適化出来るように構築することだと考えています。

モバイル対応を進めるためには、ユーザーがどういった経緯や意図でWebサイトへ訪れるのかを考えながら、快適に使ってもらうためにどうしたらよいかを考えて設計する必要があります。モバイルという制限された環境からサイトコンテンツをふるいにかけ、そのコンテンツを元にPCサイトを再構築することで、全体として整理整頓されたユーザビリティの高いサイトへと繫がるのです。

モバイルファーストで考えるメリット

先述の通り、モバイルを中心にコンテンツを整理することで、PCサイトに詰め込んでいたコンテンツを厳選することが出来る点は大きなメリットです。

端末によりけりとは言え、総じてスマートフォンはPCと比べるとCPUやメモリサイズ等のスペックが低くなっています。そんな端末で快適に閲覧するためには、サイトの読み込むデータを少なくして表示速度を高める必要があり、結果としてPCにとっても快適なサイトとなります。

何より、取りこぼしていたモバイル端末ユーザーを確保できることが最大のメリットです。特に10~40代を中心にスマートフォンが普及しているため、サービスや商品のターゲット層がこの世代に該当する企業においては売上の数割を左右すると言っても過言ではありません。

ほとんどの企業で自社サイト(ECサイト)を持たれている中、費用や業務の兼ね合いで、既存のPCに合わせた簡易なスマートフォン対応に留まってしまっているケースもまだまだ見受けられます。この場合、PCにはあるがSPにはないコンテンツ等が発生しやすく、ユーザビリティとしては非常に使いにくいサイトだと認識されてしまいます。

こういった自体を防ぐためにも、リニューアルのタイミングでスマートフォンを中心としたコンテンツに整理して構築し直す必要があるのではないでしょうか。

最後に

レスポンシブデザインとモバイルファーストの違い、理解できましたか?レスポンシブデザインは仕組みのこと、モバイルファーストは概念のことと覚えておけばわかりやすいですね。

目的やターゲットに応じて、モバイルファーストがハマることもあれば、PCファーストが良い場合などもあります。

今ではアプリファーストという言葉もちらほら聞くようになりましたが、急速に変化を遂げるWeb業界、今何が必要なのか分からない…という場合は、ぜひ弊社にお問い合わせください。設計から制作までサポートさせていただきます。

The following two tabs change content below.
龍田アシカイネン

龍田アシカイネン

WEBディレクター。 サイト分析、UI設計、WEBアプリケーション活用が得意分野。 最新情報はくまなくチェックするミーハー男子、ECサイト運用経験あり。 常にトレンドと使いやすさを考えたサイト設計を考えています。 元柔道部 区大会銅メダリスト。 ユニ◯ロの防臭靴下を愛用、足の裏の手入れは毎日欠かさず行っている
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする