レスポンシブWebデザインの落とし穴

2013.11.20

WEB

Webデザイン

ユーザーニーズを無視したサイト構築で顧客を逃していませんか？

2013年6月時点における日本でのクライアント端末別の普及率は、スマートフォンが49.8％、タブレット端末が20.1％、PCが97.0％でした。（IDC Japan調べ）

PCが依然として高いものの、年齢別では若年層ほどスマートフォンの所有率が高く、今年6月から7月にかけて行われた総務省3500人調査でも「高校1年生の84％がスマートフォンを所持」というデータが発表されています。

アイキャッチ

Webサイトのマルチデバイス化が必須になっているいま、マルチデバイスへの対応方法として、Webサイトの管理/検索エンジン対策（SEO）面での優位性で共に注目されている「レスポンシブWebデザイン」ですが、『ユーザー本位』というWebサイトの本質を損なう事態を招いては元も子もありません。
今回はそんなターゲットを無視したマルチデバイスサイト構築を行わないためのレスポンシブWebデザインの基本知識とポイントを紹介します。

INDEX

レスポンシブWebデザインが注目された理由
画面が長くなりがちなレスポンシブWebデザイン
表示は制御できても読み込み時間は制御できない
さいごに「ユーザーニーズに沿ったマルチデバイスサイト構築とは」

レスポンシブWebデザインが注目された理由

レスポンシブWebデザインとは、ブラウザの横幅サイズをWebサイト表示の判断基準にすることで、デバイスごとにレイアウトの異なるデザインを表示されることができるマルチデバイス対応方法の1つで、Googleが公式にスマートフォンに最適化されたサイトの構築方法として推奨したことでも大きな話題となりました。

レスポンシブWebデザインの利点としてそのメンテナンス性の高さが挙げられます。PC用・タブレット用・スマートフォン用のサイトをそれぞれ別のHTMLファイルで用意すると、1つの更新に最低3つのファイルを触らなければなりません。
しかし、レスポンシブWebデザインでは1つのHTMLファイルを、CSS（ウェブページのスタイル指定のための言語）で制御し、ブラウザの横幅サイズに応じてページのレイアウトデザインを調整するので、1つの更新は1つのファイルを更新するだけですむのです。

画面が長くなりがちなレスポンシブWebデザイン

レスポンシブWebデザインでは、1つのHTMLファイルの表示設定を調整することでデバイスに対応するため、1ページ中のコンテンツ量は変わりません。そのため、タブレット・スマートフォンで閲覧すると、非常に長いページになってしまうサイトも多く見られます。

長いページが悪いわけというありません。スマートフォンやタブレットではフリック（画面を指で払う操作）でスクロールを行うため、ページを長くしてもPCほどユーザーの使い勝手に影響しません。それどころかページを遷移することで生じる読み込み時間に比べたら、長いページでも1度の読み込みで必要な情報が発見できたほうが便利ともいえますが、モノには限度というものがあります。
5回、6回とフリック操作を行ってもページの最下部に到達できないとなると話は別です。
特にトップページの情報量が多くなりがちな大規模サイトでレスポンシブWebデザインを採用した場合、スマートフォンの小さな画面幅では情報が整理しきれません。

先ほど、“レスポンシブWebデザインでは1ページ中のコンテンツ量は変わらない”と記しましたが、デバイスごとに表示要素や表示形式を変えることは可能なので、整理しきれない情報は表示しないことができます。