レスポンシブWebデザインとは?スマホ対応サイト構築方法の基礎知識

スマホのショッピング画面とコーヒー

更新日:2017年10月17日 | 公開日:2017年03月21日

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

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

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

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

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

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

なお、レスポンシブWebデザインは「レスポンシブ対応」「フレキシブルwebデザイン」などという言い方もされます。
また、レスポンシブWebデザインで制作されたサイトを「レスポンシブサイト」と表記することもあります。

1. レスポンシブ対応サイトとは

レスポンシブWebデザイン対応サイトとは

レスポンシブ対応サイトとは、PCだけでなくタブレットやスマートフォンといった画面サイズの異なる複数のデバイスに対して、それぞれに応じたレイアウトに調整して表示することのできるサイトを指します。

1-1. レスポンシブ対応の手法

ノートパソコンとタブレットを持つ男性

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

1つのコンテンツデータで複数のデバイスに対応するには、自動変換やCMSの活用など様々な手法が用いられていますが、近年は1つのURLでマルチデバイスに対応する手法であるレスポンシブWebデザインが主流となっています。

2. レスポンシブ対応サイト構築方法

では、いよいよレスポンシブ対応サイトはどのように構築されるのか、基本を理解しましょう。

2-1. レスポンシブWebデザイン

1つのHTMLファイルをCSS3で制御し、画面サイズの異なるデバイスそれぞれに合わせた最適なレイアウトデザインが表示されます。

レスポンシブWebデザインの構築方法

2-2. リキッドレイアウト

デバイスの画面サイズに合わせて、要素が相対的に調整されます。
レスポンシブWebデザインではデバイスに応じて要素を非表示にすることができますが、リキッドレイアウトは常に画面サイズに合わせて相対的に表示されます。

リキッドレイアウトの構築方法

2-3. フレキシブルレイアウト

リキッドレイアウト同様、フレキシブルレイアウトもデバイスの画面サイズに応じて要素が相対的に調整されます。
ただし、フレキシブルレイアウトでは最小幅と最大幅を指定するため、PCのような大きな画面サイズの場合は余白が生まれます。

フレキシブルWebデザインのレイアウト

2-4. 可変グリッドレイアウト

可変グリッドレイアウトは各デバイスの画面サイズに応じて、ボックス要素が相対的に再配置されます。

可変グリッドレイアウトの構築方法

3. レスポンシブ対応サイトの事例

レスポンシブWebデザインで構築されたサイトでは、スマートフォン、タブレット、PCでどのように表示されるのか実際に見ていきましょう。

横に並んだ3つの画像を見比べると、デバイスの幅に合わせてレイアウトが変更されて表示されていることがわかると思います。

3-1. 無印良品

無印良品のレスポンシブWebデザイン
出典無印良品

3-2. GINZA SIX

GINZA SIXのレスポンシブWebデザイン
出典GINZA SIX

3-3. teamLab

teamLabのレスポンシブWebデザイン
出典teamLab

3-4. 東京メトロ(すすメトロ!)

上記のほかにも、RESPONSIVE WEB DESIGNMUUUUU.ORGWEBデザインギャラリーといったサイトにはレスポンシブWebデザインでつくられたサイトがまとめられているので、ぜひ参考にしてください。

4. レスポンシブWebデザインの特徴

スマホを操作する人

レスポンシブWebデザインの最大の特徴は1つのURLでマルチデバイスに対応できることです。
これは、1つのHTMLファイルをCSSで制御して、異なる画面サイズに応じてデザインを変えて表示することで可能となっています。

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

4-1. レスポンシブWebデザインのメリット

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

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

構築/管理・運営

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

ユーザー効果

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

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

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

4-2. レスポンシブWebデザインのデメリット

レスポンシブ対応サイトを構築する前にデメリットも頭に入れておきましょう。

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

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

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

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

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

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

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

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

握手をするビジネスマン

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

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

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

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

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

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

いま知りたいこと
コンシェルジュが解決します!

コンシェルジュサービスは
3万社以上が利用している無料の相談サービスです。

コンシェルジュ

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

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

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

完全無料

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