コンテンツの魅力を引き立て、十分に伝えるためには、時には“一歩引いた”Webデザインがいいケースもあります。たとえば、自身が手がけた仕事を紹介するデザイナーのポートフォリオサイトがそうかもしれません。ポートフォリオサイトそのものを作品と見なして、凝ったビジュアルデザインを作り込むこともできますが、過去に手かげた作品が豊富であれば、それらの個性を生かすシンプルなデザインもいいでしょう。
スイスのデザイナーユニット「Contreforme」のポートフォリオサイトは、後者のアプローチ――各々の作品を引き立たせるサイトデザイン――を採用しています。ただし、それだけではありません。このサイトが採っているもうひとつの手法が、アニメーション/エフェクトによる楽しい演出です。今回はこのサイトの技に注目してみます。
![]() |
|---|
今回のお手本サイト:『Contreforme』
企業のCI策定やグラフィックデザイン、Webデザインを手掛けるスイスのデザイナーユニット「Contreforme」のポートフォリオサイト。コンテンツは、過去の作品紹介、クライアントリスト、会社案内の3つのみとシンプル。それぞれフランス語と英語の2ヵ国語に対応したページが用意されている。
シンプルな「美しさ」に、「楽しさ」を加える
Contreformeのトップページを開くと目に入ってくるのは、広いホワイトスペースに並ぶいくつかのグラフィック作品のサムネイル画像。サムネイル画像とロゴ以外の画像要素を排除し、グレーの細いウェイトのフォントを基本に使うことで、作品だけが浮かび上がるデザインになっています。とてもシンプルで美しいページです。
![]() |
|---|
| Contreformeのトップページ。過去に手がけた作品の紹介を兼ねています |
ただ、これだけだと「ちょっとシンプルすぎて素っ気ないかな」と思われることもあるしれません。Contreformeは、このシンプルな美しさに、ちょっとした仕掛けをすることで「楽しさ」をプラスしています。試しにサムネイル画像をクリックしてみましょう。すると、サムネイル画像がぐんと大きくなり、作品を解説するテキストが現れました。他のサムネイル画像をクリックすると、今度はそれまで拡大されていた画像は小さくなり、代わって今選んだものが大きくなります。思わず「おっ」と声を上げたくなる、滑らかで気持ちいい動きです。
![]() |
|---|
| サムネイルをクリックした状態。画像が大きくなるだけでなく、同時に詳細情報が表示されました |
もちろん、単に楽しいだけでなく、こうして作品の詳細情報の表示/非表示を切り替えられることで、ページをすっきりとまとめられる効果もあります。また、詳細情報を表示するためにウィンドウをポップアップさせたり、画面遷移をしなくてもいい、というメリットもあります。
次ページからは、JavaScriptを使って、このアニメーション/エフェクト処理を再現してみたいと思います。
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ+jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo!の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド!ページ切換法
- この連載の一覧へ




















![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM] Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif)




