29分でできる！ あのサイトの“技”を盗め ― 第7回
JavaScriptでとっても滑らか！画像切替のシンプルな技
2008年10月20日 04時00分更新
「優れたデザインのWebサイトを探したい」。そんなときに役立つのが、Webデザインのギャラリーサイトです。美しいWebサイトのサムネイル画像がずらっと並ぶギャラリーは眺めているだけでも楽しく、新しいデザインのアイデアを考える刺激を与えてくれます。
「cssfights.com」もそうしたギャラリーサイトの1つですが、ユニークなのはWebサイトを“対決させる”というコンセプト。cssfights.comのトップページには2つのWebサイトのサムネイルが表示され、好みのサイトを選ぶよう促されます。ギャラリーページは、この対決の戦績（投票結果）順にWebサイト名が並んでいるので、いまどういったデザインが好まれているのか、一目で分かる作りです。
今回は、このcssfights.comの“技”をお手本とさせてもらいましょう。
 |
|---|
今回のお手本サイト：『cssfights.com』
優れたレイアウト／デザインのWebサイトをサムネイルで紹介するギャラリーサイト。デザイン／ファッション／ビジネスなどの幅広いジャンルで、ユーザーがオススメするサイトを取り上げている。トップページでサイト同士をランダムに“対決”させ、評価の高い順番にギャラリーに並べている。
気持ちいい動きで画像と文字情報を切り替える
cssfights.comに限らず、1画面にサムネイル画像がたくさん並ぶギャラリー系のサイトでは、構成要素をうまく整理して表示しないと非常にごちゃごちゃとした印象になってしまいます。なるべくテキスト要素は配置せずに、画像だけを美しくレイアウトしたい――そこで、cssfights.comのギャラリーページ「livechart」は、普段は画像だけを表示しておき、マウスを合わせたときにだけ、テキスト要素を表示するようになっています。
 |  | |
|---|---|---|
| cssfights.comの「live chart」のページ。Webサイトのサムネイル画像にマウスカーソルを合わせるとフェードイン/フェードアウトしながらスムーズに画像が切り替わります | ||
特にWebサイトを対決させ、結果のよい順に並べているcssfights.comでは、「何回対決したのか」「そのうち何回勝ったのか」といった情報がマウスカーソルを合わせるだけで確認できるのは便利です。
ただ、単に画像が切り替わるだけではあまりおもしろくありません。cssfights.comの場合、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]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
