
「プロが作ったWebサイトのあの“技”をウチのサイトでも(それもタダで)マネしたい!」――。そんな欲求に応えてくれる JavaScriptライブラリ/フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
2009年06月02日 14時00分更新
文●古籏一浩、ASCII.jp

WebPro
「Yahoo!不動産」が採用する“ソートできるテーブル”を組み込んでみよう。ライブラリを使えば僅かな作業で実現できる。

WebPro
Googleマップと自作のスクリプトで、地図と連動するショップガイドのWebサイトを作ろう。

WebPro
海外サイトで見かけたナビゲーションメニュー「Lava Lamp」。シンプルなWebデザインのアクセントになる、Lava Lampの使い方を紹介する。

WebPro
jQueryでかっこよく使いやすいUIを作ろう。今回は、くるくる回るカルーセルをページをめくるナビゲーションに使う方法について。

WebPro
運営するWebサイトに複数のショッピングサイトのアフィリエイトリンクを張りたい――そんなときはJavaScriptでちょっとした工夫をしてみよう。

WebPro
米国のインタラクション・デザイナーのサイトで使われているナビゲーション。意外な動きが気持ちいいこのメニューをjQueryで再現してみよう。

WebPro
Amazonのようにウィンドウの幅に合わせてコンテンツの表示を変えるようにしたい――難しいリキッド・レイアウトで使えるテクニックにチャンレジしてみよう。

WebPro
スライドするタブネルを作ってみよう。既存の便利なJavaScriptライブラリを使いつつ、ちょっとしたカスタマイズの工夫も紹介。

WebPro
海外サイトをお手本に、ページの切り換えをJavaScriptで派手に演出する方法を紹介しよう。スライドする動きもjQeryを使えば手軽に作れる。

WebPro
海外サイトをお手本に、ページの切り換えをJavaScriptで派手に演出する方法を紹介しよう。スライドする動きもjQeryを使えば手軽に作れる。

WebPro
jQueryを使ってWebサイトのブラッシュアップに挑戦。コンテンツの魅力を引き立てるシンプルなWebデザインに、ちょっとした華を添えるアニメーション/エフェクト処理を作ってみよう。

WebPro
右から左へ文字が流れてくる、懐かしの「マーキー」をアレンジ。HTMLタグではなくJavaScriptで、展開パネルと組み合わせたUIを作ってみよう。

WebPro
グルメサイトなどでおなじみの「地図から探す」機能。GoogleマップのAPIを使って、自分のWebサイトへ設置してみよう。

WebPro
Webサイトに地図を載せる方法としてすっかり定着したGoogleマップ。今回は、静的なGoogleマップを使ってお店の地図を簡単に表示してみよう。

WebPro
いつもの見慣れたページにこそ一工夫を――。写真サイトのブラッシュアップテクニックもいよいよラストに。今回はJavaScriptで楽しいフォームのアレンジに挑戦。

WebPro
たくさんの画像を美しく効果的に見せるには? 今回はJavaScriptを使ったスムーズな動きのアコーディオン+αの技でWebサイトをブラッシュアップしていこう。

WebPro
国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく連載。第10回はサムネイル画像の魅力的な見せ方について。

WebPro
国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく連載。第9回はFlickrのようなスライドショー機能を組み込んでみよう。

WebPro
国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく連載。第8回はスムーズなスクロールを実現する方法について。

WebPro
国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく連載。第7回は画像を気持ちよく切り替える方法について。

WebPro
国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく方法を紹介する本連載。第6回はFlashを使わずにインパクトのある表現を実現する方法について。

WebPro
国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する本連載。第5回はECサイトの詳細検索ダイアログのUIに挑戦してみよう。

WebPro
国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する本連載。第4回はAmazon.co.jpの回転式スライドパネル(カルーセル)に挑戦しよう。

WebPro
国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する本連載。第3回はasahi.comにある開閉パネルを再現してみよう。

WebPro
国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する本連載。第2回は海外のネットショップで見かけた画像ズーム機能を組み込んで見ましょう。

WebPro
「プロが作ったWebサイトのあの“技”をウチのサイトでも(それもタダで)マネしたい!」――。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。第1回目はツールチップの組み込みです。
