ここまでできるCSS3コンテスト制作物まとめ

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

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

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

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

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

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