レスポンシブWebデザインとは?【スマホ対応サイトの切り札】

更新日:2017年04月06日 | 公開日:2017年03月21日

パソコン(PC)だけでなく、スマートフォンやタブレットといったモバイルツールなど、インターネットを利用するための端末の種類は、かつて考えられなかったほどに多様化しています。いわゆるマルチデバイス化です。

とりわけ、スマホ利用者の伸びは著しいものがあります。

しかし、スマートフォンは画面の大きさや操作性がPCとは全く違うため、PC用のサイト(ホームページ)にアクセスすると「開くのに時間がかかる」「画像や文字が小さくなったり、途切れたりして見づらい」といった問題が起こりがちです。

PC用とモバイル用に別々のサイトを立ち上げている企業もたくさんありますが、制作だけでなく管理運用面での負担が決して小さくはありません。

このため、複数のサイトを立ち上げることなくPCからモバイルツールまで幅広く対応できる手法として注目を集めているのが、「レスポンシブWeb(ウェブ)デザイン」です。

ここではレスポンシブWebデザインについて、他の手法との対比も交えながら、分かりやすく説明します。

レスポンシブWebデザインは「レスポンシブ対応」「フレキシブルwebデザイン」などという言い方もされます。また、レスポンシブWebデザインで制作されたサイトを「レスポンシブ(デザイン)サイト」と表記することもあります。
サイト制作やデザインと関連して、「レスポンシブ」「フレキシブル」というキーワードが使われていれば、ほとんどは「レスポンシブWebデザインまたはそれを使ってつくられたサイト」に関する内容と判断して問題ないでしょう。

1. モバイルフレンドリーは不可欠!

まず、日本でマルチデバイス化がどの程度進んでいるのかを確認しておきます。

2015年の日本におけるインターネット利用者数は10,046万人(総務省「平成27年通信利用動向調査」)で、この数年はほぼ横ばい状態にあります。

一方、利用している端末に注目すると、PC(56.8%)の割合が最も高いもののスマートフォン(54.3%)と差はわずかです。さらに、タブレット(18.3%)を合わせた「モバイルツール」の割合は7割を超えています。

さらに特徴的なことは、スマートフォンの利用割合に年齢層で明らかな違いがあることです。20歳台は91.3%、30歳台は84.6%となり、いずれもパソコン利用を10ポイント以上引き離しています。また、40歳台(73.6%)でも初めてパソコン利用(71.5%)を上回りました。

1-1. マルチデバイス対応とは

インターネットに接続するデバイスは、かつてはほとんどがPCでした。その後、携帯電話からスマートフォン、さらにはタブレット端末やテレビ、ゲーム機器など、インターネットにアクセスするデバイスは多様化の度合いを高めています。

こうした、画面サイズや機能の異なる複数のデバイスでホームページを見られるようにすることが「マルチデバイス対応」です。

初期のマルチデバイス対応は、基本的に既存のPCサイトを他のデバイスでも見られるようにしただけでした。ですから、画面を開くまでに時間がかかったり、画像やテキストが全部は表示されなかったりということがありました。

当然の流れとして、デバイスに応じたサイトのつくり分けもされるようになりましたが、1人が複数のデバイスを使ってインターネットにアクセスすることは想定されていませんでした。「使うデバイスによってインターネットを利用する人の属性は異なるので、それに対応してコンテンツを提供する」という考え方だったのです。

たとえば、「PCを使う人はITについてある程度の知識もあってガッツリ調べるが、ケータイを使う人はPCの操作にも慣れておらず簡単な調べものをする程度」といった感じです。

もちろん、そこには固定回線とモバイル回線の通信速度の違いという問題(カベ)もありました。逆に言えば、モバイルツールの利用が急速に進んだ大きな要因の一つが、Wi-Fi や4G回線が浸透し、モバイルでも相応の通信速度が達成できるようになったことであるのは確かです。

現在では、「家か会社のPCでレストランを探して予約し、お店の近くに来たらスマホで場所を確認する」というように、1人がシチュエーションに応じてデバイスを使い分けてインターネットにアクセスすることが当たり前になっています。

こうした変化に伴い、使用するシーンとデバイスに応じて最適化されたコンテンツを提供する必要があるという考え方が生まれてきました。

さらに、インターネットを利用するための主要なデバイスは、世界的にPCからスマートフォン(モバイル)へのシフトが急速に進んでいることから、スマホサイトを最重要視する企業も出てきています。

そこまでするのは極端すぎるという見方もありますが、「モバイルフレンドリー」なサイトの構築が不可欠であることは間違いありません。

1-2. マルチデバイスに対応する手法

大きくは、デバイスごとに専用コンテンツ(サイト)をつくる手法と、1つのコンテンツデータ(ワンソース)で複数のデバイスに対応する手法に分けることができます。

専用サイトの構築

PC、スマートフォン・タブレット、フィーチャーフォンなど、デバイスに合わせて個別にサイトをつくる手法です。

デバイスごとにコンテンツの内容やデザイン、レイアウトを決められるので、閲覧性や操作性に優れたサイトを構築できます。ユーザーサイドから見たデバイスごとの最適化ということでは、これに勝るものはありません。
ただし、個別に構築・管理をするため、初期投資が大きくなるほか、更新作業など運用時の負荷も高くなります。また、デバイスごとにURLが異なるため、SEOについては不利になります。

次に、1つのコンテンツデータで複数のデバイスに対応する手法です。これには、ベースとなるコンテンツをデバイスに合わせて変換あるいは切り出しする手法と、画面幅に合わせたデザインに出し分ける手法があります。

自動変換

今あるサイト(主にPC向け)を外部サーバーのサービスなどを使って、スマートフォン向けなどに自動変換する手法です。

スマホで表示できるサイトを簡単につくることはできますが、機械的な変換のため、デザインの完全な再現やデバイスに合わせた最適化は難しく、高いクオリティは期待できません。また、デバイスごとにURLが異なる場合には、SEOについて不利になります。

CMSの活用

マルチデバイスに対応したCMS(コンテンツ・マネジメント・システム)を利用する手法です。サイトを一元管理しながら、デバイスに応じたデザイン・レイアウトでコンテンツを出し分けることができます。URLを一本化することもでき、その場合は高いSEO効果が期待できます。

ただし、すべてのCMSがマルチデバイスに対応しているわけではありません。新たにマルチデバイスに対応するCMSを導入・構築する場合には、相応の費用と期間が必要になります。

レスポンシブWebデザイン

ワンソースでコンテンツの出し分けをせずに、1つのURLでマルチデバイスに対応する手法です。
詳細は次項以下で説明していきます。

2. レスポンシブWebデザインの概要

繰り返しになりますが、ワンソースでコンテンツの出し分けをせずに、1つのURLでマルチデバイスに対応できることが、レスポンシブWebデザインの最大の特徴です。

このため、「モバイルフレンドリー」を重視するGoogleは、スマートフォンに最適化されたサイト構築の手法として推奨しています。これもレスポンシブWebデザインが大きな注目を集めている理由の一つです。

そもそも、レスポンシブWebデザインはどのようにしてワンソースでマルチデバイスに対応しているのでしょうか。

簡単に言ってしまえば、デバイスに関係なく画面サイズ(幅)に反応し(レスポンシブ)、それに合わせて見た目(デザイン)を変えて表示するというものです。論より証拠、実際にレスポンシブWebデザインで制作されたサイトをご覧いただくのが、特徴を理解するための早道でしょう。

実例に見るレスポンシブWebデザイン

以下で紹介する画像は、PCで内閣府のホームページを見ながら、表示するブラウザの幅を変えていったものです。

(a)の画像がPCのブラウザに対応したサイズです。ここから段々と画面の幅を狭めていくと、(b)の画像に切り替わります。タブレットに対応したサイズで、(a)では画面上方・右側にあった「大臣・副大臣・大臣政務官」「内閣府の政策」といったリンクのためのボックスが、アイコン付きで画面中央に移動していることがわかります。

(c)がスマートフォン対応のサイズで、表示形式も変化していますが、ひと目でわかる違いは中央に揃えたデザインになっていることでしょう。

画像(a)

出典内閣府

画像(b)

出典内閣府

画像(c)

出典内閣府

この3つの画像を比べて見ると、ワンソースでつくったものの表示を、幅に合わせて変更しているということがよくわかるのではないでしょうか。
デザインを練り込んだサイトには、一見しただけではこうした変化がわからず、専用サイトを立ち上げているように見えるものもあります。

とはいえ、サイトを見ていちいちレスポンシブWebデザインでつくられているかを確認するのは面倒だと考える人もいることでしょう。
RESPONSIVE WEB DESIGNMUUUUU.ORGWEBデザインギャラリーといったギャラリー・リンク集のサイトには、レスポンシブWebデザインのサイトだけをまとめたページがありますので参考にしてください。

3. レスポンシブ化のメリット/デメリット

それでは、レスポンシブWebデザインを導入した際のメリット/デメリットを詳しく見ていきましょう。

3-1. メリット

大きく括れば「ワンソース」であることに集約されますが、ここでは構築/管理・運営とユーザー効果という2つの視点から見ていきます。

構築/管理・運営

複数デバイスに対応できるため、テキストや画像の簡単な差し替えなどのレベルのメインテナンスは容易になり、作業負担やミスの発生を軽減できます。また、デバイスごとにデザインやユーザーインタフェースを変える必要がなくなります。すべてのデバイスで同一の情報を使用するため、WEBで提供する情報の管理や整理がしやすくなります。

ユーザー効果

Googleがモバイルフレンドリーなサイトの構築手法の一つとして推奨しており、高いSEO効果が期待できます。

1つのURLでPCとモバイルに対応するため、ユーザーはシェアやリンクをしやすくなります(PCでインターネットを見ていた人がTwitterでURLを共有してきたけれど、スマホでクリックしたらPC用サイトだったため、開くのに時間がかかり離脱してしまったという経験ありませんか?)。

ちなみにGoogleのサイトでは、レスポンシブWebデザインを使用するメリットとして以下の点を挙げています。

3-2. デメリット

デメリットは基本的にメリットと裏表の関係にあると言えますが、その中でもまず頭に入れておくべきことは次の2点です。

● 日常のメインテナンスレベルの作業負荷や費用は低減できますが、多くのデバイスに対応させるため、構築段階での作業が複雑になり、費用もかさみます。作り方や内容によっては、個別対応以上に初期投資がかかる可能性もあります。

● ワンソースですべてのデバイスに対応するため、それぞれのデバイスに合わせた細かい配慮をすることは難しく、最大公約数的なものにならざるを得ません。

また、次に挙げるような「画面の幅に対して表示を最適化」することに起因する問題についても注意する必要があるでしょう。

● PCとモバイルで異なるレイアウトにした場合、見えない部分の要素も読み込まれてしまい、動作が重くなる可能性があります。

● スマートフォンやタブレットからPCサイトを見ることはできません。

● 設計の仕方によっては、タブレットで表示する場合に縦向きと横向きとでレイアウトが変わってしまい、操作を混乱させてしまう可能性があります。

● PCブラウザの拡大機能に反応して、モバイル用の表示になってしまうことがあります(下の画像参照)。

このほか、古いブラウザやフィーチャーフォンへの対応は難しいということも、想定しているターゲットによっては当面のネックとなる可能性があります。

出典内閣府

【まとめ】レスポンシブ化は自社の状況に応じた見極めが大切

サイト制作のなかでレスポンシブWebデザインが注目を集めている背景と、導入した際のメリット/デメリットを説明してきましたが、改めてポイントを整理しておきましょう。

「ワンソース」でマルチデバイスに対応でき、高いSEO効果も期待できるという点で、大変魅力がある手法です。

一方で、構築の複雑さやそれに伴う初期投資の大きさなどのデメリットもあります。また、最適化という面でも、マルチデバイスに対応するための「万能の処方箋」というわけではありません。

ですから、導入するかどうかを判断するにあたっては、メリット/デメリットを会社の状況に照らし合わせて慎重に見極めることが重要です。

もし、あなたの会社が「ITやwebサービスに詳しい人材がいない」「頭ではメリット/デメリットを理解できても見極めが難しい」という状況でしたら、レスポンシブWebデザインを使ったサイト構築で実績がある制作会社の利用を検討してみてはいかがでしょうか。

「もう少し詳しくレスポンシブWebデザインについて知っておきたい」「実績のある制作会社がわからない」という場合でしたら、ぜひ日本最大級の業者比較サイト「アイミツ」までご相談ください。あなたの会社の希望に応じた最適な制作会社を無料でご紹介させていただきます。

見積もり、取ってますか?

発注をする際に最も大切なことは適正価格を知ることです。
3~4社から見積もりを取ることで、
発注への納得度を高めることができます。

コンシェルジュ

発注は時間も手間もかかりますよね?

コンシェルジュが解決します!

コンシェルジュに相談、あなたにあった業者を提案、発注の手間を削減!

完全無料

まずはお気軽にご相談ください