レスポンシブデザインとは？モバイルファーストとの違いも解説

Web制作に携わると耳にすることが多い「レスポンシブ」や「モバイルファースト」という言葉。今更「どういうこと？」と聞きにくい、この２つの言葉について初心者の方にも分かりやすいよう、簡単に解説します。

• レスポンシブデザインとは
• Webサイトを見ている環境は人それぞれ
• レスポンシブ(responsive)とは
• モバイルファーストとは
• モバイルファーストインデックス（MFI）
• まとめ

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

閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。 ~ wikipedia

簡潔にまとめると、レスポンシブデザインとは「どんな端末（デバイス）からでも見やすく、使いやすいWebサイトを作る」技術です。

Webサイトを見ている環境は人それぞれ

今の時代、ユーザーがWebサイト/Webページを閲覧してる端末は、PC、スマートフォン、タブレットと様々。
また、スマートフォンやタブレットは端末ごとに画面の大きさもけっこう違いますよね。

以下は、Screen Sizesという、Apple製品のビューポートサイズや解像度をアーカイブしてくれているサイトです。
同じ2022年発売のスマホでも、iPhone SE (3rd）とiPhone 14 Pro Maxだとサイズがかなり違うことがわかります。

URL：https://www.screensizes.app/

ユーザーがどのくらいの大きさ（表示領域）の端末から、Webサイトを見ているかはわかりません。
ですので、どんな端末から表示させたとしても、見やすい・使いやすいWebサイトの制作が求められているわけです。

レスポンシブ(responsive)とは

レスポンシブ(responsive)は「反応する」「敏感に反応する」という意味を持つ言葉です。

Web制作で使う“レスポンシブデザイン”は「アクセスされた端末に（敏感に）反応する」というニュアンスで使われています。
PC、タブレット、スマートフオンといったデバイス毎にページを作り分けるのではなく、ワンソース(HTMLなど）で各デバイスに最適な表示に自動的に切り替えられるデザイン・制作手法を指します。デザインで使われる考え方のように思われがちですが、コーディングの手法も込みで“レスポンシブデザイン”です。

HTMLで出来ているページを例に、どういうことか見てみましょう。

◆デバイスごとに専用ページを作る場合

アクセスしてきた端末に合わせたWebページの表示方法として、PC用、スマホ用などデバイス毎にページを作るという方法があります。

それぞれページが分かれているので、PC用ページとスマホページのURLが違うケースが多いですね。
レスポンシブデザイン普及以前は、この方法で作られることが多かったです。

ページを別々に作る方法

◆レスポンシブデザインの場合

レスポンシブデザインはワンソース、HTMLページであればHTMLファイルは1つだけ用意します。
そしてCSS（ス夕イルシート）の方で、各デバイスに最適な表示に自動的に切り替えるように作っていきます。
CSSは1つでも、複数のファイルを用意しても構いません。

レスポンシブWebデザイン

肝心のCSSの切り替えは、MediaQueries（メディアクエリ）と呼ばれる制御式を使います。
メディアクエリで画面幅を定義してあげると、ブラウザの方で適用するCSSを切り替えてくれる仕組みです。……と聞くと、作るのが難しそうに思うかもしれませんが、実際は簡単に作成できますよ。

レスポンシブデザインはワンソースなので、作成・更新時の労力が少ないのが最大のメリット。
また、Googleがレスポンシブデザインを推奨していおり、SEOにも有利とされています。

こうした理由から、近年のWebサイトではレスポンシブデザインが主流となっています。

モバイルファーストとは

レスポンシブと一緒に耳にすることが多い言葉として、モバイルファーストがあります。

mobile first、直訳すると「モバイル（スマートフォンなどの携帯端末）が先」となります。実際、制作時にもスマホ向けの表示からデザインやコーディングを行っていく……という手法が多く使われていますが、先にスマホ用を作れば良いというわけではありません。

モバイルファースト本来の目的は、モバイルユーザーのユーザーエクスペリエンスを向上させることです。

スマホの特徴は、PCなどよりも圧倒的に狭い画面、そして指で操作すること。
リンク部分が小さかったり、距離が違いと、タップしたかったところと別の部分を押してしまうかもしれません。見たかったところと別のページが開くと、イラッとしてしまいますよね。また、文字が小さくて見にくい・画像内の文字を読むのにピンチするのが面倒で…なんて経験がある方もいらっしゃるでしょう。

こうした不便さ・使いにくさをモバイルから閲覧しているユーザーに感じさせないように、Web サイトをデザイン・構築することがモバイルファーストなのです。

モバイルファーストインデックス（MFI）

モバイルファーストという言葉が多く使われるようになった一端には、Googleがあります。
Googleは2016年からモバイル・ファースト・インデックス（MFI：Mobile-First Indexing）への移行を表明し、2021年にはモバイル・ファースト・インデックスへ完全移行する旨を発表しました。この発表でSEO、Google検索結果の上位表示を目指すなら、モバイルファーストにしなくては、ということで話題になったわけです。

肝心のモバイルファーストインデックスとは何か。
Google公式のSEO情報ポータル『Google 検索セントラル』では以下のように説明されています。

Google のインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。これをモバイルファースト インデックスと呼びます。

引用元： https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing?hl=ja

ここでの“インデックス登録”は、Googleにデータが登録され検索結果に表示されるようになること。ランキングは、検索結果一覧の中で、上から何番目に表示されるかの位置づけです。

つまり、あなたのサイトの登録・ランキングは、スマホで表示されるページを基準に行いますよということ。
ランキングには、ユーザーエクスペリエンス（ユーザーが感じる使いやすさ、感動、印象などの体験）が重要な要素とされています。スマートフォンからアクセスした際に、コンテンツが見られなかったり、見辛い・使いにくいなどの問題があれば、Googleからの評価が下がるわけです。

モバイルファーストインデックスでも、スマホから先に作らなくても良い

レスポンシブデザインでは、CSSメディアクエリで画面幅ごとに適用するCSSを切り替えています。
このCSSを書く時の順番、制作手順を指す言葉としても以下のように呼び分けることがあります。

• スマホ用のCSSを先に作る＝モバイルファースト
• PCデザインのCSSから作る＝デスクトップファースト（PCファースト）

これが「Googleのモバイルファーストインデックス」と混同され、スマホ用のCSSから先に書かなければダメ、と誤解されているケースもあります。時々、クライアントさんなどから聞かれることもあります。

Googleが言っているのは、スマホで表示される内容・デザインを基準にする、ということ。
『Google 検索セントラル』でもモバイルファーストインデックスへの対策として、以下のようなことが挙げられていますが、モバイルからコーディングすべきという言葉はありません。

• ユーザーに最適なエクスペリエンスを提供する
• モバイル フレンドリーなサイトを作成する
• パソコンとモバイルでコンテンツが同じである

要は、モバイルユーザーがアクセスしてもコンテンツがきちんと見え、使いやすければOKなわけです。

まとめ

• レスポンシブデザインは、CSSで画面幅に合わせて表示を切り替える
• モバイルファーストは、スマホユーザーが快適に利用・閲覧できることが目的
• スマホ表示のCSSから書かなくても、Googleのモバイルファーストインデックスには対応できる

次のレッスンからは、実際にレスポンシブデザインのWebページコーディングを見ていきましょう。
実際にCSSを書いてみると、モバイルファーストインデックスに必須ではなくとも、制作手順としてのモバイルファーストが取り入れられることが増えている理由もわかりますよ。