Webサイトを使いやすく、楽しくするリッチなユーザーインターフェイス(UI)。手軽に使えるオープンソースのJavaScript/Ajaxライブラリが充実してきたおかげで、従来はFlashでしかできなかったようなUIが、HTML/CSS+JavaScriptだけで作れるようになった。
ここに、ASCII.jpで紹介したJavaScriptライブラリの使い方、実際の採用サイトの情報をまとめてみた。ぜひ自分のWebサイトのUI制作の参考にしてみよう。
※このページは随時更新します
Last update:2008年12月18日
JavaScript/Ajaxライブラリ紹介記事
これは便利だ!Excel→Table化するjQueryプラグイン
Webページに掲載する面倒な表(テーブル)の作成を楽にしたい――。CSVファイルを読み込み、Tableに整形して表示するJavaScriptライブラリを紹介しよう。
デザイナーにオススメ!JavaScript滑らかメニュー
分かりやすいナビゲーションメニューをなるべく簡単に設置したい。そんなときに使えるJavaScriptライブラリが「Smooth Navigation Menu」だ。
YUIでも作れるようになった!Amazon風インターフェイス
Amazon.co.jpのレコメンド表示のようなスライド回転式パネル(カルーセルUI)を自分のサイトにも取り入れたい――。「YUI 2.6.0」でもほぼ同様のUIが作れるようになった。
さらばプルダウン! 地図で入力できるWebフォーム
「HTMLフォームでの都道府県名の選択」に特化した新発想のJavaScriptライブラリが登場している。プルダウンで選択する代わりに、地図をマウスでクリックして都道府県名を入力できる。
たった6行でWebサイトのUIをガラッと変える
Webページをお手軽に雑誌や本のようなレイアウトに変えるJavaScriptライブラリが登場。組み込みは簡単。長文の読み物サイトなどにオススメだ。
JavaScript/Ajaxライブラリ採用サイト紹介記事
Flash不要!JavaScriptで派手なWebデザイン
キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。パリのWebデザイナー「Sebcreation」のサイトは、そんな常識を打ち破ることに挑戦している。
ソニーグループ、FlashやめてAjaxでリニューアル
最近ではFlashの代わりにAjax/JavaScriptを使ったサイトも増えている。9月9日にリニューアルされたソニーグループのコーポレートサイトもその1つだ。
初心者歓迎! チュートリアル記事
(連載)29分でできる! あのサイトの“技”を盗め
「プロが作ったWebサイトのあの“技”をウチのサイトでも(それもタダで)マネしたい!」――。国内外の商用サイトの優れたUIをお手本にて、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する。
- 第12回 エラーでブルブル!! JavaScriptでおもしろフォーム
- 第11回 すぐ使える!なめらかアコーディオンで“魅せる”UIに
- 第10回 jQueryだけで作る、サムネイル画像を魅力的に見せる方法
- 第9回 Flickr風スライドショーをJavaScriptで再現
- 第8回 HTMLもCSSも書換不要!気持ちいいスクロール
- 第7回 JavaScriptでとっても滑らか!画像切替のシンプルな技
- 第6回 FlashではなくjQueryで!インパクトのあるUIを作ろう
- 第5回 たった1行で再現する有名ECサイトのUIデザイン
- 第4回 jQueryで作る“Amazon風”インターフェイス
- 第3回 asahi.comの開閉パネルをJavaScriptで再現
- 第2回 ステーキ丼をJavaScriptで美味しく拡大
- 第1回 チッちゃい画像にはデッカいツールチップを!