沢山のページを遷移しなければならなかったり、適切な入力サポートのないお問い合わせフォームで困惑させたりして、あなたのサイトから大切なユーザーが逃げていませんか。 せっかちなネットユーザーを逃さないためには、Ajaxを利用した直感的・動的なユーザーインタフェースが有効です。
Ajaxとは?
「Ajax(エイジャックス)」と呼ばれるJavaScriptの応用技術を使った、軽快で直感的なユーザーインタフェースを持つWebサイトが増えてきました。
Ajaxとは、簡単にいえば、ユーザーがクリックなどした際に、Webページを丸ごと書き換えずに、コンテンツの一部だけを更新することができる技術です。これは「非同期通信」と呼ばれます。特に北米では、Ajaxは、デザイン性にこだわったサイトや、ユーザーインタフェースを重んじるサイトなど先進的なサイトで活用されるようになっています。
Ajaxは、たとえば以下のような活用事例があります。
Ajaxの活用事例
欲しい商品をショッピングカートにドラッグ&ドロップで投げ込んだり、また要らない商品を削除するとゴミ箱に放りこまれたりといった楽しいアニメーション演出を行うことができます。
以下のサンプルは、画面遷移をせずに更新できるショッピングカートです。コンボボックスの数値変更や「削除」ボタンのクリックで、合計金額が変わります。（「初期状態に戻す」をクリックすると、元に戻ります）
動作サンプル
@ITの連載「Ajaxおいしいレシピ」で作成したサンプルです
「色」「サイズ」「素材」など、さまざまな検索キーで複合的に絞りこみたいデータは、アナログなスライダーを使えば簡単に行うことができます。
ページ上の要素をマウスのドラッグで複数選択、自由に移動したりなど、情報をすばやく直感的にグルーピングすることができます。旅行情報サイトなどにも適しているUIでしょう。
以下のサンプルでは、ファイルをドラッグで複数選択、選択済みファイルをドラッグ＆ドロップでのディレクトリ内/別のディレクトリに移動ができます。
動作サンプル
@ITの連載「Ajaxおいしいレシピ」で作成したサンプルです
サイト内メニューをMac OSなどのDock(ドック)風ランチャーに。滑らかなアニメーションで直感的なブラウズができるだけでなく、ドラッグ&ドロップで項目を移動できるようにするといったカスタマイズも可能です。
最近では、Ajaxを実現する数々のライブラリ(プログラムの部品)がオープンソースで提供されています。これらのライブラリを利用することなどで、先進的なユーザーインタフェースを低コストで、かつ高い保守性も備えたかたちで開発することができるようになりました。
Ajaxを実現するライブラリの例
Prototype.js
Scriptaculous
jQuery
Ext JSまたJavaScriptでは、DHTML(ダイナミックHTML)によってブラウザ内のページを動的書き換え、直感的なユーザーインタフェースを実現することもできます。
- 入力フォームの特定のチェックボックスをチェックすると、新たに入力フォームが表示される
- タブをクリックすると、読み込み済みの内容を瞬時に切り替え表示する
- プルダウンAの項目を選択したら、動的にプルダウンBの項目が書き換わる
このように、AjaxとDHTMLをうまく利用することで、ユーザー満足度が高いリッチなユーザーインタフェース(UI)を持つWebサイトを作り上げることができます。
あなたのWebサイトは、ユーザーに何度もクリックを強いたり、エラーの度にユーザーの入力内容をリセットしたりといった無粋なインタフェースで、大事な顧客を逃していませんか？
Ajaxで実現できるリッチUIのサイトでは、エンドユーザーがストレスなく欲しい情報を得ることができ、商用サイトにとって重要な入力フォームでも、ユーザーに適切なフィードバックを返すことで途中離脱率を下げるといったビジネス上の効果も高いのです。
アークウェブのAjax導入事例
-
- ランキングやアーティスト画像などの段階的ローディング
- ランキングのページ自動継ぎ足し表示(Auto Pagerize)
- ランキングページでのカラムのアニメーション
-
- アンケート回答欄のスライダー表示
- アンケート回答の現在達成数のリアルタイム表示
- アンケートの質問の自動継ぎ足し表示
執筆
Ajax開発の最新動向や、デザインパターン、UIパターンの研究をし、またスタッフは技術系専門サイトへの寄稿も行っています。
「パターンとライブラリで作るAjaxおいしいレシピ」
CTO/SEの志田が、エンジニア向け情報サイト「＠IT」(アイティメディア株式会社)で、Ajaxの最新実装例を取り上げる「パターンとライブラリで作るAjaxおいしいレシピ」を連載しています。
- jQueryを使ってTwitterをおいしくマッシュアップ ─ ＠IT
- prototype.jsでYouTubeをインクリメンタルサーチ ─ ＠IT
- Ext JSとprototype.jsで作るリッチなUI ─ ＠IT
「つくるぶガイドブログ」
SEの竹村が、リクルートの研究機関メディアテクノロジーラボが提供する「つくるぶ」で、JavaScriptの最新ライブラリの活用ノウハウやマッシュアップサービスをテーマに記事を書いています。
また、つくるぶガイドブログの前に、JavaScriptの動向をまとめたブックマーク集を2007年6月～9月まで提供していました。
関連ソリューション
AjaxでリッチUI構築についてのお問い合わせはこちら
