※本サイトは一部アフィリエイト広告を利用しています。
「レスポンシブWebデザインって何？」などと思っている方も多いのではないでしょうか。実はGoogleも推奨しているサイトの構築方法で、SEO対策にもなり、現代では最もスタンダードなサイト構築方法のため、サイトを制作する際は必ず検討が必要となる方法です。
しかし、レスポンシブWebデザインはある程度専門的な知識が必要で、コストがかかるという面もあります。
このページでは集客や営業を支援するマーケティング情報メディアであるBowned（ボウンド）の編集部がレスポンシブWebデザインについて以下のことを解説します。
- レスポンシブWebデザインとは何か
- レスポンシブWebデザインのサイトの特徴
- 利用するメリットとデメリット
- レスポンシブWebデザインの作り方
- デザインを構築する上での注意点
このページを最後までご覧いただければ、レスポンシブWebサイトの特徴やメリットについて知ることができ、SEO対策においても有利なサイト作りのヒントとなります。
内容を簡単にまとめると・・・
- レスポンシブWebデザインとは閲覧するデバイスに合わせることのできるウェブサイトの表示形式
- レスポンシブWebデザインはモバイルフレンドリー
- レスポンシブWebデザインにするとSEO対策に繋がる
目次
レスポンシブWebデザインとは？
レスポンシブWebデザインとは、1つのサイトをPCやモバイルなどそれぞれの画面の大きさに合わせた、見やすく使いやすいWebサイトにするという方法です。
1つのURLを使用する内容も同じサイトですが、ユーザーがアクセスに使用する機器によって、情報の大きさや配置などを指定し、それぞれに合った表示をするようにします。
レスポンシブWebデザインのウェブサイト
レスポンシブWebデザインのサイトにすると、PC用とモバイル用などサイトをいくつも作る必要がありません。
URLやHTMLといったサイトの構築に必要なものも１種類ずつ用意すればよいですし、更新の手間も少なく済むため1度構築してしまえば、運営コストをかなり抑えることが可能となります。
1つのHTMLであらゆる端末の表示に対応することができる理由は、HTMLではなくCSSというファイルを使ってレイアウトや装飾をコントロールするからです。
CSSを使って「画面の横幅が○○pxの時は、サイトの表示を○○のようにする」というような明確な指示を予め記述しておくことによって、ユーザーがアクセスした端末の画面に合わせ、サイトの表示を切り替えることができます。
レスポンシブWebデザインのメリット
レスポンシブWebデザインを採用する最大のメリットは、多くのユーザーが利用するモバイル端末の小さな画面でも、サイトのページが見やすく、使いやすくなることです。
閲覧し辛いサイトの場合、せっかくユーザーが訪れても、途中でサイトを離脱してしまう可能性も高くなりますが、サイトをよく見てもらえれば、サイトの目的を果たすことのできる可能性も高まりますので、運営者側に大きな影響を与えるでしょう。
他にも多くのメリットがありますので、紹介します。
モバイルフレンドリー
「モバイルフレンドリー」はGoogleが定めたアルゴリズムの1つで、モバイルで快適な閲覧を行うことができるサイト（ページ）の検索順位を、それに対応していないサイトより優先するというものです。
モバイルフレンドリーに認識されるポイントの1つが「モバイルでの表示、閲覧がしやすいサイト」です。この条件を満たすためにGoogleがもっとも推奨しているのが、レスポンシブWebデザインなのです。
このポイントを満たす方法は他にもありますが、推奨されている方法ということもあり、特に効果が高い方法です。
「モバイルフレンドリー」とは？対応方法やチェック方法を紹介
SEOに効果的
モバイル端末での表示に対応させるために、表示も構造も比較的シンプルになりますし、URLのリダイレクトなどが必要ないためGoogleのbot（ボット）がクロールがしやすくなり、結果としてSEOの観点からも効果的な施策といえます。
また、URLが1つなのでリンクや共有をしやすく、ユーザーによってSNSなどで拡散する可能性も少なからず上がります。
クローラーについて詳しく知りたい方は以下の記事をご覧ください。
クローラーとは？その仕組みとクローラビリティを向上させる7つの方法
管理しやすい
それぞれの端末に合わせたサイトを別々に作ると、更新の際はそのすべてのサイトに対して更新作業を行う必要があります。この作業は想像以上にコストを肥大化させます。
しかし、レスポンシブWebデザインを使うと、同じURLの1つのサイトだけなので、更新の作業も1度のみで済みます。
レスポンシブWebデザインのデメリット
良いことばかりに感じるレスポンシブWebデザインですが、当然メリットだけでなく、デメリットも存在します。
メリットとデメリットを理解した上で、レスポンシブWebデザインにするか、他の方法でそれぞれの端末に合わせた表示をする方法を検討するかを決めると良いでしょう。
色々と縛りがある
PCでもモバイルでも同じURLであるため、表示の位置などを変えることはできても、コンテンツ自体の順番を変えるなど、大きな変更をすることができません。
また、制約の多いモバイルでの表示を優先させる必要がある場合が多いため、PCサイトに適したデザインにしたり、コンテンツの量や画像の数を減らすなど思い通りにサイトを作ることができないことが多くなります。PC用、モバイル用をそれぞれこだわったサイトにしたいという場合などは、それぞれのサイトを別に作成するという方法をとる必要が出てくるというわけです。
また、複雑の作業になるためHTMLやCSSの知識・技術を持たずにレスポンシブWebデザインにしようとすると、表示端末によっては思ったようにすることができず構成が崩れてしまうこともあり、Webデザイナー・エンジニアでもスキルによっては構築が難しいと感じることも多いようです。そういった理由からレスポンシブWebデザインによって構築に掛かるコストが下がるということはありません。ただ、PC用、モバイル用それぞれで別々のサイトを制作する場合も実質的に2サイト作ることになるため、コストはあまり大きく変わらないため、実際のところはデメリットとはいえないかもしれません。
作り方によって表示速度に影響が出る
レスポンシブWebデザインは作り方によって、画面の表示速度が変わってきます。特に画像の読み込み枚数によって表示速度が大きく変わる場合があります。モバイルでの表示を考慮して画像を軽くしたりすることも可能ですが、そうするとPCで表示した場合に画像が荒くなってしまったり、画像数を減らしすぎるとサイト自体がシンプルになり過ぎる、といった不都合が出てくる場合もあります。作り手のスキルによって、品質が大きく変わる可能性があるといえます。
サイトの表示速度は検索順位にも影響します。Googleの用意しているモバイルでの表示速度をチェックするツールに「PageSpeed Insights」というものがありますので、チェックすることをお勧めします。
レスポンシブWebデザインの作り方
レスポンシブWebデザインについて知ることができたら、実際に構築してみましょう。簡単にではありますが、対応の手順を紹介します。
レスポンシブWebデザインにする手順
- ビューポートタグを記述する
- ブレイクポイント（画面の切り替えポイント）を決めていく
- メディアクエリでモバイル用レイアウトを記述する
まずはviewport（ビューポート）タグをHTMLに記述し、端末のサイズに合わせて表示を自動で調節できるようにします。
これだけでは、PC用の画面を拡大表示するだけですので、決して見やすいページにはならないため、モバイルで画面を切り替える部分を決めて設定する必要があります。
この作業に最も時間がかかりますが、試行錯誤しながら一番ベストなブレイクポイントを見つけていくことが、本当に見やすいページを作るためには必要になります。数や値に制限はありませんので、じっくり取り組んでいくようにしてください。
最後にメディアクエリを使って、レイアウトを記述していきますが、この設定には「CSS内で記述する」「HTMLファイルのタグで設定する」という2種類の方法がありますので、自分が扱いやすい方法で行いましょう。
この他にもいくつかCSSを切り替える方法は存在しますが、最もスタンダードかつ安定的な方法であるメディアクエリを使用することをおすすめします。
またこれからサイトを構築する場合は、レスポンシブWebデザインに対応したテンプレートも多くありますので、利用すれば比較的簡単に作ることができます。その際、PCサイトより制約が多いモバイルの目線で作り始めると良いでしょう。
レスポンシブWebデザインの注意点
レスポンシブWebデザインを取り入れる上で、注意すべき点は多くありますが、特に重要な部分をまとめました。
モバイルフレンドリー
昨今ではGoogleによってモバイルフレンドリーかという視点が重視されるようになったこともあり、PCだけに対応したサイトを作っていればよいという時代ではなくなっています。
モバイルフレンドリーはSEOに影響を与えますし、レスポンシブWebデザインで様々な機器の画面サイズに対応できるようになるというのは、大きなメリットになります。
しかし、レスポンシブWebデザイン対応することに注力してしまって大切な部分を飛ばしてしまわないように注意しましょう。例えばサイトの中に必要な情報がきちんと入っていないという場合です。見やすさを重視することも大切ですが、内容が薄くなってしまっては何の意味もありませんし、ユーザーが求める情報がきちんと入っていないサイトはGoogleの根本的評価を下げることにもなりかねません。コンテンツを効果的にユーザーに伝える手段としてレスポンシブWebデザインを捉えると良いでしょう。
コンテンツの並び方を考える
PCやモバイルの画面サイズに合ったレイアウト・装飾で表示するのがレスポンシブWebデザインの特徴ですが、画面の大きさの違いはコンテンツや画像の見え方に大きく関わります。
PCサイトをメインに作ると特に、モバイルで表示した場合に想像とは違う表示になりやすいので、できるだけモバイルサイトをメインにコンテンツなどのレイアウトを考えましょう。
画像の枚数や、リンクボタンのサイズなども、モバイルで見やすく使いやすいことが、ユーザーにとって重要なポイントですし、場合によっては、PCサイトとモバイルサイトそれぞれでデザインを作る必要もあります。
コンテンツもただ縦に並べるだけにするのか、サイズを検討し横に並べる場合、いくつまでならうまく表示できるかなど、細かく考えます。
情報も重要な部分をモバイルでもきちんと表示できるようにしますが、補足的な部分をどこまで組み込むか、PCだけにするのかなど試行錯誤と自問自答を繰り返していくことになります。
そうすることで、無駄がなく重要な要素が伝わるサイトになり、さらにPCでもモバイルでも使いやすいページが完成します。
レイアウトとともに考えたい要素としてCTA(Call to Action)があります。
CTAはコンバージョン数を獲得するために必要な知識となりますので、詳しく知りたい方は以下の記事をご覧ください。
CV(コンバージョン/転換率)とは？種類と計算式を解説
CTAとは？コンバージョンとの関係と改善方法
まとめ：レスポンシブWebデザインとは
レスポンシブWebデザインについて解説しましたが、要点が伝わったでしょうか？内容をまとめると以下のようになります。
- レスポンシブWebデザインは、アクセスする端末に合わせて表示サイズを自動で変えることのできるサイトのこと
- 1つのURL、HTMLで管理できるため、更新時などの手間を減らすことができる
- モバイルフレンドリーにも対応できるため、SEO対策にもなる
- PCとモバイルの両方の表示に対応するため、デザインなどに制約が出てくる
- レイアウトなどに試行錯誤が必要だが、基本的にはタグを記述するだけで対応できる
多少の知識と技術が必要なため、実際に作業するためにはよく計画し、さらに詳しい方法を知った上で行う必要がありますが、作業自体は単純です。テンプレートを利用したり、じっくり試行錯誤したりして対応していきましょう。
特にこれから新たなサイトを立ち上げようとしている場合は、最初からレスポンシブWebデザインで構築してしまえば、その後の運営やSEO観点からもきっと有利になります。
