「レスポンシブ」とは、どんな端末からも見やすいようにWebページのレイアウトを最適化すること。

「レスポンシブって必要なの？」
「レスポンシブを実装するときの注意点は？」

といった疑問に答えるために、今回はレスポンシブの基礎知識やメリット＆デメリット、実装方法の手順や注意点をわかりやすく説明します。

新規サイトの制作や既存サイトのレスポンシブ化を検討している方は、ぜひ最後までご覧ください。

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

レスポンシブ（レスポンシブWebデザイン）とは、スマホ・タブレット・PCといった各端末の画面サイズに合わせて、Webページの表示を自動で調整して見やすくする構築手法です。

他に「レスポンシブデザイン」「レスポンシブ化」「レスポンシブ対応」といった言い方もありますが、意味はすべて同じです。

ここで、レスポンシブの実例をお見せします。

PC用デザイン

SP用デザイン

この例では、PC用の画面ではCVボタンが横並びですが、スマホ用の画面だと縦並びになっています。

また、文字のサイズや画像の配置もPCとスマホで変わっていることが分かります。

もしこれが、PC用見た目のままスマホ表示にすると見づらくなると思いませんか？

このように、Webサイトをレスポンシブ化することで、サイトを訪れるユーザーにとって「見やすい、読みやすい、分かりやすい」デザインの提供が可能となります。

レスポンシブデザインは必要？

レスポンシブに対応させることは、ユーザビリティを高めるために必要不可欠です。

その理由は、ユーザーが利用するデバイスに応じて表示デザインを切り替えることで、誰もがストレスなく閲覧できるようになるからです。

ここで、レスポンシブが必要な理由を洗い出してみましょう。

詳しくは後ほど説明しますが、｢Googleが推奨している｣というのは、レスポンシブ化されたWebサイトはGoogleに評価されやすい＝SEOに有利ということです。

したがって、今後のWebサイト制作におけるレスポンシブの必要性・重要性は、より高まると言えるでしょう。

レスポンシブデザイン非対応だとどうなる？

Webサイトがレスポンシブに対応していない（PC用のサイズしかない）場合、スマホで見ると非常に見づらくなるケースがほとんどです。

例えば、文字や画像が小さすぎたり、逆に大きくなりすぎて画面から見切れてしまうことがあります。

メニューやお問い合わせフォームがどこにあるのかわからないといった使いづらさにも直結してしまうでしょう。

要するに、レスポンシブ非対応のWebサイトは、ユーザーにとって「見づらく使いにくいサイト」になってしまうため、サイトへのアクセス減少に繋がるのです。

なお、レスポンシブ化しない場合は、端末によってWebページの表示が崩れないよう、PC用サイトとスマホ用サイトを別々に作る必要があります。

レスポンシブデザインの仕組み

そもそもWebサイトはHTMLとCSSで成り立っており、HTMLにはコンテンツの情報、CSSには装飾やレイアウトの指示が記載されています。

従来の（レスポンシブ化しない）方法で、スマホやタブレットでも見やすく表示させるためには、各デバイスごとにHTMLファイルを用意する必要がありました。

しかし、レスポンシブでは、1つのHTMLファイルに対し、デバイスごとのCSSを用意するだけで、自動的に画面の表示が切り替わる仕組みとなっています。

つまり、同じコンテンツ情報を用いながら、各デバイスに個別の装飾やレイアウトを指定して、見せ方を変える方法がレスポンシブデザインなのです。

レスポンシブデザインの種類

レスポンシブには複数のレイアウトがあります。

ここでは、代表的な以下の3種類をご紹介！

• レスポンシブレイアウト
• リキッドレイアウト
• フレキシブルレイアウト

レスポンシブレイアウト

レスポンシブの主流であり、各端末に適したデザインを細かく設定できるレイアウトです。

端末ごとにコンテンツや画像、ナビゲーションといった要素の配置替え及び表示／非表示を調整することができます。

例えば、「PCではサイドバーが表示されていたが、スマホでは非表示になる」といった設定が可能なので、1ページ内の情報量が多い場合に、スマホでも閲覧しやすくなり可読性を高めることができるのです。

画面幅に応じたデザインの切り替えは、ブレイクポイントを指定して行います。一般的には、次の数値を目安にすると良いでしょう。

ちなみにブレイクポイントとは、端末の画面幅に合わせてデザインが切り替わる境目（分岐点）となる数字のことを指します。

リキッドレイアウト

リキッドレイアウトは、端末の画面幅に応じて柔軟にWebページ全体の幅を伸縮させるレイアウトです。

レスポンシブレイアウトのように数値を指定するのではなく、一般的には％（パーセント）で幅を指定します。

例えば、画面幅に対して100％を指定すると、画面幅960pxの端末では幅960pxで表示され、320pxの端末なら幅320pxで表示されます。

そのため、「PCでは全体が表示されていたけど、スマホでは一部が横スクロールしないと見えない」といったことが起きず、どのデバイスで閲覧しても同じ情報を提供することができるのです。

ただし、レスポンシブレイアウトのように各デバイスごとの細かいデザイン設定はできません。

場合によっては、フォントサイズが極端に小さくなる、改行が多くなり読みづらくなる、幅が広すぎて間延びした感じになりバランスが悪くなるといった、ユーザビリティの低下につながる可能性もあるでしょう。

フレキシブルレイアウト

フレキシブルレイアウトはリキッドレイアウトの調整方法に加え、画面幅の最小値と最大値を指定できるレイアウトです。

例えば、「基本的には横幅を100％表示にしておき、768px以下の画面幅の場合はレイアウトを変更する」という指定ができます。

これにより、画面のサイズが変わっても画像やテキスト、ナビゲーションなどの要素の比率を保ちながら、どんな端末でも見やすいように調整ができます。

また、指定した最大値よりも大きな画面で閲覧した場合は、Webページの外側に余白ができて見えやすくなるのも特徴。

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

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

まずはメリットから見ていきましょう。

メリット1. MFIに対応できる

レスポンシブ化すればMF（モバイルファーストインデックス）Iに対応できます。

MFIとは、GoogleがWebページを評価する際に、モバイル版ページを基準にする仕組みのこと。

つまり、モバイルに対応していないPC用ページは、検索順位が下がってしまう恐れがあるのです。

対して、レスポンシブによりMFIに対応していれば、Googleの評価が下がるのを防げます。

メリット2. SEO効果が期待できる

レスポンシブ化したWebサイトはSEO効果が期待できます。

SEOに有利な理由には、上で説明したMFIに対応できる点が挙げられるでしょう。

また、レスポンシブ化すればサイトを分ける必要がないので、SEO評価の分散を防げるのも理由の一つ。

さらに、見やすいWebページは閲覧者の離脱率も低いため、SEOにも良い影響が期待できるでしょう。

メリット3. Webサイトの管理が楽になる

レスポンシブ化するとWebサイトの管理が楽になるのもメリット。

レスポンシブ化すれば、一つのHTML・URLを管理するだけであらゆる端末に対応できるため、運用における作業工数を削減できます。

作業面で言えば、「ページの修正や更新が楽になる」「リダイレクト設定が不要になる」といったメリットも期待できるでしょう。

メリット4. コストを削減できる

レスポンシブはWebページ制作や事業のコスト削減にもつながります。

端末ごとにサイトを制作して、複数のサイトを管理していくとなると、コストがかかるため運用も難しくなりがち。

一方、レスポンシブ化すれば一つのWebサイトを制作＆管理すればOKなので、コストを抑えられます。

さらに、運用するサイトが一つになれば、管理担当者の人件費やメンテナンス費用といった、事業にかかるコストを削減することも可能です。

そうして浮いた費用を集客活動や新規事業投資の予算に回せるのもメリットでしょう。

メリット5. デザインを統一できる

同じデザインを異なる端末で表示できるのも、レスポンシブのメリットです。

厳密には端末によってレイアウトは微調整されて表示されますが、あくまでデザインは同じため、一貫性が生まれます。

デザインが同じだと閲覧者の印象にも残りやすくなるため、デザインの一貫性はブランディングにおいて重要です。

また、デザインを統一していれば、Webサイトの管理者もコンテンツ内容を把握しやすいため、効率よくメンテナンス作業ができるというメリットもあります。

メリット6. SNSでシェアしやすい

レスポンシブ化したWebページはURLが一つなので、閲覧者がSNSでシェアしやすいメリットもあります。

ページがたくさんシェアされればSNSで効率的に拡散されて、アクセス数も増えるわけです。

ただし、シェアしてもらうためには、そのページを閲覧者に気に入ってもらわなければなりません。

訴求内容はもちろん、閲覧者に好感を持ってもらえるデザインを意識して、Webページを制作する必要があるでしょう。

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

レスポンシブには多くメリットがありますが、デメリットも存在します。

ここからはレスポンシブのデメリットを見ていきましょう。

デメリット1. デザインに制限がある

レスポンシブは一つのHTMLファイルを使うため、デザインに制限があります。

たとえレスポンシブ化していても、凝ったデザインだと端末によってはレイアウトが崩れることがあるのです。

そのため、使えるのはシンプルで汎用性のあるデザインやフォントに限られます。

また、デザインの自由度が低いため、他のWebサイトとデザインが似てしまう点もデメリットと言えるでしょう。

デメリット2. スマホでの表示が遅い

レスポンシブ化すると、スマホで閲覧する際にWebサイトの表示が遅くなりがちです。

レスポンシブ化したWebサイトはHTMLファイルが一つなので、ページを表示する際は異なる端末でも同じ情報を読み込むことになります。

しかし、このときスマホ用ページには不要なデータも読み込もうとしてしまうため、表示速度が低下しがちなのです。

デメリット3. レスポンシブの実装には時間がかかる

レスポンシブ化したWebサイトを構築するには、CSS記述が複雑になるため、ある程度の作業時間が必要です。

また、作業を外注する場合は制作会社との打ち合わせも必要になるので、時間がかかるでしょう。

さらに、サイトが完成したら公開前に閲覧テストや動作チェックなどを行う必要もあります。

デメリット4. 費用が高額になりやすい

レスポンシブの実装には費用がかかることも覚えておきましょう。

外注する場合の相場は、既存サイトのレスポンシブ化が1ページあたり1万〜3万円。

レスポンシブサイトの新規制作なら1万5,000円〜6万円です。

また、画像調整を行う場合はオプション料金が発生することがあります。

その場合の相場は、1点あたり2,000〜6,000円です。

レスポンシブデザインの実装方法

レスポンシブデザインの実装方法は多岐にわたり、「絶対にこれだ」と定められた方法はありません。

ここでは、レスポンシブ初心者が取得しておくべき代表的な実装方法として、CSSに記述していくやり方を紹介します。

CSSを使った実装方法の大まかな流れは次のとおりです。

それぞれの作業について説明していきます。

手順1. HTMLにmeta viewportタグを追加

はじめの作業は、HTMLの<head>タグの中にmeta viewportタグを追加することです。

meta viewportタグとは、「Webページを閲覧する際に、PCやスマホなど端末ごとに表示領域を指定する」ためのHTML属性値のことを言います。

CSSに記述してレスポンシブを効かせる場合、すべてのHTMLファイルのヘッダー部分にmeta viewportタグを追記する必要があるため、下記のコードを覚えておくと良いでしょう。（コピペもOKです）

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

なお、この記述を忘れてしまうと、次で紹介する具体的な条件指定（メディアクエリの記述）がうまく効かなくなります。

例えば、PCでの表示がそのままギュッと縮小された形で表示されてしまうなどの表示崩れが起きてしまうため、毎回必ず指定してください。

ただし、WordPressで作られたWebサイトの場合は、共通のテンプレートファイル「header.php」の部分に追記しましょう。

手順2. CSSに条件を記述（メディアクエリを使用）

続いて、CSSを使って具体的な条件を指定していきます。

CSSの記述方法も多数ありますが、ここではメディアクエリを使った代表的な方法を紹介します。

メディアクエリとは、ユーザーが閲覧する端末に合わせて、Webサイトの画面サイズを最適に表示するために使うCSS機能のこと。

具体的には、「端末の画面幅が〇px以上だったらこのスタイル、〇px以下だったらこっちのスタイル」といった感じでブレイクポイントを指定し、端末ごとに適したスタイルに切り替えることができます。

実際のメディアクエリの書き方は以下の通り。

（●●●）の中にはスタイルを適応させる条件としてブレイクポイントを指定し、 ｛・・・｝には条件が満たされた場合に適用される要素とCSSスタイルを指定します。

例えば、条件を「max-width: 480px」、適応スタイルをh1要素に「fonta-size:24px;」と指定したとしましょう。

h1{
font-size: 32px
}
@media screen and (max-width: 480px) {
h1{
fonta-size:24px;
}
}

この場合の指定内容は「画面幅が最大480pxまでは見出しサイズが24pxになり、480px以上はどの画面幅も32pxで表示される」となります。

このように、メディアクエリを指定することで端末ごとのデザイン調整が可能ですが、指定が多くなればなるほどCSSコードが増え、ページの読み込み速度が低下することもあります。

そこでぜひ実践してほしいのが、省略OKなメディアクエリを省略することです。

例えば、条件指定に記述するmaxやminは次のように略すことが可能です。

他にも、省略や一つにまとめられるメディアクエリがあるので、レスポンシブの実装に慣れれば、ぜひ取り入れてみてください。

レポンシブデザインの実装時の注意点

レスポンシブを実装するときにはいくつか注意点があります。

以下の点をおさえるだけで理想的なWebサイトに近づくので、しっかり確認しておきましょう。

端末ごとの見え方を意識して設計する

レスポンシブはさまざまな端末にレイアウトを最適化できますが、見え方は端末によって変わります。

例えば、PCでは見やすくても、スマホの小さい画面では文字や画像が見づらかったりするケースもあるでしょう。

そのため、端末ごとの見え方を意識して設計し、完成したら複数の端末で見え方を確認することが重要です。

テキスト量の多いページはスマホに向かない

スマホだと表示面積が限られるため、テキスト量が多いと読みづらくなってしまう恐れがあります。

テキスト量が多い箇所は、適度に改行を入れるだけでも見やすくなるでしょう。

また、画像やイラストをうまく使うことでテキスト量を減らせますよ。

データ容量が多いと表示速度が遅くなる

レスポンシブはCSSの容量が多くなりがちなので、表示速度の低下リスクは頭に入れておきましょう。

特に画像を入れる場合はサイズや解像度に要注意。

画像は小さいサイズのファイルを使うか、圧縮して軽量化するのがおすすめです。

ただし、圧縮しすぎると解像度が低くなり、画像が粗く表示されてしまうので、解像度と容量のバランスに気をつけてください。

表示速度の低下を防ぐ方法としては、｢データを多く詰め込みすぎない｣｢CSSファイルを圧縮する｣なども挙げられます。