ビジネスとIT活用に役立つブログBlog


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

この記事をシェアする:

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

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

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

アイキャッチ

Webサイトのマルチデバイス化が必須になっているいま、マルチデバイスへの対応方法として、Webサイトの管理/検索エンジン対策(SEO)面での優位性で共に注目されている「レスポンシブWebデザイン」ですが、『ユーザー本位』という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ページ中のコンテンツ量は変わらない”と記しましたが、デバイスごとに表示要素や表示形式を変えることは可能なので、整理しきれない情報は表示しないことができます。

表示は制御できても読み込み時間は制御できない

いくら表示を制御しても、あくまで“1ページ中のコンテンツ量は変わらない”ので、表示しない素材や設定も一度読み込みを行います。つまり、デバイスごとに最適な表示を行うとなると、デバイスごとにファイルを設けた場合の約3倍のデータを読み込む必要があります。

さいごに 「ユーザーニーズに沿ったマルチデバイスサイト構築とは」

ターゲットユーザー層を知る

冒頭で触れたように年齢層によってメイン使用されるデバイスは異なります。
モバイルファーストで検討すべきなのか、それとも双方で検討が必要なのか。

デバイスごとの利用シーンを考える

同じサイトでも閲覧環境によってユーザーの必要とする情報は異なる場合があります。
スマートフォンでイベント情報サイトを見る場合、場所や時間を素早く知りたい。など。

レスポンシブWebデザインは非常に有効な手法ですが、万能なわけではありません。自分のサイトがどんな状況でどんなユーザーに見られたいのか(または見られるのか)を、しっかりと分析した上で検討することが大切です。

この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!