「Best of CSS Design 2008」注目サイトはこれだ！
海外Webデザイン、2008年の潮流
2008年12月15日 16時07分更新
巨大な背景画像を大胆に使う
海外サイトならではの傾向なのだろうか。今回の「Best of ～」には、日本の企業サイトではあまり見かけない、一昔前では考えられなかったような大きなサイズの画像を背景に使うWebサイトが数多くあった。
「Housing Works」は、トップページを開いた瞬間に飛び込んでくるメインビジュアルが強烈な印象を与える。このビジュアル部分は1枚の大きな画像を背景として配置し、その上に半透明のナビゲーションを重ねている。インパクトがあり、見た目に非常に美しいサイトだ。
 |
|---|
| 「Housing Works」（http://www.housingworks.org/）。インパクトのあるメインビジュアルは5～6パターンあり、ランダムに表示している |
「Carfreak.net」と「GOTOCHINA」は、背景としてブラウザーいっぱいの大きな写真が表示される点では他の同種のサイトと同じ。ただ、GOTOCHINAの場合、長くなりがちなロード時間に白スペースが表示されるのを防ぐため、最初に軽い「LOADING」と書かれた画像を並べておき、その上にあとで写真画像を重ねて表示している。待ち時間がちょっと楽しくなる仕掛けだ。
 |  | |
|---|---|---|
| 「GOTOCHINA」（http://ringvemedia.com/）。待ち時間対策として、背景に「LOADING」の画像を敷いて、上から写真画像をかぶせている | ||
 |
|---|
| こちらも巨大画像が美しいサイト。トップページ以外にもページごとに大きな1枚の画像を背景にしていてページをめくるのが楽しい「Carfreak.net」（http://carfreaks.net/） |
デザインがおもしろい、 ユニークなフッターたち
昔ならコピーライト表示やシンプルなテキストナビゲーションで決まりだったフッター。そのフッターにまで、かなり気合を入れてデザインされているサイトが多かった。たとえば、かわいいイラストを配した「Future of Web Apps - Miami 2009」のフッターは、縦600ピクセル以上もある。文字要素も本文の大見出しのような大きなサイズで見やすい。
 |
|---|
| ぱっと見ではとてもフッターには見えない「Future of Web Apps - Miami 2009」（http://events.carsonified.com/fowa/2009/miami/）。かわいいイラストに、大きな文字が目立つデザイン |
サイト内検索や問い合わせフォームを設置したり、最近の更新状況を示したりと、構成要素に工夫を凝らすサイトもある。少し変わったところでは、「MacAlian Ridge」というサイトのフッターがおもしろい。固定してある背景画像（森のイメージ）と、スクロールするメインカラムのフッター画像（木のイメージ）が重なり、奥行きのあるサイトに見える仕掛けだ。「何を配置するか」「どうレイアウトするか」――フッターだけに着目して50サイトを眺めてみてもなかなか興味深い。
 |
|---|
| 「Brande07」（http://www.branded07.com/）もイラストがかわいいフッター。問い合わせフォームやサイト内検索をフッターに置くサイトもいくつかあった |
 |
|---|
| 「MacAlian Ridge」（http://macallanridge.com/）。スクロールするとメインカラムのフッターと背景画像が重なり、奥行きのあるデザインにみえる |
「Best of CSS Design 2008」で紹介されているWebサイトは、さすがにどれもよくできているものばかり。この記事で紹介したサイト以外にも多くの見どころがあり、来年、新しいWebデザインを考える上でのいいヒントになる。ぜひ自分なりの着目ポイントをもって、この冬休みにでもじっくり眺めてみてはどうだろうか。
