COMMEND

3つの“D”の視点から
夢あるライフスタイルづくりを提案

Vol.5 レスポンシブWebデザインとは

2014/09/25 up カテゴリー : WEBの現場から！

前回の「実録！レスポンシブWebデザイン　シンプル＆ハイクオリティーのサイトで学ぶ」から作成していくサイトをご覧いただいただろうか？このサイトの完成を目標に「レスポンシブWebデザイン講座」を進めていくわけである。手始めに今回は、「レスポンシブWebデザイン」とは何なのかを、簡単に説明する。

●レスポンシブWebデザインとは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、一つのHTMLで実現できるシンプルな制作手法。
●CSSを調整することによって、画面サイズを基準にサイトの切り替えが可能に。

レスポンシブWebデザインが主流となった背景

レスポンシブWebデザインが主流となった背景は、スマートフォンの急速な普及である。それによりWebサイト制作の現場では、PC向けの従来型のWebサイトに加えて、スマートフォン向けの小さな画面に対応したサイトの制作が求められ、「スマートフォン専用サイト」が誕生した。いわゆる〝振り分け型〟のスマートフォン専用サイトである。これは、JavaScriptやサーバーサイドでユーザーエージェント情報を読み出し、デバイスの種類に応じて用意した専用のWebページ（HTML）へ移動させる方法だ。デバイスごとにスタイルを一新できるので、最適なWebサイトをユーザーに提供できるのが最大のメリットである。しかし、主に4つのデメリットが指摘されている。

●開発コストの増加

あらゆる端末の解像度、スクリーンサイズ、OS、UAを調査して、それぞれに適したHTMLやCSSを用意する必要がある。対象に含めるデバイスが増えるごとに制作するページが増えるので、単純にコストの増加と結びつく。

●煩雑なファイルの更新

更新作業の度に、振り分けのために端末ごとに用意した数種類のHTMLを、更新しなければならない。

●CMSの対応

CMSの機能を使ってページを振り分けている場合、CMSが新しい端末に対応するまで時間がかかる。

●URLの問題

PCサイトとスマートフォンサイトではURLが異なるため、Googleなどの検索エンジンにおいて、インデックス化が適切に行われない可能性がある。また、アクセス解析ツールによっては、URLごとにレポートが分かれてしまうため、サイト全体の分析が難しい。他に、ユーザーが誤って別デバイス用のサイトにアクセスしたとき、正しく表示されない場合がある。

こうした様々な問題を解決するのが「レスポンシブWebデザイン」なのである。膨大なスクリーンサイズとOSを搭載したモバイル端末に対応する非常にシンプルな手法として、注目を集める「レスポンシブWebデザイン」を、まずは実際に体感してみよう。レスポンシブWebデザインのWebサイトを集めた「Media Queries」というサイトがある。このサイトにPCからアクセスして、ブラウザの横幅を広くしたり、狭くしたりして、レスポンシブWebデザインがどんなものなのか体感してみてほしい。

レスポンシブWebデザインを構成する技術

●フルードイメージ

ブラウザのウィンドウ幅に合わせて、画像のサイズを拡大・縮小する手法。CSSのみで実装。

　
●メディアクエリ

「画像解像度」「ウィンドウの幅」「デバイスの向き」などを条件にして、スクリーンサイズに応じたCSSにスタイルを切り替えることができる。

　
●フルードグリッド

ページの要素を任意のグリッドに沿って配置する「グリッドデザイン」と、ブラウザのウィンドウサイズに応じて各要素の大きさを伸縮させる「リキッドレイアウト」を合わせたもの。レスポンシブWebデザインでは、最初にグリッドデザインによって要素をpx単位で配置していき、レイアウトが整った後に、値を％に変更。こうすることで、様々な画面サイズにフィットするページを作成する。

ざっくりと説明したが、順を追って説明していくので、今は「こんなのがあるんだ」という程度で良い。大切なのは今から説明する「レスポンシブWebデザイン」のコンセプトである。

間違いやすい「レスポンシブWebデザイン」

それでは、「SONY」のサイトを見ていただこう。

SONY

このサイトは、Responsive Web Design jpというレスポンシブWebデザインのギャラリーサイトにも紹介されていて、レスポンシブWebデザインを作成するときの参考として多くの人に観覧されている。
　
PCで画像のサイズを拡大・縮小してもらえばお分かりだろうか。スクリーンを狭めていくとテキストやボタンが見切れているのが分かる。
　
SONYサイト
本来、レスポンシブWebデザインとは、どのスクリーンサイズでもテキストが閲覧できることが前提である。すなわち、このSONYのサイトはレスポンシブWebデザインではなく、アダプティブデザインなのだ。アダプティブデザインとは、特定のスクリーンサイズ（ブレイクポイント）ではWebサイトが正しく表示され、テキストを読んだりボタンを押すことが可能だが、それ以外ではテキストが見切れたりボタンが押すことが難しいことがあるのだ。日本のWeb業界では、非常に誤解されやすい問題である。

レスポンシブWebデザインとは

レスポンシブWebデザインとは「フルードイメージ」「メディアクエリ」「フルードグリッド」を利用すれば実現できると逆説的に考えられるが、そうではないのである。あくまでこれらは手段であり、要素の一部なのだ。理解してほしいのは、「レスポンシブWebデザイン」のコンセプトである、どのスクリーンサイズでもテキストを難なく読むことができ、リンクボタンをクリックできる。そして、当然ながらレイアウトが見切れないということである。まずは、そのことを念頭に置き、次へと読み進んでいってもらいたい。
　