このページの本文へ

jQueryアニメ&エフェクト合わせ技で画像を拡大

2009年03月02日 06時00分更新

古籏一浩、ASCII.jp

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

 コンテンツの魅力を引き立て、十分に伝えるためには、時には“一歩引いた”Webデザインがいいケースもあります。たとえば、自身が手がけた仕事を紹介するデザイナーのポートフォリオサイトがそうかもしれません。ポートフォリオサイトそのものを作品と見なして、凝ったビジュアルデザインを作り込むこともできますが、過去に手かげた作品が豊富であれば、それらの個性を生かすシンプルなデザインもいいでしょう。

 スイスのデザイナーユニット「Contreforme」のポートフォリオサイトは、後者のアプローチ――各々の作品を引き立たせるサイトデザイン――を採用しています。ただし、それだけではありません。このサイトが採っているもうひとつの手法が、アニメーション/エフェクトによる楽しい演出です。今回はこのサイトの技に注目してみます。

Contreforme

今回のお手本サイト:『Contreforme』

企業のCI策定やグラフィックデザイン、Webデザインを手掛けるスイスのデザイナーユニット「Contreforme」のポートフォリオサイト。コンテンツは、過去の作品紹介、クライアントリスト、会社案内の3つのみとシンプル。それぞれフランス語と英語の2ヵ国語に対応したページが用意されている。

http://www.contreforme.ch/


シンプルな「美しさ」に、「楽しさ」を加える

 Contreformeのトップページを開くと目に入ってくるのは、広いホワイトスペースに並ぶいくつかのグラフィック作品のサムネイル画像。サムネイル画像とロゴ以外の画像要素を排除し、グレーの細いウェイトのフォントを基本に使うことで、作品だけが浮かび上がるデザインになっています。とてもシンプルで美しいページです。

Contreforme
Contreformeのトップページ。過去に手がけた作品の紹介を兼ねています

 ただ、これだけだと「ちょっとシンプルすぎて素っ気ないかな」と思われることもあるしれません。Contreformeは、このシンプルな美しさに、ちょっとした仕掛けをすることで「楽しさ」をプラスしています。試しにサムネイル画像をクリックしてみましょう。すると、サムネイル画像がぐんと大きくなり、作品を解説するテキストが現れました。他のサムネイル画像をクリックすると、今度はそれまで拡大されていた画像は小さくなり、代わって今選んだものが大きくなります。思わず「おっ」と声を上げたくなる、滑らかで気持ちいい動きです。

Contreforme
サムネイルをクリックした状態。画像が大きくなるだけでなく、同時に詳細情報が表示されました

 もちろん、単に楽しいだけでなく、こうして作品の詳細情報の表示/非表示を切り替えられることで、ページをすっきりとまとめられる効果もあります。また、詳細情報を表示するためにウィンドウをポップアップさせたり、画面遷移をしなくてもいい、というメリットもあります。

 次ページからは、JavaScriptを使って、このアニメーション/エフェクト処理を再現してみたいと思います。

Web Professionalトップページバナー

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

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング