「レスポンシブ」とは？ホームページ制作で知っておきたい基礎知識

「レスポンシブ」とは？

ホームページを制作するにあたり、いざ下調べをしてみると、「レスポンシブ」という言葉をよく見かけるかと思います。あるいは、ホームページ制作会社の担当者からの見積提案書に記載されている文字を見て「レスポンシブって何？」となってしまったり。

この、よく見かける「レスポンシブ」という用語。これはWEBデザインの手法の一つの「レスポンシブWEBデザイン」の事を指す略称で、ユーザーが閲覧に利用しているデバイスや画面の横幅をキーにして表示デザインを変更する手法のことです。

PCでホームページを見ている時、ブラウザの横幅を変更するとデザインが変わるサイトを観たことがある方は多いでしょう。これはそのサイトが表示されている画面の横幅を基に表示デザインが変更されるように指定されているためです。例えば、いま見ていただいている弊社MH DESIGNS blogもレスポンシブデザインになっています。

もう少し詳しくご説明しましょう。

一昔前のホームページ制作は、PC用のページ、携帯用のページという風に各デバイスに合わせたHTML（表示する内容の構造が記載された本体）とその関連するファイルで制作されていました。
ですがこれは、ホームページを運用していく上で、たった一文字修正するにも各デバイス用のページやファイルを修正しなくてはならず、なかなか手間のかかる作業でした。

そこで、元のHTMLファイルは一つにして、そのファイルの表示をデバイスやブラウザの表示幅ごとにCSS（HTMLの内容をどのようにブラウザに表示するか等を指定するマークアップ言語）で制御しようという手法が誕生しました。
これが、「レスポンシブWEBデザイン」です。
現在、スマホの一層の普及やGoogleによるモバイルファーストインデックス（MFI）の推奨などにより、レスポンシブデザインは広く活用されています。
※モバイルファーストインデックス（MFI）とは：
Googleの検索エンジンのサイト評価基準の仕組みのひとつで、検索エンジンの評価の主軸を、PC向けページからモバイル向けページへと変更するというGoogleの方針のことです。

レスポンシブデザインって必要なの？

では、この「レスポンシブデザイン」、何故ホームページ制作にあたって必ずといっていいほど話題に出るのでしょうか。

これは、先にも述べたように、Googleが2016年にMFIの推奨という施策を発表したことが理由の一つです。
検索エンジンの評価の主軸をPC向けページからモバイル向けページへと変更するという施策ですが、これはつまり、モバイル用のページがない場合は検索結果の表示順位が下がるということになります。
となれば、モバイル向けページがない場合、新たにモバイル用のホームページを制作する必要が出てきますが、従来のデバイスごとにホームページを制作するという方法では、URLがそのサイトごとに変わることになります。
検索エンジンはURLの異なるサイトは別のサイトとして認識しますので、別URLの場合、モバイル用のアクセス数とPC用のアクセス数は、それぞれ別サイトのアクセス数としてカウントされてしまいますから、自社サイトの評価が分散してしまいます。
その点レスポンシブデザインであれば、どのデバイスからアクセスしても表示された媒体に合わせて最適の表示がなされます。これにより、同一URLで複数のデバイスサイトに対応することが可能となるのです。

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

レスポンシブデザインのことが分かったところで、次にレスポンシブデザインのメリットについて説明します。

ユーザーにとってどのデバイスでも見やすく、使い勝手のいいホームページが作れる

レスポンシブの一番のメリットはこちらでしょう。どのデバイスから見ても最適なレイアウトでホームページを閲覧・操作することが出来るということは、スマホが主流となってきている現在、非常に重要な要素です。
もちろんターゲットにもよりますが、アクセス数やコンバージョン率の向上を図るのであれば、モバイルユーザーにとっても見やすく快適に閲覧・操作できるホームページである必要があります。ホームページ制作にあたり、レスポンシブを採用することで、モバイルユーザーにとってもPCユーザーにとっても見やすく使い勝手のよいサイトを作ることが可能です。

URLを統一できる

デバイスごとにWebページを用意する場合、そのデバイスごとにURLを用意する必要がありますが、レスポンシブデザインの場合は、媒体の画面サイズに合わせて自動的に適切なサイズでの表示になるので、1つのURLで対応できます。
URLが1つにまとまっていると、「ユーザーによる閲覧数やシェア、外部サイトからのリンクなどが分散されない」というメリットが生まれます。つまり、PCからアクセスした場合でもスマホなどから閲覧した場合でも、同一ページであればどちらもそのページのアクセス数としてカウントされるというわけです。
これは、より多くのユーザーが閲覧・シェアなどをしているサイトとして検索エンジンに評価され、結果、検索上位に入りやすくなる可能性が高くなります。

Googleの検索エンジン対策である「MFI」や「モバイルフレンドリー」を満たせる

1つ目のメリットにも関連しますが、「モバイルフレンドリー」とは、モバイルデバイスでWebページを閲覧している人が不便を感じないようにする施策のことで、MFIともども、Googleが推奨している施策です。スマホなどのモバイル端末に対応しているサイトは、Googleから「スマホに最適化されている」と判断され、検索結果の上位に表示される可能性が高くなります。

まとめ

今回は「レスポンシブ」について、基本的な内容をご案内しました。
モバイルが主流となってきている現在、ホームページ制作をするにあたり、モバイル対応は必須といってもよい状況です。もちろん、レスポンシブデザインにもデメリット面も少なからずあります。
サイト制作の際は、どのような形でのモバイル対応が自社サイトに適しているのかも含めて検討するようにしましょう。
弊社MH DESIGNSは、もちろんレスポンシブデザインにも対応可能です。ご不明な点やご相談など、お気軽にお問い合わせ下さい。