29分でできる！ あのサイトの“技”を盗め ― 第26回
普通のtableタグを1行で動く表にするJSライブラリ
2009年06月02日 14時00分更新
大量の情報を分かりやすく一覧で見せたい。そんなときには、やはり「表（テーブル）」をうまく使いこなしたいもの。罫線やセルの色分け、文字サイズの調整などを調整して見やすくデザインすることはもちろんですが、同時に、ユーザーが求める情報を的確に、分かりやすく表示する仕掛けがあるといいでしょう。
ヤフーが運営する「Yahoo！不動産」は、ユーザーの操作によってテーブルを分かりやすく表示するユーザーインターフェイスが参考になるサイトです。単なる見た目の装飾ではなく、実際に使い勝手を向上させるためにAjaxを活用した好例と言えるでしょう。
今回は、このYahoo！不動産をお手本に、Webサイトのブラッシュアップに取り組みます。
 |
|---|
今回のお手本サイト：『Yahoo！不動産』
ヤフーが運営する不動産総合情報サイト。日本全国の売買／賃貸物件の情報が大量に掲載されており、「写真掲載の有無」「部屋の広さ」といったさまざまな条件で検索できる。検索結果一覧画面から、気になる物件情報だけを1ページにまとめて整理したり、業者に問い合わせるといったアクションをすぐに取れる便利なサイトだ。
ユーザー自身がソートできるテーブルで使いやすく
家賃や最寄駅、間取りなどの情報をテーブルで一覧表示する、Yahoo！不動産の検索結果ページ（サンプルページ）には、ユーザーが目的の情報に到達しやすくなるように、さまざまな機能が用意されています。その1つが、テーブルのソート機能です。
テーブルの見出し行から、「駅名」「賃料」などの任意の項目をクリックするだけで、その項目をキーにして行が入れ替わります。再度、同じ項目名をクリックすると、今度は昇順／降順が切り替わるので、たとえば、家賃が安い順、築年数が新しい順、といった具合に物件リストをチェックできます。
 |  | |
|---|---|---|
| ソートしたい項目の見出し行をクリックするだけで、その項目をキーにして並べ替えができます | ||
こうしたテーブルの並べ替え操作は、多くのパソコンユーザーが表計算ソフトなどでなじみがあることもあり、迷わず操作できる便利なものです。不動産サイトに限らず、大量の情報をテーブルで表示するようなサイトでは幅広く使える手でしょう。「ユーザーの操作でソートできるテーブル」を今回は組み込んでみましょう。
この連載の記事
- 第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でびゅんびゅんスライド！ページ切換法
- 第16回 jQueryアニメ＆エフェクト合わせ技で画像を拡大
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
