レスポンシブにデザインするために克服すること

画像の課題は解決されつつある

先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。

現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが、こちらでも紹介。

設計を再考する

Media Queries だけでも、簡単なところでは背景画像から始めることができます。うまく切り分ければスマホでは読み込まれないように制御出来ますし、content属性を活用するのも手段です。

サーバーサイドで処理する

Adaptive Imagesを使えば現行のマークアップを変えずに適切な画像を読み込ませることができます。

JavaScriptを使う

Response.jsという jQuery のプラグインを使うと、画像タグの属性に書かれている代わりの画像をスクリーンサイズに応じて切り替えることが可能です。.htaccess と組みあせて使う responsiveimgs.js もあります。

日本では昨年あたりからよく耳にするようになったレスポンシブ・ウェブデザインですが、最初にこの手法が紹介された 2010年 5月当時から、画像や余計なデータは読み込まれてしまうという問題は取り上げられています。幸い、天才デベロッパー達の努力により1年半以上経つ今では解決するためのソリューションが幾つか出てきているのが現状です。

PCサイトの感覚では通用しない

レスポンシブ・ウェブデザインで行き詰まるポイントのひとつに「PCサイトの情報量ではモバイルでは隠すしかない」と思ってしまう点。「PC＝ボリューム満点でリッチ。モバイルでは＝コンパクトでシンプル」という考えている方もいるかもしれません。今の PC サイトを基準にするとそう考えるでしょうし、Media Queries で情報を隠すという手法になるでしょう。しかし、今の PC サイトの情報量と網羅性が正しい情報設計なのか問いかける時期に来ています。

• ソーシャルメディアを起点にして情報を消費するようになっている
• Instapaperや Safari の リーダーのようなコンテンツの消費に最適化した形を好み始めている
• スクロールやスワイプといった一方直線の情報消費に馴染み始めている
• 広告をはじめコンテンツ以外の情報に目を向けなくなっている

また、利用者の文脈を考慮したデザインや技術的補助も難しくなくなってきました。モバイルコンテキストの見分け方と注意点でも指摘しましたが、決めつけは出来ないものの、ある程度情報をセレクトして提示することができるようになってきています。

PCサイトだから情報満載ではなく、PCサイトの回線やハード面の力を借りて、軸にあるコンテンツを高めるデザインであっても良いと思います。

昨年 UX/UI トレンドの記事を書いたときに、モバイルがデスクトップデザインに多大な影響を及ぼすようになると指摘しました。Mac OSX Lion は、iOS の影響を大きく受けていますし、モバイルアプリのノウハウが Web デザインの見せ方を少しずつ変えてきています。今後、ますますスマートフォンをはじめとしたモバイル機器から Web サイトをアクセスする人が増えてきます。モバイルを中心に Web へアクセスしている人であれば、情報網羅し過ぎている今の PC サイトは分かり難く感じるでしょうし、その声はますます強くなるでしょう。

モバイルユーザーが増え、彼等が求めているような絞られた情報設計が必要だからこそ、モバイルファーストという考えが生まれたのだと思います。しかし、私は昨年の7月にコンテンツファーストと、あえて別の言い回しを使いました。目指している先は同じですが、『モバイル』という言葉が足かせになると考えたからです。モバイルと付くことでモバイルに対応した Web サイトを作れば良いという感覚でいては、コンテンツがまた後回しでテンプレートの話になる可能性があるからです。コンテンツはモバイルより未来にある未知のデバイスが登場しても変わらずプライオリティを高くあるべきです。

レスポンシブ・ウェブデザインを実装する際に、まずは今の PC サイトの作り方やメンタルモデルを取り去るところがスタートなのかもしれません。

レスポンシブにデザインすること

Webサイトは必ずといって良いほど、企業の背景が見え隠れしています。ビジネスモデルだったり、組織体勢が Web サイトに反映されています。 もし、表層だけレスポンシブにしたとしても、Webサイトを支えるビジネスモデルや組織体勢がレスポンシブでなければ、どこかで行き詰まります。例えば、広告モデル、ライターや画像を処理する運営チーム、制作と彼等と対話する担当者など。それぞれが社会・人のニーズや動きにレスポンシブに反応していかなければ、レスポンシブな Web サイトの実現は難しいと思います。技術的に難しいかというより、こうした制作工程以外のところのほうが難題ではないかと考えています。

レスポンシブ・Webデザインがベストな解だとは思っていません。
ただ、デバイスによって同じコンテンツなのにも関わらず URL が異なっていたり、特定のデバイスに最適化されていても、それ以外のデバイスからの共有・引用・操作がしにくいことに不満を感じているだけです。その解決方法はレスポンシブ・Webデザインだけでなく、サーバーサイドや CMS を工夫することで可能でしょう。ひとつのコンテンツを様々な手段でシームレスにアクセス・共有できるのであれば、他の方法でも良いと思います。

レスポンシブ・Webデザインが完璧でないから、アプリにしたり、デバイスに最適化しようというのは問題の先送りに過ぎません。今後、デバイスの数は爆発的に増えますし、コンテンツの運営・管理以外のコストを引き受けることが出来るのか？対象デバイスが増えても持続可能なのかといった課題が残ります。

いろいろなスクリーンサイズに対応することが「レスポンシブ・デザイン」と考えるのではなく、ビジネスや利用者のニーズにどうレスポンシブに対応するのかがデザインに課された役割ではないでしょうか。

この話題は今週の Automagic Podcast #28 でも話したので興味がある方はぜひどうぞ。