レポート

Web Directions East「実践 CSS3 & HTML5 with Microformats ワークショップ」レポート

この記事を読むのに必要な時間:およそ 3 分

プログレッシブ・エンハンスメント

事前レポートでも少し触れましたが,今回のワークショップの申し込みページはブラウザに応じてサイトの表現が多少異なっています。

「申し込み」ボタンが角丸になっていたり,⁠申し込み」ボタンにドロップシャドウが適応されていたり,タイトルはフォントをダウンロードして表示していたり,写真をトランスフォームして回転させていたりしています。これらは,すべてCSSで再現されています(Opera 10,safari 3,Firefox 3などのモダンブラウザでそれぞれ確認してみてください⁠⁠。

この「キチンと申し込みができる」というコンセプトが守られてさえいれば,ブラウザによって違う見た目になることはダメということではなく,そのブラウザで閲覧した場合のベストな見せ方で実装すればよいのです。

このような実装(の考え方)をプログレッシブ・エンハンスメントといいます。⁠デザイナーの仕事としてプログレッシブ・エンハンスメントをクライアントにアプローチするには⁠最先端を実装します⁠と,提案できるのではないでしょうか。そして早期実装することにより,長期的なコストが下がるのではないでしょうか」というのがジョン氏の考え方です。

申し込みページのようにグラデーションやボタンのロールオーバー時のエフェクトなど,あくまで「味付け程度が違うだけ」です。カラム落ちしたり,コンテンツのテキスト情報が見れないなどそのページのコンセプトが達成されないというのは,プログレッシンブ・エンハンスメントの考え方ではありません。

ジョン氏からは,以下の問いとサイトの紹介がありました。

「すべてのウェブサイトがすべて同じである必要はあるか?」
⁠Do websites need to look exactly the same in every browser?)

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

この答えの理由として,⁠ページの訪問者(利用者)は1つのものしか見ない(ブラウザ間の違いに気付かない⁠⁠」と「効率化」ということがあります。

ジョン氏が一番効率がよいと考えているのはCSSとHTMLでプロトタイプを作成してそれを見せることだそうです。仮にPhotoshopからページデザインのカンプを作成するとします。デザイナーに発生する作業として,最終的なプロダクトを静止画で再現しなければなりません。

もちろんクライアントに対してビジュアルとしてイメージがあったほうが一番わかりやすいのですが,最終的に完成したサイトは情報が整理されていない,当初のページのコンセプトとは異なるものができあがるのではないでしょうか。これは「ビジュアルをふくめての最終のプロダクトに見えるもの」を急あつらえで作成しているにすぎません。

その静止画を作成するためにデザイナーがリソースを使いすぎて,肝心のIA(インフォメーション・アーキテクチャ)やコンテンツの内容に目がいかなくなってしまっているのではないでしょうか。

写真5 ジョン氏と長谷川氏

写真5 ジョン氏と長谷川氏

CSS3での表現方法の例

CSS3で追加された特殊な表現方法の一部を見ていきましょう。⁠記載しているHTML・CSSは解説用に新たに書き起こしたものです⁠⁠。

boder-radius

申し込みページでは右上にある,⁠申し込み」ボタンに適応されている角丸の表現です。

CSS3ではこういった角丸の表現もboder-radiusを利用するだけで可能になります。

写真6 boder-radiusを解説

写真6 boder-radiusを解説

box-shadow

同じく,⁠申し込み」ボタンのシャドウで利用されているのがbox-shadowです。影を付けるボックスからの距離、ぼかし、色を指定します。現在、webkit(Safariなど)では複数の影を指定することができます。

著者プロフィール

村田憲嗣(むらたけんじ)

株式会社ロクナナ所属。Webディベロッパー・プログラマー。

XHTML+CSS+JSといった,クライアントサイドの開発はもちろん,PHPをはじめとした動的なページ生成・DB設計を伴うシステム構築、運用に従事。また,Flash/ActionScript3コンテンツやSilverlightコンテンツの設計・開発なども行っている,Web系なんでも屋さん。