第13回　ユーザーが理解しやすい「表」をどうデザインするか

　一般的なRIA（Rich Internet Application）システムの作り方から，もう少し具体的な考え方に話を移しましょう。テーマは，「表」です。

　下図は，「表」形式の情報を人が見た場合の挙動を模式化したものです。【１】に目が止まってから，【２】に視点や思考が移るという順番です。

　「表」という概念は古くからあるので，横軸と縦軸に何か特別な「区分要素」が存在することは，ほとんどの人に刷り込まれていると言ってよいでしょう。したがって表の「カラム」に目が留まったら，その上と左に視線が動くのはきわめて自動的な挙動だと言えます。

　縦軸/横軸から探す場合もあるでしょうが，その表が何を主題にしているかがわかっているなら，軸にとらわれることなく，中の情報を探すことも自然なことでしょう。例えば，価格比較のような場合がそれにあたります。数字として一番自分に「良い」ものを見つけてから，軸上にある店舗や製品型番などを確認する場合です。

　このような挙動を，システムがどのように支援できるでしょうか。縦軸/横軸への視線移動を楽にするというアプローチがあります。RIAコンソーシアムでは，「十字クロス」と呼ぶことにしていたので，ここでもそう呼ぶことにします。

　十字クロスの例はたくさんありますが，同じ業界で少し違った手法を使っているのが，下記の全日本空輸（ANA）と日本航空（JAL）です。どちらもユーザーへの配慮をベースにしつつ，チャレンジしている部分を感じさせます。ANAが先行してこのRIAシステムをリリースし，約一年後にJALがリリースしていることも合わせて考えると，もう少し興味深い比較になるかもしれません。

初心者にも常連にもやさしいANAのアプローチ

　ANAは，旅行の楽しさを前面に押し出す戦略で，このRIAを開発しています。日程決定を大胆な円弧状のインタフェースで指定させ，運賃選択のところで「表」を用います。航空運賃は非常に種類が多いので，表にせざるを得ない情報の一つです。

　「○」や「×」で空席状況を知らせつつ，その下に価格情報を提供しています。ユーザーは，この価格を最初に注意して見るでしょう。そして，航空券の種類（横軸）と便名（縦軸）に目をやります。

　ですので，その視線の縦横スクロール（？）にナビゲーションとなる緑色の「帯」を付けています。さらに，その交差点の意味合いが薄れることを防ぐために，「クリックしてください」という言葉付きの「ふき出し」も追加しています。

　初めてこのインタフェースを触る人が迷わないように，また，慣れている人にも邪魔にならないような「デザイン」がシステムを支えています。

多くの情報をわかりやすく表示させるJALのアプローチ

　JALの場合，「十字クロス」を用いて，その交差点である一番大事な情報の視認性を高めつつ，さらに付加情報を表示するということをやっています。

　「表」中の，カーソルのある部分に対して「十字クロス」が付くのは同じですが，「クリックしてください」という文字を出す代わりに，少しだけその「カラム」が拡大し，文字が読みやすくなります。そして，空席状況は二種類のシートを同時に出しています。さらに，上級シート（クラスJ）については獲得マイル数が増えるので，その情報を少し間をおいてから表示します。

　小さなスペースに多くの情報を詰め込むのは，Webアプリケーションでは比較的高度なデザインだと言えます。ただ単に詰め込むのではなく，見苦しくないように，わかりやすいように，必然性を感じさせるように，情報を詰め込むことが要求されるからです。

　このRIAシステムでは，もう少し違う次元でも情報を扱っています。上級シートのマーケティングに一役買っているという点です。従来のHTML型の画面では，この二種類のシートは別々の画面で表示されており，ユーザーが望まない限り他方を見ることはできません。しかしこの画面では，両方の空席情報を表示できるのです。比較的価格差の小さなこのサービスの場合，ユーザー・インタフェースが，上級シートへの感心を高めていると言えます。

　ユーザーが購入の決断をした後に，「別のサービスもありますよ」と，類似あるいは関連サービスをお薦めする手法があります。しかし，一度買おうと決めた決断を揺るがされることは，ある人にとっては不快に感じたり，余計なお世話という反発を招くことにもなりかねません。選択可能なものをすべて表示したうえで決断をしてもらうのが自然な流れであり，この例はそれを実現しているRIAシステムと言えるでしょう。

「表」は視認性が最優先，続いて付加情報の表示を考える

　表形式のデータをユーザーに表示する際の考慮点をまとめて見ましょう。基本的には，「表」という表現形式の根本である，縦軸/横軸への参照性を高めることです。

　次に，さらに視認性を高めたり，別の付加情報を表示する方法を考える，というステップがあるのだと思います。ただ，その方法は，扱う商品の性質や特徴とも関連します。やみくもに情報過多の方向にユーザー・インタフェースを向けても，ユーザー（お客さま）のためにはなりません。このあたりが，RIAが単なるデータを表示するだけではないシステムと言われる所以です。

　JALの例では，たまたま商品特性とマーケティング的な思惑とが，上図のような拡大系のインタフェースとマッチしました。そして時差付きで表示される付加情報のタイミングも「うざく」ない程度にチューニングされています。

　繰り返しになりますが，データを並べれば良いという段階は終わりました。気持ちよく操作してもらうためには，もう少し作り手側に工夫が必要です。マーケティング的なニーズがあれば，それは尚のことでしょう。

　単なる「表」とはいえ，これをユーザーに気持ちよく操作してもらうには，様々なことを考える余地があります。そして，そういった開発上のニーズを受け止めてくれる技術をRIA基盤技術と呼ぶのであり，それはやはり開発者の手の打ちようが多様（Rich）でないとできないことなのでしょう。そして，そうした技術を駆使しながら，ユーザーの利便性を高めることが，アプリケーションを次世代のもの，つまりは「誰にとっても使いやすいアプリケーション」に引き上げる力となるのです。

　ただし，大切な注意点があります。作り手の「独りよがり」にならないことです。適切な情報量も適切な表示方法も，基本的には「操作するユーザー」に依存します。特に上記のようなサービスの場合，対象ユーザーの特性に大きな「幅」が予想されます。ログ分析を細かく活用するなど，ユーザーの動向を注視する運用体制は，「開発」を終えた後も必要と言えるでしょう。

参考） RIAシステム 構築ガイド 2005年版 ( RIAコンソーシアム )

三井 英樹（みつい ひでき） 1963年大阪生まれ。日本DEC，日本総合研究所，野村総合研究所，などを経て，現在ビジネス・アーキテクツ所属。Webサイト構築の現場に必要な技術的人的問題点の解決と，エンジニアとデザイナの共存補完関係がテーマ。開発者の品格がサイトに現れると信じ精進中。 WebサイトをXMLで視覚化する「Ridual」や，RIAコンソーシアム，日刊デジタルクリエイターズ等で活動中。Webサイトとして，深く大きくかかわったのは，Visaモール（Phase1）とJAL（Flash版：簡単窓口モード/クイックモード）など。