2011-08-28

サラ・キャノン「WordPress とレスポンシブ・ウェブ・デザイン」に参加してきました

8月19日、シラサカさんがやっている Jelly Jelly Cafe 渋谷で行なわれた、サラ・キャノン「WordPress とレスポンシブ・ウェブ・デザイン」に参加してきました。

サンフランシスコで行なわれた WordCamp で講演された際のスライドを元に進められました。
通訳は Toru さんが担当してくれました。

多様化するデバイスに対応する1つの手段としての Media Queries と、それを使用してのサイト設計についての基礎的な内容でした。
使用されたスライドは、SlideShare にアップロードされています。参考サイトや WordPress テーマのデモへのリンクが紹介されているので、それらの内容をチェックしたい方はスライドを参照してください。

Responsive Web Design – WordCamp San Francisco

WordPress 3.2からのデフォルトテーマ Twenty Eleven でも仕様されている Media Queries。
このテーマは、ブラウザサイズによってレイアウトや文字サイズが変化するように設計されています。
公式のデモが公開されているので、Twenty Eleven を使用したことがない方は、デモページを開いて、ウィンドウサイズを変えてみたり、モバイルデバイスで表示してみると Media Queries の面白さが分かるのではと思います。

デモ: The Twenty Eleven Theme | Just another WordPress.com site

WordPress テーマ以外には、以下のようなサイトが紹介されていました。

Hicksdesign: design for print and new-fangled media ( http://hicksdesign.co.uk/ )
Food Sense | Plant-Based Eating At Its Best ( http://foodsense.is/ )

Media Queries は、Media Queries を使用したサイトのギャラリー。
上に挙げた2つのサイトを始め、かなりの数のサイトが紹介されているので、実際に Media Queries を取り入れようとしたときに参考にできるのではないでしょうか。見てるだけでも結構楽しいです。サイト名も素敵な感じです。

サラさんがおすすめしていた書籍は、A Book Apart, Responsive Web Design
著者は、スライドに登場した Ethan Marcotte さん。
英語の内容なので、読むのがちょっと大変かもしれませんが・・・
電子書籍版は、9ドルで購入できるようです。

これ以降の内容に、Media Queries に関する説明、サンプルコードなどはないので、Media Queries について知らない方は調べてみてください。

以下、今回の感想など。

Media Queries は万能の技術なのか

僕はまだ Media Queries に関して、ちゃんと調べたり、実装したりしたことがなく、「そういうものがある」程度の認識でした。
以下については、そういった状態で参加し、感じたことです。

レスポンシブ・ウェブ・デザインは、デバイスのウィンドウサイズに合わせて、レイアウトや見た目に切り替えるデザインのこと。
見た目よりも、サイト設計という意味でのデザインが重要

Media Queries を活用し、1つの HTML ( + CSS ) のみで様々なデバイスに対応することができる。
これだけ書かれると、魔法みたいな素晴らしい技術に思えますが、最適化するのは大変な作業になる。
デバイスが多様化しているが、可能な限り多くの検証環境でチェックしておかないといけない。
不向きなケースも出てくるはずで、何でもかんでも Media Queries で解決!というわけにはいかない

WebDesignShock の 11 Reasons why responsive web design isn’t that cool! ( http://www.webdesignshock.com/responsive-design-problems/ ) という記事にまとまっていますが、閲覧環境以外の環境に指定されている背景画像など不要なファイルもダウンロードしてしまったり、パソコンに比べ非力なモバイル環境で CPU とメモリを消費する画像のリサイズが必要になったり(もちろん回線速度も)と、現段階では解消されてない問題点があることを忘れてはいけない。

これらの問題を回避するためには、サイトの設計段階で色々と考えなければいけません(例えば、背景画像使わないようにするとか)。
「流行っているから」という理由でこの手法を取り入れるのではなく、どのサイトにどのような意図で組み込むかを意識したいです。
既存サイトに組み込もうというのもかなり大変な作業になるんじゃないかと思います。

ユーザーエージェントから判断するなどして、携帯用サイトとパソコン向けサイトで 別の HTML を表示するというように、デバイスによって見せ方を変えるということ自体は以前より行なわれてきた手法です。
Media Queries が出てきたからといって、今までの手法がなくなることはないと思います。
それぞれの特性を理解し、その都度最適な手法を取ればいいと思います。

個人的なことになりますが、スマートフォン向けページのズームがしにくい(というよりできない)のがすごく不便で、デスクトップ版と同じデザインで見たいと思うことがあります。
そういった場合、どちらの表示を有効にするか選べると嬉しいです。

うまくまとまってないなと思った方、すいません。。。

公演終了後はそのまま Jelly Jelly Cafe で懇親会。
電車の都合で最後までは参加できませんでしたが、最近あまりお会いできてなかった方とゆっくり話せたり、Twitter では交流があったけどお会いしたことがなかった方とお会いできたりといい夜になりました。