このページの本文へ

海外Webデザイン、2008年の潮流 (2/2)

2008年12月15日 16時07分更新

文●小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
本文印刷

巨大な背景画像を大胆に使う

 海外サイトならではの傾向なのだろうか。今回の「Best of ~」には、日本の企業サイトではあまり見かけない、一昔前では考えられなかったような大きなサイズの画像を背景に使うWebサイトが数多くあった。

 「Housing Works」は、トップページを開いた瞬間に飛び込んでくるメインビジュアルが強烈な印象を与える。このビジュアル部分は1枚の大きな画像を背景として配置し、その上に半透明のナビゲーションを重ねている。インパクトがあり、見た目に非常に美しいサイトだ。

Best Of CSS Design

「Housing Works」(http://www.housingworks.org/)。インパクトのあるメインビジュアルは5~6パターンあり、ランダムに表示している


 「Carfreak.net」「GOTOCHINA」は、背景としてブラウザーいっぱいの大きな写真が表示される点では他の同種のサイトと同じ。ただ、GOTOCHINAの場合、長くなりがちなロード時間に白スペースが表示されるのを防ぐため、最初に軽い「LOADING」と書かれた画像を並べておき、その上にあとで写真画像を重ねて表示している。待ち時間がちょっと楽しくなる仕掛けだ。

「GOTOCHINA」(http://ringvemedia.com/)。待ち時間対策として、背景に「LOADING」の画像を敷いて、上から写真画像をかぶせている


Best Of CSS Design

こちらも巨大画像が美しいサイト。トップページ以外にもページごとに大きな1枚の画像を背景にしていてページをめくるのが楽しい「Carfreak.net」(http://carfreaks.net/)



デザインがおもしろい、 ユニークなフッターたち

 昔ならコピーライト表示やシンプルなテキストナビゲーションで決まりだったフッター。そのフッターにまで、かなり気合を入れてデザインされているサイトが多かった。たとえば、かわいいイラストを配した「Future of Web Apps - Miami 2009」のフッターは、縦600ピクセル以上もある。文字要素も本文の大見出しのような大きなサイズで見やすい。

Best Of CSS Design

ぱっと見ではとてもフッターには見えない「Future of Web Apps - Miami 2009」(http://events.carsonified.com/fowa/2009/miami/)。かわいいイラストに、大きな文字が目立つデザイン


 サイト内検索や問い合わせフォームを設置したり、最近の更新状況を示したりと、構成要素に工夫を凝らすサイトもある。少し変わったところでは、「MacAlian Ridge」というサイトのフッターがおもしろい。固定してある背景画像(森のイメージ)と、スクロールするメインカラムのフッター画像(木のイメージ)が重なり、奥行きのあるサイトに見える仕掛けだ。「何を配置するか」「どうレイアウトするか」――フッターだけに着目して50サイトを眺めてみてもなかなか興味深い。

Best Of CSS Design

「Brande07」(http://www.branded07.com/)もイラストがかわいいフッター。問い合わせフォームやサイト内検索をフッターに置くサイトもいくつかあった


Best Of CSS Design

「MacAlian Ridge」(http://macallanridge.com/)。スクロールするとメインカラムのフッターと背景画像が重なり、奥行きのあるデザインにみえる


 「Best of CSS Design 2008」で紹介されているWebサイトは、さすがにどれもよくできているものばかり。この記事で紹介したサイト以外にも多くの見どころがあり、来年、新しいWebデザインを考える上でのいいヒントになる。ぜひ自分なりの着目ポイントをもって、この冬休みにでもじっくり眺めてみてはどうだろうか。

あなたの“おすすめ”Webサイト 募集!

 「かっこいいデザインのWebサイトをたまたま見つけた」「最近リニューアルしたあのサイトがスゴい!」など、おすすめのサイトを編集部に教えていただけませんか? 自薦他薦、国内外は一切問いません。本サイト内の記事で随時、紹介させていただきます。情報のご提供は以下のフォームから。

-->

■関連サイト

前へ 1 2 次へ

Web Professionalトップへ

この記事の編集者は以下の記事をオススメしています

すぐに役立つ!プロの解説記事
一覧へ
Web Professionalの本
一覧へ