Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

Webページの制作方法として、コンテンツは論理構造が整理されたHTMLに、振る舞いはJavaScriptに、デザイン表現はCSSで実施するという方法が普及している。現在策定が進められているHTML5とCSS3はこの方法をさらに強化することになる。たとえばCSS3はCSSで表現できる能力を大幅に引きあげる。

先進的なWebデザインやデザインテクニックを取り上げることが多いSmashing Magazineは先月、SSDやヘッドフォンなどを賞金としてCSS3デザインコンテストを開催していた。今回、その結果が発表された。CSS3 Design Contest Resultsにコンテスト応募作品が紹介されている。CSS3でどういったことが実現できるのかを体験することができ参考になる。

多くの作品が掲載されているが、中でも特にJavaScriptを使わないで制作された作品のいくつかを取り上げて次に紹介する。

CSS3 Charts - 優勝作品。CSS3のみでグラフを表現。インタラクティブに動作するがJavaScriptや画像は使っていない	CSS3 Rubik’s Cube - 次点作品。CSS3で構築されたルービックキューブがほかのサイトへのリンク集になっている

CSS3 Magazine - 一見すると画像のようだが、画像なのは戦士のみで、文字や装飾にはCSS3が使われている。CSS3を使った文字列の装飾や回転のサンプルとして参考になる	CSS3 Under the Sea in CSS3 - CSS3を使って制作されたアニメーション。イルカや魚が泳いでいる

CSS3 Wii-ish Idea - スピードダイアログのようなサンプル。シンプルな作りになっており、CSS3の最初の導入として参考になる	CSS3 Totally Fresh - 画像のようにみえるがCSS3のみで制作されたデザイン

CSS3 Design Contest Resultsで紹介されている作品にはJavaScriptを使ったよりインタラクティブなものも含まれている。それ以外の作品は基本的にCSS3の機能を使って実装されている。優勝をもらうだけあってCSS3 Chartsは特に秀逸。使ってみる限りではJavaScriptが利用されていると考えてしまうが、実際にはCSS3のみで構成されている。インタラクティブな動作もあり、CSS3が実現するデザインとして参考になる。

まだHTML5もCSS3も策定段階にあり、実装している機能もブラウザごとにばらばらという状況にある。現段階でCSS3に依存したデザインを設計するのは難しいといえるが、プログレッシグエンハンスメントの手法を適用して実験的に採用していくというのは現実的な取り組みとみられている。

CSS3でさまざまなデザインを表現できるようになった場合、画像のかわりにCSS3を使うことで全体の通信量を減らすことができ、結果としてページの高速表示を実現できることになる。ページ表示の体感はそのままサイトの評価につながりやすいため、WebデベロッパやWebデザイナは注目しておきたい。