スマホ対応の格安ホームページ制作RBRのブログ

制作実績
  • お申込み
  • お問い合わせ
ホーム > ブログ > スマホ・タブレット対応 > Google推奨!レスポンシブwebデザイン

ブログ

blog

2015.06.13

Google推奨!レスポンシブwebデザイン

レスポンシブWebデザインキャプチャ

Webサイトは今やパソコンだけで閲覧されるものではなく、スマートフォンやタブレット端末の急速な普及により、様々なデバイスで閲覧されるようになりました。よって、パソコン向けの従来型のWebサイトに加え、スマートフォンやタブレット端末の小さなブラウザでも見やすいようにデザインされた、それぞれのデバイス専用のWebサイト制作も必須になります。

しかし、デバイス毎にレイアウトの違うHTMLファイルを複数用意していると、とてもコストが高くつきます。さらに、一ヵ所の簡単な修正や追加でも、それぞれのHTMLファイルを全て一つずつ手作業で行わなければならなく、管理していくのが大変です。

そこで、近年よく使用されているのが、Googleも推奨している「レスポンシブWebデザイン」という手法です。

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

PC、タブレット、スマートフォンなど、異なる複数のブラウザ(画面)サイズを表示判断基準にし、Webサイトのレイアウト・デザインを柔軟に調整する手法のことです。

通常、デバイス毎のレイアウトが違うHTMLファイルを複数制作しますが、レスポンシブWebデザインでは、単一のHTMLファイルをCSS3(Media Queries)で制御し、ブラウザサイズに対応したレイアウトデザインに調整するので、PC・タブレット・スマートフォンページを同時に制作することになります。

レスポンシブWebデザインのチャート

現在ご覧いただいているこのWebサイトも、レスポンシブwebデザインで作成しています。一つのHTMLファイルをCSS3(Media Queries)により、どんなブラウザサイズで閲覧しても、適正なレイアウト・デザインで表示されています。

RBRレスポンシブキャプチャ

パソコンから閲覧していただいている方は、画面サイズをゆっくりスマートフォンサイズまで縮めてみてください。実際にタブレットやスマートフォンなど、様々な表示サイズごとにレイアウトが可変していく様子をご覧いただけます。

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

しかし、「レスポンシブWebデザイン」には、やはりメリットばかりではありません。では実際にレスポンシブWebデザインを導入するにあたり、代表的なメリット・デメリットをまとめました。

メリット

ワンソースだから管理がしやすい

サイト完成後のテキスト修正や画像追加などのメンテナンス作業が、一つのHTMLファイルだけで完了します。よって作業時間が節約され、ミスのリスクも大幅に減少します。

SEOに有効

Googleは、スマートフォンに最適化されたサイト構築方法として、「レスポンシブWebデザイン」を推奨し、そして、SEO的にも有効だと述べています。

スマートフォンに最適化されたサイトを構築する際に、Googleは、次の 3 つの構成をサポートしています。
1.レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
2.以下省略…

レスポンシブ・ウェブデザインを使用すると、次のような利点があります。
・PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
・ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。

Googleウェブマスター向け公式ブログ「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法 」より

URL統一化

URLが統一されることで、リンクやシェアがしやすくなります。

デメリット

サイトが重くなる

1つのHTMLファイルを使用するため、スマートフォン・タブレット表示時に、見えない部分に必要のない要素(PC用の画像・CSSをPCサイトと同様に読み込み、読んだ上で”display: none;”で非表示に)が読み込まれてしまい、ページの読み込み速度が低下する可能性があります。

設計やデザインに手間がかかる

多くのデバイスに対応させるため、切り替えるレイアウトそれぞれのデザインが必要であったり、HTMLコーディングの構築がとても複雑になり、時間がかかってしまいます。

PC以外の端末で、PC用サイトの表示ができない

スマホやタブレットであえてPC用サイトを表示したい場合でも、ブラウザサイズに対応したレイアウトデザインに調整されてしまうので、スマホではスマホサイズ以外のレイアウトでの表示が不可能になります。

最後に

最後になりますが、レスポンシブWebデザインを使用する上での注意点を述べておきます。それは、レスポンシブWebデザインはあくまで表示をウィンドウサイズに合わせて最適化する手法で、すべての状況に万能ではないということです。ユーザーの利用シーンがモバイルとPCで大きく変わる場合など、レスポンシブWebデザインが向いていない場合も多々あるので、自分のWebサイトの目的をしっかり理解し、最も最適な手法を選択することが大切です。

私どものようにスマホ・タブレットに対応したホームページを低価格で提供する場合、ワンソースでデバイスの違う複数の端末表示に対応してくれる「レスポンシブWebデザイン」という手法は、デメリットを考慮してでも取り入れたいとても魅力的なもので、全力で使用しています。