レスポンシブデザインとは？基本中の基本をわかりやすく解説

スマートフォン・タブレットの普及により、WEB業界でいまや当然となった「レスポンシブデザイン」
今回は「レスポンシブデザイン」について、フロントエンジニアの経験などを踏まえ、詳しく説明していきます。

レスポンシブデザインの概要

レスポンシブデザインについて、まず、見え方という点でお話ししていきましょう。

WEBサイトがあり、その中のあるページをパソコンで見ているとします。
スマートフォンやタブレットなど、別のデバイス（端末）で見てもキレイに表示されていれば、そのページはレスポンシブデザインです。
なお、この場合の「キレイに表示されている」は、画面サイズに応じてレイアウトが見やすい形・大きさに変化しているということです。

上記が、見え方におけるレスポンシブデザインです。
次に、コーディング（制作側）という点でお話しします。

レスポンシブデザインが登場するまでは、パソコン / スマートフォン / タブレットなど、アクセスするデバイス毎に専用のHTMLやCSS、URLを用意して表示させていました。
※現在でも用途に応じて上記の様に分ける場合があります。

「HTMLやCSS、URLを別にってどういうこと？？」と思うかもしれませんので、少しかみくだいて説明します。

レスポンシブデザインではない表示例

・パソコンのURL
https://〇〇〇〇〇/index.html

・スマートフォンのURL
https://〇〇〇〇〇/sp/index.html

・タブレットのURL
https://〇〇〇〇〇/tb/index.html

index.htmlの前に「sp」「tb」などをつけてURLを分け、ユーザー（訪問者）がどのデバイスでアクセスしたかによって、表示を変えるよう設定しています。
この場合、それぞれのHTMLに対応するCSSを用意する必要があります。
つまり、少なくともHTMLを3つ、CSSを3つ、合計6つは制作しなくてはなりません。

また、別のパターンとして、パソコンの表示をそのままスマートフォン/タブレットで表示していることもあります。
その場合、画面に収まりきらない部分は見切れた状態になり、横にスクロールをして見るか、小さく表示させます。
しかし、この表示方法だとコンテンツが隠れてしまったり、「文字が小さすぎて読めない！」となったりするので、ユーザーにあまり優しくないのが難点です。

レスポンシブデザインの表示例

・パソコン/スマートフォン/タブレットのURL
https://〇〇〇〇〇/index.html

パソコン/スマートフォン/タブレット、どのデバイスでアクセスしてもURLを分けず、共通のHTMLファイルを表示します。
つまり、ファイル数は最小でHTMLとCSS、合わせて2点の制作になります。
ちなみにですが、CSSはパソコン/スマートフォン/タブレットで分ける場合もあります。

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

ここからは、レスポンシブデザインのメリットを紹介します。

ユーザーが見やすいサイトになる

デバイスによって最適化されたレイアウトになっているので、見やすいWEBページになります。
「見やすい＝利用しやすい」サイトは、コンバージョンにもつながる大きなメリットです。

更新性が優れている

どのデバイスで見ても同じHTMLを表示するので、変更するファイルが少なくて済み、作業効率が良くなります。
また、1つのHTMLのみで更新漏れが少ないという点でも優れています。

費用が抑えられる

ケースバイケースですが、比較的費用は抑えられると考えられます。
パソコン/スマートフォン/タブレットと3ページ作るよりも、レスポンシブデザインは1ページのみ作ればいいので安価になることがあります。
ただし、どのデバイスで見てもキレイに表示されるようにCSSを書く必要があるので、その分レスポンシブデザインのページ単価は高くなります。

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

次は逆に、レスポンシブデザインのデメリットを紹介します。

1つのファイルに対するコードの記述量が多くなる

1つのファイルにさまざまなデバイス用の記述をしますので、コードが多くなってしまいます。

レイアウトの自由度が減る

共通のHTMLを表示するので、デバイス毎に大きく変わるレイアウトは難しいです。

レスポンシブデザインその他（補足）

ここまで、メリット・デメリットを紹介してきましたが、その他どちらとも取れないこともありますのでお話しします。

レスポンシブデザインだと検索順位が上がる？

レスポンシブデザインはどのデバイス、ユーザーにも利用しやすく、パソコンの要素を継承できることからコンテンツが充実しているため、サイトの質は良くなると考えられます。
またGoogleはモバイルファーストを推奨しています。ということはスマートフォンに対応させることはGoogleの評価があがるので検索順位に影響があるというのは言わずもがなです。
SEO対策としてはレスポンシブ対応は必須と考えます。

レスポンシブデザインだと表示スピードが遅い？

パソコンとその他のスマートフォン/タブレットではデバイスのスペックに差があるため、サイズの大きな画像や動画を表示するには時間がかかってしまうことがあります。
ですが、現在では通信速度の向上、特にこれから来る5G通信を考えると、この心配は不要になるかもしれません。

レスポンシブデザインとは？基本中の基本をわかりやすく解説　まとめ

以上、レスポンシブデザインについてご紹介しました。特別な事情がない場合は、積極的に導入していくべきだと考えます。
見え方という点からも優れている上、作業者側からすると「更新しやすい」ことがとても魅力的だからです。
また、納品後に更新作業が発生した場合、スピーディに公開できるとクライアントの売り上げ増加にもつながるでしょう。