レスポンシブデザインとは実装のメリット・デメリット、作り方について解説

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

レスポンシブデザインとは、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版ページとモバイル版ページを分けて作成することが重要です。

もちろんレスポンシブデザインよりは修正・更新作業に時間がとられてしまうため、自社サイトの運用状況や今後の展開を考慮した上で判断しましょう。

レスポンシブデザインの作り方

レスポンシブデザインを作るには、ページのHTMLとCSSファイルにそれぞれ「meta viewportタグ」と「メディアクエリ」を記述する必要があります。記述自体は簡単な作業のため、この機会に覚えておきましょう。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

@media screen and (min-width: 481px)　{ }

@media screen and (max-width: 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サイトは今後検索順位が下落してしまう可能性があるため、今のうちに対策を講じておきましょう。