29分でできる！あのサイトの“技”を盗め ― 第10回

jQueryだけで作る、サムネイル画像を魅力的に見せる方法

2008年11月17日 09時00分更新

文● 古籏一浩、ASCII.jp

　普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。

　「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。

今回のお手本サイト：『Sikker』

アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが多く並ぶ自身の作品はWebサイト／HTMLメール／広告用バナーの3つに分類され、タブを使って表示を切り替えるつくりになっている。

http://www.sikker.com.ar/

ひと工夫あるマウスオーバーでサムネイルを魅せる

　1ページで構成されるSikkerのサイトにアクセスすると、まず目に飛び込んでくるのが鮮やかなたくさんのサムネイル画像です。過去にCalabreseさんがデザインを手がけたWebサイトの一部を表すサムネイル画像はカラフルで、訪問者に楽しい印象を与えています。


鮮やかな作品のサムネイル画像が並ぶSikker

　これだけでもかなりインパクトのあるデザインですが、どれか気になった画像1つにマウスカーソルを重ねてみましょう。


マウスカーソルを重ねたところだけハイライト表示に

　すると、一瞬で他のサムネイル画像がグレーアウトになり、マウスオーバーしている画像だけがハイライト表示に切り替わりました。マウスを画像からそらすと、またもとの表示にすぐに戻ります。動きとしてはシンプルですが、見た目にはかなりインパクトがあり、楽しい効果です。今回はこの技を自分のサイトに取り込んでみましょう。

前へ 1 2 3 4 5 次へ

ツイートする