ブログ検索

怒濤のWeb系イベント4連発の1つ目は、Web Directions Eastのワークショップでした。

去年もEric Meyerのワークショップに参加させてもらいましたが、今回は"Transcending CSS"（日本では『Webデザイン プロフェッショナルワークフロー・バイブル 』というタイトルで発売中）の著者として知られる、Andy Clarkeのワークショップに参加させてもらいました。

今回は、ほぼCSS3にターゲットを絞った内容で、実際にAndyが手がけた事例を見ながら、このタイミングで具体的にどこでCSS3を使っていくのか、そもそも何故使うのか、細かく解説してくださいました。

CSS3の仕様に関しては、前回のWDEのカンファレンスでもワークショップでも触れられていたのですが、今回は完全に「実際に使うことが前提」で話が進んでいる印象を受けました。「遠い未来の話」ではなく、現在の話として捉えている、そんな感じがしました。

ちなみに、今年から同時通訳から随時訳（随時、WDEの菊池さんが補足をいれつつ翻訳してくれる）形式に変わったため、進行がゆっくりになり、かつ翻訳も丁寧で（同時通訳だとどうしても、技術的な説明が分かりにくくなってしまうので…）、非常に分かりやすくなってました。これはかなりありがたかったです。（去年はなんどか挫折しそうになったので…）

当日の内容をざっくりと

当日の内容をすべてレポートするにも、かなりのボリュームだったので（なんせ8時間もあったので…）、どんな内容だったか、概略だけまずはご報告。

みんながCSS Working Groupについて誤解していること

ブラウザベンダーが集まって仕様を作っているというよりも、ベンダー各々が欲しい機能を突き通そうとしている。W3Cはその調整役。仕様策定の中で新しい技術が生まれるのではなく、それはブラウザベンダーが推し進めることによる。

すべてのブラウザが同じCSSを実装される日は来ない

CSS3はモジュール化されていて、ブラウザベンダーがどれをいつ実装するかは自由＝だから、仕様が決まってからみんな一斉に……なんてことは絶対に起きない。紙とWebは違うメディアであるということを社内外の人に理解してもらう必要がある。

ブラウザ・レンダリングエンジンの種類について

主にレンダリングエンジン別にブラウザを紹介。各ブラウザでのCSSの実装状況についても解説あり。モバイル端末のWebkitやGoogle Chromeの動向についても。

全部のブラウザで見栄えが揃っている必要はない

前述の通り、実装のタイミングはバラバラ。車の燃費や形が違うように、同じ見た目に作るのがデザインではない。ギークはブラウザの違いを見るが、世の中のユーザは一つのブラウザしか使ってない。違いに気付かない。
そもそもクライアントにブラウザごとの実装の違いについて十分に説明している？

CSS3：色について

"color: rgb(赤,緑,青);"といった色の指定や、HSL・RGBa/HSLa・Opacityについて解説。
RGBと比べたHSLの利点（数値だけでどんな色か分かる）や、RGBa/HSLaとOpacityの違いについても。

CSS3：背景画像について

背景画像の複数指定についてや、背景の拡大縮小・比率の設定、ボックスモデルの変更などについて。

CSS3：ボーダーについて

主に角丸（border-radius）について。border-radiusに対応してないブラウザでも、角ができるだけであって、レイアウトが大きく崩れるわけではない。

CSS3：影について

text-shadowやbox-shadowについて。影を重ね合わせることで立体的な表現が可能に。

CSS3：カラムレイアウトについて

新聞のようなコラム分けをWebで実現できる方法（css column）について。

CSS3：グラデーション

画像を使わずCSSのみで可能なグラデーションの設定について。background-imageの値として設定することで、複数のグラデーションを重ね合わせることも可能（複数の背景画像が指定できるから）。

CSS3：マスクついて

マスク効果について。

CSS3：変形・動きについて

移動や拡大・回転・ゆがみの設定が可能に。さらに変形にかかる時間や、アニメーションのタイミング・ディレイも設定可能。ここで、まるでFlashのような動きをするデモを見せられて、自分、完全に言葉を失いました…。

JSを使ったブラウザ間の違いサポートについて

IE7の開発に着手した際、IE7.jsがそのまま参考にされた、という話があるようにブラウザを作るのはベンダーだけじゃない、自分たちだけで拡張できるようになった。
今回は「Modernizr」というライブラリを紹介。ブラウザがどのプロパティを実装していないのかHTML要素にclassを付加する形で返してくれるので、実装していないものについては別のスタイルを当てることが可能に。

Universal Internet Explorer 6 CSS

IE6を切り捨ててしまうと、表示が大きく崩れる＝その会社が駄目になったととらえられてしまう。でも、企業はIE6対策のために予算を確保している訳ではない。
そこでタイポグラフィだけでもこだわったスタイルをIE6向けに用意することで、壊れた印象を回避する試みが"universal-ie6-css"。

デザイナーへのメッセージ

多くのデザイナーは勇気が足りない、頭の中で問題を大きくしてしまっている。まずは意見を言ったりトライする必要がある。最近2-3年でWebがエキサイティングになってきた。チャレンジする良い機会だ
クライアントに対して自分が何をしているか説明すべき、ブラウザの見た目が同じである必要がないことを伝えるべき。

デザインにPhotoshopは必要ない

AndyはPhotoshop上でデザインはしない。ブラウザ上でいきなり組み始めてどんどん調整する。
背景にグリットを置いて、まずは要素をおいて、タイポグラフィを組み、その後にレイアウトに入る。
クライアントに進捗をリアルタイムで見せる。どれだけ仕事が進んでいるか見せられるし、いきなり完成形をみせて驚かれることがない。

「当たり前」の環境を疑え

今回、いちばんの収穫は、「今この段階でなぜCSS3を使って良いのか」その根拠がようやく理解できたこと、に尽きます。

結局ブラウザによって実装のタイミングも種類もバラバラで、仕様の策定のプロセスも、1つの仕様をみんなで検討するというよりも、互いの利害を調整しながらのもの。
だからこそ、今後「どのブラウザでも同じ見た目に」はどんどん難しくなる。それよりも、そのブラウザでより良いものを提供する、ブラウザ間のちょっとした違いは当然ある、という考え方が必要。

その仕様が固まり実装されるまでのプロセスから、「同じ見た目にする必要はない」ということについて解説されていたので、ようやくこの考え方について納得がいきました。

「同じ見た目にする必要はない」という考え方は、これまで、いろんなイベントで話を聞きましたし、Web上でも何度も話題になりました。でも、どうしても「理想論」的なイメージが強かった。「結局、IEがサポートするまで、待ったほうが現実的で正しい」、と正直思っていました。

でも、「すべてのブラウザが同じCSSを実装される日は来ない」とAndyは言い切った訳です。当日。そうなると、「IEがサポートするまで、待つ」ことが（今は正しいとされていても）いずれ正しい選択ではなくなるのかもしれません。

AndyがCSS3を実際に使っているサイトは、どれもIE6で大きく崩れることはないそうです。でも、先行して実装しているブラウザでは、たとえばhoverでDVDのディスクか回転して出てきたり、Flashのアニメーションのようにポップアップが表示されたり、そのブラウザだからこそ可能な演出がなされていました。

どういったプロパティを使用するのかは、その人のセンスやアイデア次第だと感じてます。表現の幅が広がったとはいえ、それで何を表現するか発想できなければ意味がない。そこは単にデザイナー・コーダーという分業ではなく、コラボレーションが必要だと思います。Andyはだからこそ、ブラウザでいきなりデザインを始め、リアルタイムに調整を掛けながらメンバーと進捗を共有する、という手法を採ったのだと思います。

ワークショップの中でなんどもAndyが繰り返していましたが、企業はIE6対策のために予算を確保している訳ではありませし、そのつもりもない。この経済状況で、お金も時間も限られている中で、その企業の目的を実現させるために、どのようにそのお金や時間を有効に使うのか。その際にIE6で同じ見た目に合わせることが、どれだけの意味を持つのか。

Andyは何度もクライアントと一緒に考え、説明すべきだと主張されてました。結局、そこを考えることを避けてきたのが、今自分が働いている現状なのかもしれません。

今、当たり前とされている状況や環境を当然と考えるのではなく、自分から考え行動しないことには状況は変わらない。それは、ディレクターやプロデューサーという立場に限らず、デザイナーやコーダー・マークアップエンジニアにも言える話なのだと感じました。

周りの環境をいきなり変えることは難しいと思います。Andyのようなワークフローを実践してる会社はごく少数でしょう。でもまずは自分の足下を見つめ直し、そこを疑い、どうすべきなのか考えることから始めようと思ってます。それは無駄には終わらないと思います。