最近よく聞くレスポンシブデザインって何？
今更ですが、レスポンシブデザインとはどのようなサイトを指すか、ご存知でしょうか。
まず、このコラムサイトでもWEBサイトのスマートフォン対応が重要であることはよくお伝えしていると思います。
スマートフォン利用者が急増している現在、どんなデバイスからホームページを見たときにも見やすいレイアウトにしておくことが大切ですが、そうしたことを考える上で「レスポンシブデザイン」がスタンダードとなってきました。
そして、この「レスポンシブデザイン」はGoogleが推奨しているものでもあります。
しかし、単純にGoogleが推奨しているからという理由で取り入れるのではなく、レスポンシブデザインについて、メリットデメリットや何が違うのかなどを把握した上で導入を検討するようにしましょう。
Contents
レスポンシブデザインとは
レスポンシブデザインとは、画面のサイズに依存せずにPC・スマートフォン・タブレット、どの画面でも見やすくWEBサイトを調節して最適な表示にすることです。
PC・スマートフォン・タブレットなどデバイスに関わらずそれぞれのデバイスに合わせたレイアウトに自動で表示を切り替える仕組みを持っています。
また、レスポンシブデザインは、「レスポンシブ対応」や「レスポンシブWEBデザイン」と呼ばれることもあります。
レスポンシブデザインが広まった理由
レスポンシブデザインが広まった背景には、スマートフォン・タブレットの普及が関係しています。
前述の通り、近年PC利用者よりもスマートフォン利用者が増えており、WEBサイトのスマートフォン対応が重視されているのでそれぞれのデバイスに適応したWEBサイトが必要になっています。
このことから、各デバイスでの表示に適応できるレスポンシブデザインが注目され、広まっています。
レスポンシブデザインのメリットデメリット
それでは、レスポンシブデザインにはどのようなメリットデメリットがあるのか見ていきましょう。
メリット
- 管理がしやすい
- シェアされやすい
- ユーザービリティの向上
- SEO効果が分散されない
- 検索結果で上位表示が狙いやすくなる
レスポンシブデザインでは、HTMLが一つなので複数回の作業が不要です。
そのため、更新作業やメンテナンスが楽になり工程を最小限にすることができます。
PCとスマホでサイトが分かれていた場合、それぞれを構築する必要があり別々に更新・メンテナンスが必要になります。
URLが統一されることによって、シェアされやすくなります。
例えば、スマホで閲覧していたWEBサイトを友人にも共有するためにURLを送った時に、送られてきた友人がPCなど別のデバイスでURLを開くと、見にくさや操作にストレスを感じてしまいます。
上記のような場合、ユーザーに合わせて、異なるURLを送らなければいけない手間が生まれてしまいます。
しかしURLが統一されていれば、ユーザーのデバイスに合わせて、表示が切り替わるため、シェアする際の手間がなくなります。
スマホの小さな画面で見た場合にも、デバイスに合わせて表示されるのでユーザーにとって見やすく、使いやすいサイトになります。
URLが統一されていることで、デバイスに関わらず、一つのページとして検索エンジンに認識され、リンクの効果が高まりやすいことも上位表示につながりやすくなります。
URLが別々の場合、被リンクが分散されてSEO効果が弱くなってしまう可能性があります。
Googleではレスポンシブデザインを推奨しており、Googleの検索順位決定要因に関わる、モバイルフレンドリー・モバイルファーストインデックスにレスポンシブデザインは対応しています。
また、Googleではレスポンシブデザインのメリットを下記のように述べています。
引用元：https://webmaster-ja.googleblog.com/2012/06/google.html
レスポンシブ・ウェブデザインを使用すると、次のような利点があります。
PC 用のページとモバイル用のページを単一の（同一の） URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。
デメリット
- スマホでの読み込みに時間がかかってしまうことがある
- デザインに制限が出てしまう
- ガラケーには対応していない
- 工数、コストがかかる
レスポンシブデザインでは、デバイスに関わらずWEBサイトを表示できます。
これがメリットでもある一方で、スマホで閲覧する時でもPCサイトと同じデータを読み込むことになるので読み込みが完了するまでに時間がかかってしまうことがあります。
PCではスムーズに表示される画像や動画などもスマホの場合、読み込みに時間がかかります。
そのため、データ容量が大きいものを使い過ぎないようにするといった対応が必要です。
例えば鮮明な画像を使おうと思って容量の大きな写真データを使う、動画を埋め込むなどが複数あると読み込みまで時間がかかってしまうことでしょう。
パソコンで開く場合には綺麗に表示されるのですが、そのままスマートフォンで表示する場合には注意が必要です。
レスポンシブデザインはHTMLが一つなので、PCとスマホで大きくコンテンツの配置を変えたり、各デバイスごとにデザインを大幅に変更することはできません。
フレックスボックス（display:flex）を利用したデザインでカラム（表示順）を入れ替えたりすることはできますが、最初から別のものとして制作する場合より変更の度合いは小さくなります。
また、これはご質問をいただくことが非常に多いのですが「社員Aのスマートフォンと、私のスマートフォンとパソコンで見た時に改行の位置が違う」ということ。
スマートフォンがiPhoneなのかアンドロイドなのか、画面のサイズはどうなのか…レスポンシブデザインではそれぞれのデバイスできちんと表示されるように最適化されていきます。
そのため、表示する端末によって例えば改行の位置やコンテンツの幅が変わることがあります。
これはエラーではなく、どの端末でもスムーズに表示できるようにしてある仕組みのためです。
レスポンシブデザインは、スマホやタブレットには対応していますが、ガラケー（フィーチャーフォン）には対応していないので、必要な場合には別でサイトを作成しなければいけません。
同じURLで表示され、どんなデバイスで開くときも最適化されて表示される。
これだけを聞くと「１つサイトを作れば良いのでは？」と思うかもしれません。
しかし、その裏側では表示されるデバイスのサイズによって綺麗に表示できるように工夫がされています。
スマートフォンの場合はこの設定で表示、パソコンの場合はこの設定を表示…CSSと呼ばれる部分ですが、デバイスごとに制作する必要があるのです。
そのため、デザインやコーディングというサイト制作における工数がかかってしまいます。
従って、思っていたよりもコストがかかってしまうケースもあるのです。
レスポンシブデザインが向いているサイトは？
レスポンシブデザインには、デメリットもあるもののメリットの方が大きいと感じます。
しかし、場合によってはレスポンシブデザインにこだわらなくても良いこともあります。
レスポンシブデザインに向いている場合
- 集客をメインとするWEBサイト
- サイトの内容を修正したり、更新頻度が高い場合
- SNSでのシェア数増加を狙う場合や若年層をターゲットユーザーとしているWEBサイト
- これから新しく制作するWEBサイト
前述の通り、レスポンシブデザインはSEOにおいても期待ができます。
もちろんしっかりと施策に取り組んだ場合ですが…。
そのため、集客を目的としているサイトの場合、レスポンシブデザインに向いていると言えます。
レスポンシブデザインであれば、一度の修正・更新作業でPC・スマホ・タブレットのデバイス全てに対応されます。
デバイス別にサイトを更新・維持していく手間がなくなり、運用中の工数削減が可能です。
そのため更新頻度が高いサイト、またその作業に時間をあまり割けない場合にはレスポンシブデザインはおすすめです。
レスポンシブデザインは各デバイスに適した表示が可能、かつURLが１つですむのでSNSでのシェアもしやすくなります。
シェア数増加、またそれによるフォロワー数の増加などを狙っているサイトは、向いているでしょう。
このコラムで先日ご紹介したモバイルファーストインデックスがデフォルトで適用されますという記事。
新規でGoogleにインデックスされるサイトはレスポンシブデザインにすることで制作の工数を削減することにもなります。
レスポンシブデザインにこだわらなくても良い場合
- SEOの優先順位が低いWEBサイト
- ターゲットユーザーがPCを利用することが多い場合
例えば対面での販売、集客がメインの商品・サービスであれば、SEOの優先順位は低いと思います。
なので、そのような場合はレスポンシブデザインにこだわらなくても良いでしょう。
基本的にPCを利用する場面が多いユーザー、スマホをそれほど利用しない世代のユーザー、WEBサイトへのアクセスがPCからが多い場合などもレスポンシブデザインにこだわらなくて良いといえます。
まとめ
レスポンシブデザインはGoogleが推奨していることや、URLが一つに統一されることによるメリットなど良い部分が多く感じられますがデメリットがあることも覚えておきましょう。
WEBサイトの目的やユーザーが使用しているデバイスなども踏まえてユーザーにとって使いやすいサイトとなるように最適なデザイン・構成を選択することが必要です。