レスポンシブデザイン

かつて携帯電話向けのウェブサイトはパソコン用のウェブサイトの内容を簡略化した内容で別のウェブサイトを作成する方法や、同じ内容を別の出力テンプレートで出力する方法で運用されていました。

ここ2年程の間に急激にスマホが普及、ホームページを見る側が発信する機種の情報（ユーザーエージェント）で、後者の方法よりパソコンで閲覧する場合とほぼ同等の情報を小さな画面で見やすく操作しやすくする方法が主流となりました。

自分の場合、当初はパソコン用の出力を自分なりにカスタマイズしたものでスマホ対応していたのですが、1年程前からjQuery Mobileというスマホ向けの出力テンプレートをカスタマイズする方法に変えました。

インターフェースもカッコよく使いやすく、クライアント各位からも好評だったのですが、データベースに蓄積された情報はPCとスマホ共通で使えるものの、この方法では一般的に大きくふたつの問題があります。

1. 何か変更したらその都度、パソコン用とスマホ用の複数の出力設計を変更しなければならず、処理に漏れが生じることがある。
2. iOSの場合は、iPhoneとiPad、iPad MIni、iPod Touchだけですが、Androidの場合、実に多くの機種が発売され、ユーザーエージェント情報だけでは切り分けるのが困難になってきた。

そこで、ここにきて急激に普及してきたウェブ制作方法がレスポンシブデザイン、見る側のハードウェアの情報ではなく、ブラウザの画面サイズで出力を切り分ける方法です。

このサイトもレスポンシブデザインです。このページをご覧のブラウザの横幅を少しずつ狭めてみてください。

ある程度狭めるとページ最上部のナビゲーション部分が非表示になって、右上に三本線のボタンが表示されます。このボタンでナビゲーションメニューを開閉するようにしています。

もっと狭くすると、右側のサイドバー部分がコンテンツ部分の下に移動するようになります。スマホの場合この表示になります。

レスポンシブデザインにすると、従来よく採用されていたパソコン用とモバイル用の表示を切り替えることはできなくなります。

ユーザーエクスペリエンスの観点から、ユーザーは使い慣れたデザイン、レイアウトを好むので、レスポンシブデザインは必ずしも好ましいものではない、それは制作側の身勝手ではないか、という意見もあるようです。

しかしながら、Googleのようなデザイン、レイアウトの場合はともかく、Yahoo!のトップページのような情報びっしりの画面を何度もピンチアウト、ピンチインして拡大縮小を繰り返してして見てもらえるとは考えにくいです。

一方、スマホからのアクセスがサイトによってはパソコンからのアクセスを上回ることも少なくなってきました。つまりそのサイトの最初のユーザーエクスペリエンスがスマホというケースが増えてきているということになります。

最初からピンチイン、ピンチアウトしてもらうことを前提にしたサイトは成り立たないのでは。自分としては、さらに新たな優れたコンセプトがでてこない限り、また特別クライアント様から要望が無い限りはレスポンシブデザインをデフォルトに制作していく考えです。

あ、ちなみに「レスポンシブ=反応する」です。「レスポンシブル=責任ある」じゃないので念のため。