29分でできる！ あのサイトの“技”を盗め ― 第10回
jQueryだけで作る、サムネイル画像を魅力的に見せる方法
2008年11月17日 09時00分更新
普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。
「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。
 |
|---|
今回のお手本サイト：『Sikker』
アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが多く並ぶ自身の作品はWebサイト／HTMLメール／広告用バナーの3つに分類され、タブを使って表示を切り替えるつくりになっている。
ひと工夫あるマウスオーバーでサムネイルを魅せる
1ページで構成されるSikkerのサイトにアクセスすると、まず目に飛び込んでくるのが鮮やかなたくさんのサムネイル画像です。過去にCalabreseさんがデザインを手がけたWebサイトの一部を表すサムネイル画像はカラフルで、訪問者に楽しい印象を与えています。
 |
|---|
| 鮮やかな作品のサムネイル画像が並ぶSikker |
これだけでもかなりインパクトのあるデザインですが、どれか気になった画像1つにマウスカーソルを重ねてみましょう。
 |
|---|
| マウスカーソルを重ねたところだけハイライト表示に |
すると、一瞬で他のサムネイル画像がグレーアウトになり、マウスオーバーしている画像だけがハイライト表示に切り替わりました。マウスを画像からそらすと、またもとの表示にすぐに戻ります。動きとしてはシンプルですが、見た目にはかなりインパクトがあり、楽しい効果です。今回はこの技を自分のサイトに取り込んでみましょう。
この連載の記事
- 第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でびゅんびゅんスライド！ページ切換法
- この連載の一覧へ
