大変遅ればせながら、先週金曜に参加してきたWeb Directions Eastカンファレンスのフィードバックをお届けしたいと思います。
当日のプログラムについては公式サイト、ことこまかなレポートは安藤日記、gihyo.jpのレポートなどをご参照いただくとして、DBでは私が特に気になった内容についてちょこちょこと触れていきたいと思います。
まずは、Dan Cederholm(ダン・セダーホルム)氏の"Bulletproof A-Z"。
Bulletproof designについてAtoZで(実際はUまでだったけど)キーワードを挙げて俯瞰した講演でした。
Bulletproof designの直訳は「防弾デザイン」、つまり、環境に左右されない表示が出来るしっかりとしたデザイン/コーディングの考え方を指します。WEBフロントエンドの進化を追いながらも、現場で実際にその技術を実現するための「思考力」を啓蒙した今回のカンファレンスでは、とても重要なテーマのひとつだったのではないでしょうか。
"D"の項目でセダーホルム氏は
"Do web sites need to look exactly the same in every browser ?"
(WEBサイトがすべてのブラウザでまったく同じ表示である必要があるのか?)
という一文を提示し、その問題提起への解としてわざわざ文章そのまんまのドメインまで取った(笑)というサイトを紹介していました。
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
見てのとおり、答えはでっかく"No!"
- 携帯電話やゲーム機など、WEBにアクセスするデバイスが増えた現在、同じコンテンツでもそれぞれのデバイスで最適な表示をすべき。
- IE6のような古いブラウザでは、付加的な装飾や特殊効果は表示されていなくてもよしとする。
- ただし、どのデバイスからアクセスしても、コンテンツの中身とユーザビリティは損なわれないように設計する。
といった、WEBならではの多様性・柔軟性を支持する意見がこのNO!に集約されているのだと思います。
たとえば、前述のサイトひとつとっても、スクリーンショットを見比べるとその主張を体現していることが分かります。
"No!"は画像ではなくテキストで、CSS3のプロパティ text-shadow が指定してあり、背景には透明領域を持つPNG画像が指定してあります。
Safari3の場合:テキストに指定したドロップシャドウが反映されています。
FireFox3の場合:シャドウは出ません
InternetExploler7の場合:フォントサイズもセンタリングもFirefoxとは微妙に違います。
InternetExploler6の場合:PNGの透明度が効いてません
iPhoneの場合:見づらいですが、シャドウもちゃんと出てます! ※
もちろん現実はまだまだ、「印刷物と同じ考え方でどこから見てもまったく同じ表示でなければ許してくれない」クライアントも多いでしょうし、そう簡単にこのような実装方法に踏み切れるわけではありません。でも、せっかく閲覧者が自分の好きなように情報を入手することが出来る(可能性がある)WEBのデザインなんですから、その差異にやきもきするのではなく、柔軟に対応できるようにいずれはなりたいものですね。
さらにセダーホルム氏は、最後の"U"の項目で、U=YOU、つまりあなたのサイトのユーザ属性やアクセスしてくるブラウザの比率を解析することによって、どの技術や効果をいつ使い始めるかという見極めをしなさい、と説いていました。
カヤックの場合、ある程度制作者の思想や方針を通した実験が可能なラボ KAYAC BM11もあるので、そこから出すサービスで試みとしてBulletproof designをもっと追求してもいいはず。夢が広がります。
※ iPhoneのスクリーンショットはMacなら撮れるとのことですが、iPhoneも借り物でマカーでもないということで、時間も無かったのでデジカメで撮影してしまいました。お恥ずかしいー><