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

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

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

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

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

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

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

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

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

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

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

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

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

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

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