スマートフォンがあるおかげで、僕たちは通勤電車の中でもインターネットがスイスイできます。それまでは、何か気になることができてネットで調べようと思っても、家や職場のパソコンを開くまで待たなければなりませんでした。

その間に調べごとを忘れてしまったりして、結局そのままになってしまったこともよくありましたよね。気になったことをスマホですぐに調べられるようになって、僕たちの生活の質は間違いなく格段に上がりました。

レスポンシブ対応のWebデザインとはどんなもの？

ところがスマホの誕生によって、Webデザイナーの間に厄介な問題が1つ生まれました。ホームページをスマホで表示させるとデザインが崩れてしまって、小さな画面にコンテンツが収まりきらないのです。

あなたも当時のことを覚えているかもしれません。画面から大きくはみ出たページを縦横スクロールしながら読んだり、逆に無理に小さな画面に押し込められたページをピンチアウトして、文字を読めるように大きくしたり…

この問題に対応するために、かつてのデザイナーはPC版とスマホ版の2つのビジネス用Webサイトを作成して対応していました。でも、スマホは機種によって画面のサイズが違います。Androidでは「大画面」をウリにする機種が出てきたり、さらにiPadのようなタブレットが出てきて、タブレットもiPad ProとiPad miniのようにディスプレイの大きさが違っていたり…

こうなると、デザイナー側もどのように対応すればいいのか、わからなくなってしまいますよね。すべてのデバイスに対応させるために1つ1つサイトを作っていたのでは、いったい何種類のサイトが必要になるのか、わかったものじゃありません。

この問題に解決の兆しが見えてきたのは、2010年頃…レスポンシブ対応デザインの誕生です。このデザインの登場によって、デザイナーは1つのWebサイトでどんな端末にも対応できるようになりました。

そのレスポンシブ対応デザイン、どのようにして数々のデバイスに対応しているのか、気になりませんか？その答えは、画面の解像度（実際は画面の横幅）に応じてレイアウトを変更するようにプログラムすることです。通常パソコン、タブレット、スマホの3パターンのレイアウトを用意しておいて、使われた端末の画面の解像度に応じて最適なレイアウトに切り替えるようになっています。

デバイス毎にいくつもWebサイトを用意しておくとなると、そこに多くのお金をかけられる大きな会社にしかできそうにありません。でもレスポンシブ対応デザインの登場によって、同じソースコードであらゆるパターンに対応できるようになりました。その結果、僕たちのようなフリーランスや中小企業にとっても、独自のWebサイトを管理しやすい環境が整ったのです。

Super Clear Contentsのレスポンシブデザイン：Image made by Am I Responsive?

Webサイトをレスポンシブ対応にする3つのメリット

レスポンシブ対応デザインの良いところは、誰でもWebサイトを管理しやすくなったことだけではありません。このレスポンシブ対応デザインには、Googleなど検索エンジンからのお客さんを呼び込む、SEO対策としての効果があることがわかっています。

具体的にどんな効果があるのかというと…

1. スマホやタブレットから多くのトラフィックが期待できる

The Guardianの報告によると、モバイル端末でのウェブ閲覧の割合は2009年から順調に増加し、2016年にはスマホやタブレットでの閲覧が51.3%と、パソコンでの閲覧(48.7%)を上回りました。この流れを受けて、Webサイト開発者の注目が一気にモバイル端末に傾きました。今はモバイル端末での使い勝手を追求することが、業界のスタンダードになっています。

実際、スマホで見たときにグチャグチャに表示されるWebサイトでは、お客さんを集められません。デザインの崩れたページを見た多くのお客さん一瞬で違和感を感じ、すぐにブラウザの「戻る」ボタンをクリックして別のサイトを探すことでしょう。そんなことが繰り返されると、GoogleはそのWebサイトを「お客さんの役に立たないサイト」と認定して、検索順位を大きく下げてしまうのです。

レスポンシブ対応Webサイトなら、そのようなお客さんの流出を防げます。Webサイトがきちんとお客さんを引き止めてくれて、適切なコンテンツへ誘導してくれます。多くのお客さんがそのWebサイトに留まってくれて、その滞在時間が長いほどGoogleに「役に立つサイト」と認識されて、検索順位が上がりやすくなるのです。

2. データの読み込み時間を短くできる

一方、Googleでもこの傾向を受けて、2018年7月からモバイル端末でのページ表示速度をランキング要員の1つとして正式に採用しました（Google スピードアップデート）。これ以降、スマホやタブレットでの表示速度があまりに遅いWebサイトは、検索順位を大きく下げてしまう可能性が出てきました。

iPhoneのような小さいディスプレイに、パソコンのディスプレイ用の大きな画像やビデオを表示させようとしたら、どうなるでしょうか？きっと重たいデータを読み込むために、すごく時間がかかってしまうことでしょう。そしてせっかく読み込みが終わっても、画像が画面に収まりきらなくて、お客さんはガッカリするのではないでしょうか。

レスポンシブ対応デザインでは、使っているデバイスのディスプレイに合わせて画像データを自動で圧縮してくれます。その結果、データの読み込み時間が短くなってレスポンスが早くなりますし、表示される画像もディスプレイのサイズと一致して、お客さんを困惑させることがありません。

3. 重複コンテンツが避けられる

重複コンテンツとは、ざっくり言うと他のWebサイトにある記事などをそのままコピペしただけのコンテンツのことです。このようなコンテンツは著作権の問題もありますし、Googleもこのような悪質サイトにペナルティーを与えて、最悪そのサイトを検索結果画面(SERPs)に表示させなくしてしまいます。

でも実は、この重複コンテンツの問題は思ったより複雑です。というのは、Webサイト管理者に悪意が全くなくても、そのコンテンツが重複コンテンツと判断されてしまう場合があるからです。

例えば冒頭に挙げたような、PC版とスマホ版の2種類のWebサイトを作る場合。この場合、むしろ2種類のWebサイトでコンテンツが大きく違ってはいけません。両方でコンテンツが全く同じか、わずかに違うくらいにしておかないと、お客さんが混乱してしまいます。こんな場合でも、Googleは両方のサイトを比較して重複コンテンツと認定してしまう可能性があるのです。

レスポンシブ対応Webサイトなら、こんなトラブルもあっさり解決です。ただ普通にブログ記事を書いたり、商品ページを作ったり…ほかに特別なことをしなくても、使う端末に応じて最適なデザインを勝手に選んで表示してくれます。

WordPressではレスポンシブ対応デザインが当たり前に

もう最近はレスポンシブ対応デザインの有用性がデザイナーの間で周知されていて、WordPress用テーマでは有料・無料を問わず多くのレスポンシブ対応テンプレートがリリースされています。そのせいか、今はスマホで見てデザインが崩れてしまうWebサイトを探す方が難しくなってきた感じがします。

このように、レスポンシブ対応デザインは現時点でWebサイト構築におけるほぼ必須事項になっています。あなたがWordPress初心者で、まだ何が何だかわからない状態でも、とりあえず「レスポンシブ対応テーマ」をググって、気に入ったものをインストールしておけば間違いはないでしょう。

関連記事：使ってから後悔しないために…WordPressテーマを選ぶ7つの基準
初心者でもできる！お客さんに好まれるWebデザインの3つの改善案
副業や個人事業主のホームページ制作にWordPressがおすすめの理由