レスポンシブデザインとは【非対応のWebサイトは危険です】

あなたのホームページ・Webサイトはスマートフォンに対応しているだろうか？

もしスマホ対応していないPC（パソコン）向けサイトであるならば、大きな機会損失を生んでいるはずだ。
そう断言できるほどにスマートフォンの普及率は伸び続けている。

総務省の発表データによると、20代・30代におけるスマートフォン利用率は90％を超えており、60代でも50％以上の方が利用しているのだ。

そこでこの記事では、スマホ・PCの両方に対応させるレスポンシブデザインについて徹底解説をする。これからホームページ・ブログ等のWebサイトを作ろうと検討中の方は是非読み進めて頂きたい。

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

レスポンシブデザインとは、閲覧者の使用するデバイス（端末）の画面サイズに合わせ、見やすいようにデザイン表示を切り替える制作手法である。

現在ご覧頂いている富山工房のホームページもレスポンシブデザインに対応しており、各デバイス（端末）によって下記のような見え方の違いが生じる。

一方、非レスポンシブデザインのWebサイトは、スマートフォンで閲覧すると下記のように表示される。

ご覧のように文字サイズが非常に小さく、読むことすら困難。

このようなWebサイトから問い合わせやサービス申し込みが発生することはない。

これからホームページやランディングページを制作するのであれば、レスポンシブデザインで制作する必要性がお判り頂けただろう。

スマホ対応≠レスポンシブデザイン

「スマホ対応」という言葉を耳された方も多いと思う。

多くの方が勘違いしがちだが、「スマホ対応」と「レスポンシブデザイン」はイコールではない。
レスポンシブデザインとは、Webサイトを「スマホ対応」させるための手段の1つにしか過ぎないのだ。

その他のスマホ対応させる手段として「セパレートURL」と呼ばれるテクニックもあり、レスポンシブデザインとの違いは下記の通り。

レスポンシブデザイン

1つのページでデバイス毎にデザインだけを切り替える方法

セパレートURL

PC向け・スマホ向けのページを別々に作り、アクセスしたデバイスに合わせて表示させるページを変える

また、スマホ対応ならどちらの方法でWebサイトを作っても一緒というわけではない。

その理由についても解説したいと思う。

Googleもレスポンシブデザインを推奨

Googleは、スマホ対応サイトの制作方法として、レスポンシブデザインを推奨している。
その理由はGoogle検索セントラル内で下記のように明記されている。

URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。

対応するパソコン用ページまたはモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、インデックス登録プロパティが正確にページに割り当てられます。

同じコンテンツのページをいくつも維持管理する手間が省けます。

モバイルサイトでよくある誤りに陥る可能性を抑えることができます。

ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。また、ユーザー エージェントに基づくリダイレクトはエラーが発生しやすいため、サイトのユーザー エクスペリエンスを損なうおそれがあります（詳細については、ユーザー エージェントの正確な検出をご覧ください）。

Googlebot がサイトをクロールするために必要なリソースを節約できます。レスポンシブ ウェブ デザインでは、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。異なる Googlebot ユーザー エージェントが何度もクロールしてコンテンツのすべてのバージョンを取得する必要はありません。Google によるクロールの効率が上がることは、間接的には、サイトのコンテンツがより多くインデックスに登録され、適切な間隔で更新されることにつながります。

Google検索セントラル

また、2015年4月にはモバイルフレンドリーアップデートが実施された。

このアップデートにより、スマホ対応していないWebサイトはモバイル検索結果での掲載順位を下げられるようになった。

Google は全世界でモバイル フレンドリー アップデートを開始します。これにより、モバイル版の検索結果では、モバイル フレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。

Googleウェブマスター向け公式ブログ

検索順位の低下は、Webサイトのアクセス数に大きく影響する。

サイト運営者にとって、もはや看過できないものとなったのだ。

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

また、レスポンシブデザインにはメリットだけでなく、いくつかのデメリットも存在する。

デメリットについてもご説明したいので、理解した上で実装するようにしよう。

制作費・制作期間

レスポンシブデザインのWebサイトは、各デバイス毎のデザインを組み込む必要があるため、その分だけ制作期間が長くなる。

ページ数やデザインによって工数も異なるため、一概に何日伸びるとは言えないが、最悪の場合は倍近くの制作期間を要すると考えておくべきだ。

また、制作期間が延びるということは、当然制作費も高くなる。

制作企業によって費用は異なるが、相場ではPC専用サイトにプラス30%〜50%の追加費用が掛かると考えておこう。

例：PC専用サイトの制作費が10万円であれば、レスポンシブデザインにすることで3万円〜5万円の追加費用が発生する。

表示速度が遅くなる

また、レスポンシブデザインにすることで、サイトの表示速度が遅くなる可能性が高い。

サイトの表示速度が遅くなる原因は、PC用とスマホ用の画像全てを読み込んでしまうことにある。

レスポンシブデザインでは一般的に、画面の広いPC用と手のひらサイズのスマホ用では別サイズの画像を表示させている。スマホ用とPC用で共通画像を使うと、表示崩れが起きやすい為である。

表示速度が遅くなることで、ユーザーの離脱率が大幅に上がってしまう。

Googleのディープラーニングを使用した調査によると、下記のような数値を予測している。

表示速度が1秒から3秒に落ちると、直帰率は32%上昇
表示速度が1秒から5秒に落ちると、直帰率は90%上昇
表示速度が1秒から6秒に落ちると、直帰率は106%上昇
表示速度が1秒から7秒に落ちると、直帰率は113%上昇
表示速度が1秒から10秒に落ちると、直帰率は123%上昇

海外SEO情報ブログ

また、予測ではあるがこの数値の正確性は90％とされている。
以上が、レスポンシブデザインにおけるデメリットである。

だからといってレスポンシブデザインを利用しないのはナンセンスだ。
上記のデメリットが存在することを理解した上で、制作会社側と相談しながら表示速度の改善などを行うのが正しい選択である。

まとめ

以上、レスポンシブデザインについて解説させて頂いた。

現在では、ネット閲覧者の70％近くがスマートフォンを利用している。

また、若者はもちろんのこと、60代以降の利用者も急増しているため、どのような年齢層をターゲットにしたビジネスであれ、ホームページを作る際は必須の対策である。

富山工房でお作りするホームページももちろんレスポンシブデザイン対応であるため、お困りの方は是非ご相談いただきたい。