Ajax活用のポイント：ページ遷移とユーザビリティの関係

たにぐちまこと（H2O Space.）
2008/01/16 15:00

AjaxなWebサイトは画面の遷移こそ少ないが、変化が分かりづらいという欠点もある。これを克服しよう。

　従来のWebサイトの場合、ページ内の一部でも情報が変更される場合は、ページ全体を読み込み直す必要がある。そのため、Webブラウザは一瞬真っ白になってしまい、すでに送信済のデータも改めて送信し直さなければならないなど、非常に効率が悪かった。しかしその反面、利用者にとっては変化が分かりやすいという利点もあった。

　これがAjaxになると、必要な部分だけを任意のタイミングで書き換えることができる。これは便利で効率がよい反面、利用者には「変化が分かりづらい」という欠点になり得る。

　そこで、Ajaxで画面を書き換える場合には、その変化を分かりやすくアピールする必要があるだろう。例えば、次のWebページをご覧いただきたい。

関東エリアの高校の先輩 | クチコミ満載！　先輩の大学合格体験記 | 進研ゼミ高校講座

　ここで、画面の右側にあるリストボックスで、希望の都道府県を選ぶ。すると、その下の高校名リストが、選んだ都道府県によって絞り込まれるという仕組みが搭載されている（図1）。

図1 ベネッセコーポレーション 真剣ゼミ高校講座より

　しかし、機能を理解せずに利用すると、リストが更新されていることに気がつかないかも知れない。そこで、ここでは「ハイライト」というエフェクト処理を利用して、更新されたリストが光ったような演出を加えている。

　また、同サイトのトップページ、クチコミ満載！　先輩の大学合格体験記｜進研ゼミ高校講座｜ベネッセコーポレーションには、「大学をエリアから探す」で、全国の大学名をリストアップしている。地域によって分類してあるのだが、地域名を選んだときにリストが「その場で」変わるようになっている。この時も、そのことが分かりやすいように、切り替わる途中をアニメーションで示すことで、変化をアピールしている。

　このような演出を加えることで、分かりやすくするとともに、Webサイトに「リッチ」な演出を加える効果もある。

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Firefox 3 ソフトウェア開発 Google Ajax UI Linux 小技 iPod touch iPhone 3G Safari Webデザイン Mozilla CSS プログラミング言語 Firefox 仮想化 ブラウザ Opera Database RIA Windows WebKit Internet Explorer Windows Vista Chrome Java Mac OS X OS Off Topic Tips Microsoft Apple HTML クラウド iPhone モバイル Flash セキュリティ Webサービス JavaScript オープンソース Windows 7 アプリケーション 脆弱性 データベース Windows XP マイクロソフト インストール 開発環境 リファレンス
  • 話題のタグを見る »