イケてるCSSデザインサイト紹介

CSSでは決まった退屈なデザインしかできない？　そんなバカな！
ここでは、CSSデザインの参考になる3つのサイトを紹介する。（text: 森川眞行）

イケてるCSSデザインサイト(1)
css Zen Garden
http://www.csszengarden.com/

図5　上の画面はCSSを有効にした場合。まったく別のサイトに見えるが、どちらも同じHTMLファイルで作られている。

CSSによるデザイン表現を知るには最高のウェブサイト。2003年にカナダのクリエイターが開始したこのサイトには、現在500以上のCSSのデザインサンプルが登録されている。クリエイティブ表現が確保できないという都市伝説などは、このサイトの前では、CSSでデザインできないクリエイターの言い訳にすぎないことを立証しているといってもよい。

そして、驚くべきことに、登録されているすべてのCSSデザインは、同じ1つのHTMLファイル用に作られている。

デザイナーは、このサイトからHTMLとCSSファイルをダウンロードし、CSSファイルだけを登録する。世界中からグラフィック表現とCSSにこだわるクリエイターが技を競い合い、自分たちの役割をデモンストレーションするためのウェブサイトなのである。CSSの可能性を見るには圧倒的な質と量を一気に経験できる貴重なサイトだ。

イケてるCSSデザインサイト(2)
慶応義塾大学　湘南藤沢キャンパス
http://www.sfc.keio.ac.jp/

図6　画面はユーザービリティとアクセシビリティを追及した「Simple・アクセシビリティ」デザインの切り替えは高い設計力があればこそだ。

2004年4月に公開された「慶応義塾大学湘南藤沢キャンパス」のウェブサイトは、XHTMLとCSSによって作られている。このサイトの最大の特徴は、ページ内に配置されている「design switch」という機能だ。

3つ並んだボタンの1つを選んでクリックすると、サイト全体のデザインが切り替わるというもので、それぞれのデザインコンセプトは、「Simple・アクセシビリティ」「Cool・キャンパスライフ」「Hot・自然と人の融合」となっている。もちろん、これはCSSによって文書構造と視覚要素を分離しているからこそ実現できる機能で、1つのHTMLに対して3種類のCSSを用意している。

注目すべきは、2004年という早い段階で、CSSを導入したことと、サイト全体のデザイン切り替えを可能にする設計力の高さだ。アクセシビリティガイドラインへの準拠も果たしており、ガイドラインに沿ったコンテンツの制作を行っている。

イケてるCSSデザインサイト(3)
日本メナード化粧品
http://www.menard.co.jp/

図7　企業ブランドを保ちつつ、フルCSSでレイアウトされている日本メナード化粧品のサイト。アクセシビリティにも配慮されている。

Web-JISの交付以来、企業サイトがリニューアルする際の条件の1つに、CSSレイアウトやアクセシビリティが盛り込まれるようになってきている。

「日本メナード化粧品」のサイトも、すべてCSSによってレイアウトされていて、2006年8月にリニューアルされたばかりだ。

化粧品会社という特性から、視覚的要素の重要度は高いはずだが、この企業では、そういった視覚的な部分の完成度を高く保ちつつ、しっかりHTMLとCSSで情報と視覚的要素を分離させている。

デザイン表現についても、トップページから第二階層のドアページ、第三階層以下のページを、デザインコンセプトを統一させて、バリエーションを展開する部分は「企業サイトがCSSを使うとデザインが単調になる」という都市伝説を払拭するものであるといえる。視覚障害者や高齢者に配慮した文字サイズの変更ボタンや、印刷用のCSSを用意して、プリントアウト時に必要な情報だけを印刷するように配慮している点も見逃せない。

アクセシビリティとクリエイティビティを考えるフォーラム
「アックゼロヨン」

「アックゼロヨン」アックゼロヨンでは、ウェブ制作者やウェブ担当者向けのセミナーを開催している。

CSSレイアウトや、アクセシビリティに取り組む際に問題となるのがクリエイティブとのバランスだ。アックゼロヨンは、アクセシビリティとクリエイティビティを両立させたウェブサイトが広く一般に作られることを目的としたフォーラムで、2006年もアワードやセミナーなど積極的な活動を行っている。

アックゼロヨンの名前の由来は、Accessibility＋Creativityという意味それぞれの単語の頭文字からAcC（アック）という造語にゼロヨンを追加したものだ。ゼロヨンとは、日本のアクセシビリティにとってJISが規格を公布した年でもある2004年に由来している。

アックゼロヨン最大の活動は、アクセシビリティとクリエイティビティに優れたサイトを選出していこうというもので、「アックゼロヨン・アワード」を毎年実施している。この活動は、社会福祉法人プロップ・ステーションとの共同で行われているもので、後援として、総務省、経済産業省、国土交通省、厚生労働省、文部科学省、外務省の合計6省庁が名前を連ねている。

アワードに関してはグランプリや部門賞を設けている以外に、それぞれの省庁の大臣賞も制定されている。これはウェブの業界では他に例がないものだ。アワードの結果は、2006年10月31日に発表されウェブサイトで公開されている。

また、アワードをサポートする形で、アックゼロヨンでは無料のセミナーを開催している。セミナーの内容はアクセシビリティやクリエイティビティだけに限らず、ウェブサイトを構築するための多くの要素をサポートしており、アクセスログ解析や、SEOといったテーマで専門家を招いたプレゼンテーションを行っている。

アックゼロヨン
http://www.acc04.jp/