このページの本文へ

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

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

古籏一浩、ASCII.jp

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

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

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

Sikker

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

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

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


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


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


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


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


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

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

Web Professionalトップページバナー

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

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

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

ランキング