レスポンシブデザインとは実装のメリット・デメリット、作り方について解説
ツイート
シェア今回はレスポンシブデザインを実装するメリットとデメリットをお伝えした後に、実際のコード記述方法について解説を加えました。デザイン制作を行う時間がない方のために、テンプレートがダウンロードできるサイトも紹介しているため、ぜひ参考にしてみてください。
レスポンシブデザインとは
レスポンシブデザインとは、Webサイトのデザインを「閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザイン」を指します。
従来の検索ユーザーの多くはPC画面からコンテンツを閲覧していましたが、検索ユーザーの使用デバイスがスマートフォン・タブレット・PCなど、画面サイズの異なるデバイスに変化したため、それぞれの画面サイズに対応するレスポンシブデザインに注目が集まっているのです。
また、レスポンシブデザインは1つのHTMLで配信され、デバイスごとにCSSを用意して表示を変える仕組みをとっています。
この仕組みのおかげで、いずれのデバイスに対しても同じURL・HTML・CSSを使用できるため、「モバイル版ページでは表示されるが、PC版ページではエラー表示になる」といったユーザビリティを低下させる事態を回避することができます。
Googleはモバイル版ページを作る方法として以下の3つを想定していますが、実装と維持が最も容易であるレスポンシブデザインの実装を推奨しています。
- レスポンシブデザイン：検索ユーザーのデバイスの種類に応じて画面サイズが変化
- 動的な配信：同じ URL で異なる HTML（および CSS）をサーバーから返す
- 別個のURL：PC版・モバイル版それぞれのHTMLを用意し、URLも別個で作成
レスポンシブデザインが求められる背景
レスポンシブデザインは以前から存在していましたが、Googleが2021年3月にMFI（モバイル・ファースト・インデックス）へ完全移行する旨を発表したことから、さらに関心が高まっています。
MFIとは、Googleのクローラーがモバイル版ページをインデックスすることを意味していますが、従来のPC版ページのインデックスからモバイル版ページのインデックスに完全移行することで、モバイル版ページを作成していないWebサイトの検索順位下落が危惧されているのです。
つまり、モバイル版ページの準備ができていないWebサイトは、モバイル版ページの作成が必要な状況となっています。
とはいえ、モバイル版ページの作成を一から行うには「ハードルが高い」と感じるWeb担当者も多いと想定されることから、Googleは「実装と維持が容易なレスポンシブデザインの採用をおすすめしている」という経緯があります。
MFIについて詳しく知りたい方は「MFIとは？移行の確認方法やモバイルフレンドリー対策について解説」を読んでください。
レスポンシブデザインのメリット
MFIへの完全移行に合わせてGoogleが推奨するレスポンシブデザインですが、モバイル版ページ作成においてメリットとされているのが以下の4つです。
- ページの修正・更新が簡単
- MFIに対応できる
- 閲覧デバイスに関わらず1つのデザインを作成できる
- URLの管理が容易
- ページ評価が分散しない
レスポンシブデザインのメリットは、ページの管理が楽になる点です。
通常モバイル版ページを作成するとなれば、PC版ページとは異なるHTML・URLを作成する必要がありますが、自社サイトでは実質1つのページHTML・URLを管理するだけで事足りるようになります。
CSSファイルがそれぞれのデバイスに対応して画面サイズを最適化してくれるため、スマートフォン・タブレット・PCいずれのデバイスでもユーザビリティを向上させることができます。
また、1つのURLでページを管理できるということは、別個のURLを作成することによる「ページ評価の分散が防げる」ことを意味します。MFIへの完全移行に対応する形で導入するレスポンシブデザインですが、副次的効果としてページSEO評価の低下を防ぐことにつながるのです。
レスポンシブデザインのデメリット
実装するメリットの多いレスポンシブデザインですが、やや構造上の問題が発生することがデメリットとして挙げられます。
- モバイル版ページの表示に時間がかかる
- 表示するデザインが似てしまう
Googleが推奨しているレスポンシブデザインですが、自社サイトで管理しているページが少ない場合や、「デザイン制作事業を営んでおり、それぞれのページデザインに合ったデザインを制作している」といった場合は、PC版ページとモバイル版ページを分けて作成することが重要です。
もちろんレスポンシブデザインよりは修正・更新作業に時間がとられてしまうため、自社サイトの運用状況や今後の展開を考慮した上で判断しましょう。
モバイル版ページの表示に時間がかかる
レスポンシブデザインは1つのHTML・URLで異なる見せ方を行うデザインのため、モバイル版ページで表示することのないHTMLも読み込んでしまいます。
ページによっては全てのコンテンツが表示されるまでに時間がかかってしまい、スマートフォンを使用しているユーザーの離脱率を高めてしまう恐れがあります。モバイル版ページの表示速度を測定し、改善したい場合はPageSpeed Insightsを使いましょう。
表示するデザインが似てしまう
レスポンシブデザインでは、1つのHTMLをCSSによって見せ方を変えているため、それぞれのデバイスで表示されるデザインはどうしても似たものになってしまいます。
形や大きさは画面サイズに最適化されますが、画像やフォントそのものを別のデザインに変化させることはできないのです。
ちなみに、レスポンシブデザインで選べるレイアウトの種類は以下となります。
- レスポンシブレイアウト：画面サイズに応じてレイアウトが変化（上下左右など）
- リキッドレイアウト：画面サイズに応じてデザイン全体が変化（レイアウト変化なし）
- フレキシブルレイアウト：画面サイズに応じてデザイン全体が変化し、指定値を超えた場合に余白が発生
レスポンシブデザインの作り方
レスポンシブデザインを作るには、ページのHTMLとCSSファイルにそれぞれ「meta viewportタグ」と「メディアクエリ」を記述する必要があります。記述自体は簡単な作業のため、この機会に覚えておきましょう。
HTMLにmeta viewportタグを記述する
HTMLファイルで作成したWebサイトの場合は「すべてのHTMLファイルのヘッダー部分」、WordPressで作成したWebサイトの場合は「header.php」に以下のコードを記述します。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>meta viewportタグを記述することにより、①閲覧ユーザーの使用デバイス情報の取得、②取得情報から画面横のサイズを把握してPC版・スマホ版を判断、ができるようになります。
meta viewportタグの記述に加えてCSSファイルにメディアクエリを記述することで、デバイスごとの画面表示を変えることができます。
CSSファイルにメディアクエリを記述する
メディアクエリを使うことによって、閲覧ユーザーの画面サイズに応じたページサイズの切り替えができるようになります。まずは、PC版ページを表示する値（ブレイクポイント）を指定していきます。
@media screen and (min-width: 481px) { }「min-width: 481px」と指定することで、画面横のサイズ（CSSピクセル）が481pxに達した時に、モバイル版ページからPC版ページへと画面サイズが切り替わるようになります。また、{ }内には通常使用するCSSコードを記述していきます。
次に、画面サイズが0px～480pxの場合に表示するモバイル版ページの設定を行っていきます。CSSファイルには以下のコードを記述しましょう。
@media screen and (max-width: 480px) { }「max-width: 480px」と指定することで、480px以下の画面サイズではモバイル版ページが表示されるようになります。
レスポンシブデザインで使用する基本CSS
先ほど記述したCSSファイルのメディアクエリに以下のCSSコードを追記することで、モバイル版ページでは小さ過ぎて認識できなかった画像サイズを横幅100％で表示させられるようになります。
@media screen and (max-width: 480px) {
img {
width: 100% ;
}
}モバイルデバイスで閲覧するユーザーのためにも、画像が小さくなるページは最適化しましょう。
レスポンシブデザイン作成時の注意点
レスポンシブデザインを作成する時の注意点として以下の2つが挙げられます。
- 流入ユーザーの使用デバイスを把握する
- スマートフォン用ページから作成する
レスポンシブデザインではよくPC版ページとモバイル版ページが例に出されますが、CSSピクセルが481px～959pxとなるタブレット向けの画面サイズ対応も忘れてはいけません。
メディアクエリを記述する際は「値が間違っていないかどうか」や、「実際にタブレットでどのように画面サイズが切り替わるのか」に注意しましょう。
また、レスポンシブデザインの作成は、閲覧ユーザーが増加しているモバイル版ページから作成するのがおすすめです。理由としては画面幅に制約があることで、PC版ページから縮小した場合の「見にくさ」や「使いづらさ」を回避できるからです。
レスポンシブデザインのおすすめテンプレート
1つのHTMLで様々なデバイスに対応できるレスポンシブデザインですが、1つのデザインを作成することに変わりはないため、制作に時間がかかってしまいます。自社サイトの方針もよりますが、予め作成されているテンプレートを使用して効率化したい方は「無料ホームページテンプレート.com」を活用してみてはいかがでしょうか。
無料かつ商用利用可能なテンプレートとなっているため、時間がない方に特におすすめです。
また、WordPressを自社サイトに導入している方は「WordPressのレスポンシブデザイン対応テーマ」を購入することによって、自動的にレスポンシブデザイン実装を完了させることが可能です。
1～3万円の有料テーマでもレスポンシブデザインに対応しているテーマは数多く存在するため、まずは検索してどのようなテーマがあるのかを調べてみてください。
まとめ
Googleが完全移行を発表したMFIによって、レスポンシブデザインの需要は再び高まっています。
モバイル版ページを準備していないWebサイトは今後検索順位が下落してしまう可能性があるため、今のうちに対策を講じておきましょう。
