29分でできる！ あのサイトの“技”を盗め ― 第8回
HTMLもCSSも書換不要！気持ちいいスクロール
2008年10月27日 04時00分更新
Webサイトを作るにあたって、ネット上でデザインの参考になるサイトを探していると、プロのWebデザイナーのポートフォリオサイトに行き当たることがあります。ポートフォリオサイトはデザイナーにとってのショーケース。気合の入った作りや実験的な要素を盛り込んでいるサイトもあり、単純に眺めても楽しいものです。
今回取り上げるサイト「Cosmive」は、Webデザイナー・Muhammad Uzairさんのポートフォリオサイト。色鮮やかで美しいグラフィックに、JavaScriptによるダイナミックなユーザーインターフェイスを合わせています。今回はこのサイトから参考にさせてもらいましょう。
 |
|---|
今回のお手本サイト：『Cosmive』
パキスタン在住のWebデザイナー、Muhammad Uzairさんのポートフォリオサイト。自身のプロフィール、手がけた作品の紹介、問い合わせフォームまで、1ページにコンパクトにまとめられている。
心地よい動きのスムーズスクロール
通常なら複数のページを分けるべきところを、あえて1ページに収める――それが「Cosmive」のデザイン上の最大の特徴でしょう。とはいえ、単に1ページにずらずらと列挙するのでは見づらいので、「Work」「Links」「Contact」といった項目をメニューバーに並べ、ページ内のアンカーを設定しています。マウスでクリックするとそれぞれの項目にジャンプするので、1ページとはいっても使い勝手は悪くありません。
 |  | |
|---|---|---|
| cssfights.comの「live chart」のページ。Webサイトのサムネイル画像にマウスカーソルを合わせるとフェードイン/フェードアウトしながらスムーズに画像が切り替わります | ||
注目はページ内を移動するときの、スムーズな動き。単純なリンクであればいきなりスクロールして画面が切り替わってしまいますが、Cosmiveの場合はJavaScriptを使ってなめらかにスクロールするようになっています。これがとても気持ちのいい動きなのです。もちろん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でびゅんびゅんスライド！ページ切換法
- この連載の一覧へ
