三井 英樹

 従来型のWebアプリケーションいわゆるHTML型と,RIA(Rich Internet Application)型との最大の違いは,「画面遷移」の考え方です。今回は,代表的な画面遷移の手法を紹介しましょう。

RIA型の特徴は「ノーリフレッシュ」

 まずは,ごく普通のWebアプリケーションである「HTML型」ページ遷移のおさらいから始めます。HTML型では,基本的にはサーバーから「ページ」という単位で情報が届けられます。つまり,次のページが表示されるまでの間に「画面リフレッシュ」が発生します。これによってユーザーは,瞬間的に思考が寸断されます。高速インターネット回線のユーザーであれば一瞬の問題ですが,それでも“断続的に”物事を進めているという印象は持つでしょう。


HTML型のページ遷移

 それに対してRIA型は,「ノーリフレッシュ」という機能を提供することが多々あります。画面を「ページ」という概念で区切るのではなく,「View」という概念でスムーズに切り替えます。画面全体が真っ白になるような状況は作りません。ユーザーが入力した情報も,縮小などしてどこかに表示させ続けます。こうして,“思考の連続性”を確保しようとします。


RIA型のページ遷移

 サーバーから提供されたデータをそのまま流すのではなく,ページの部分でその情報を整理して,適切なViewをコントロールして表示する,という操作を行うわけです。その操作が対象ユーザーを考慮して配慮の行き届いたものであるほど,ユーザーはストレスなく,Webアプリケーションを利用できることになります。

 では,どうのようなView遷移があるのでしょうか。アイデアしだいで様々なタイプが存在しますが,一般的になりつつあるパターンをいくつかご紹介しましょう。

ランダムにアクセスできる「タブ型のView遷移」

 タブ型のView遷移は,画面の上の部分に「タブ」があり,それをクリックすることで対象情報を表示する手法です。タブの並びは決まっていますが,ユーザーはその並びを意識しないでランダムに情報にアクセスできます。タブ付けされた情報の塊に順序が存在せず,比較的並列な関係の場合に用います。


タブ型のView遷移

順番の決まった操作をナビゲートする「ステップ型View遷移」

 順番の決まっている操作を,その順番を意識させながらナビゲートする場合に用いる代表的な方法がステップ型View遷移です。基本的には画面上部に「ステップ」を表示し,全体で何ステップあり,現時点で何ステップまで終了しているのか,という“達成感”的な情報を提供します。一般的にユーザーは先の見えない入力作業に不安を感じるので,こうしたステップ・インジゲーターは「最低限のマナー」にもなっています。


ステップ型のView遷移

 ステップ型View遷移はユーザーには親切な画面遷移ですが,注意すべき点があります。それは,常にステップが見えているため,「前の画面に戻れる」とユーザーが考えがちということです。Viewごとに様々な情報を入力させる場合,どうした状態まで戻れるのかを,きちんと設計することが重要です。そうでないと,行ったり戻ったりするうちに情報が混乱し,バグの温床になります。

躍動感でナビゲートする「横アコーディオン型View遷移」

 横アコーディオン型View遷移は,基本的にはステップ型と変わりませんが,画面が進んでいるという“躍動感”をビジュアルに与えられる方法です。入力する情報が多くてユーザーが逃げ出す可能性がある場合に,ちょっとした抑止効果を出せます。体感速度にメリハリを付けたい場合によく用いられます。


横アコーディオン型のView遷移

横型より順番を強調できる「縦アコーディオン型View遷移」

 横アコーディオン型View遷移は,形状的に「タブ型」に似ています。そのため,必ずしも左から右への操作をイメージできないのではないかというニーズから発展してきたのが縦アコーディオン型View遷移です。上下に配置することで,操作の順番をほぼ100%,上から下に進むとイメージできます。


縦アコーディオン型のView遷移

 ユーザーは,下に進むほど「ゴール」に近づくという感覚を得られます。しかしグラフィックデザイン上,終了したステップが上に溜まっていくので,多くのステップが必要な場合は,領域が限られるという欠点があります(それは縦型にも共通することです)。

ユーザーの選択に任せる「ハブ型View遷移」

 必ずしも順番に入力させる必要がない場合に用いられるのが,ハブ型View遷移です。例えば,商品にラッピングやノシを付けるなど,ユーザー自身が選択する場合,ステップ方式のように決められた手順で入力させる方式だと,ユーザーは疎ましく思うかもしれません。そこで,鍵となる情報を「ハブ(連結部)」として,複数の情報を並列に並べるのがハブ型です。

 ハブ型では,ユーザーが関心を示した(クリックした)部分を拡大表示などして,情報入力や参照を容易にできるようにします。常に鍵となる「ハブ」部分が見え続けている点がポイントです。


ハブ型のView遷移

全体の流れをうっすらと認識させる「背景スライダー型View遷移」

 背景スライダー型View遷移は,「画面」という情報の単位をあいまいにして“情緒的な演出”をしたい場合に用いられます。ステップが進むにつれて,背景がスライドしていくような感じを表現し,あたかも自分の見えている画面の後ろにもう一つ大きな画面が存在しているように感じさせます。

 この手法は,画面の流れ自体を“扱っているモノ”としてイメージさせたい場合に有効です。全日本空輸(ANA)のFlash版予約の場合は,「プリフライト感覚」という,旅行前に飛ぶイメージを味わってもらおうという目的で活用されています。


背景スライダー型のView遷移

“ちょっとした演出”がコンシューマの共感を誘う

 以上,RIA型の代表的なView遷移を見てきましたが,いかがでしたか? こうした,少し遊び感覚ともいえる“演出”を,ビジネス・アプリケーションに忍び込ませることができるのは,RIAシステムの強みと言えるでしょう。イントラネットでは不要だと思われがちな部分ですが,B2C(コンシューマ対象)型のアプリケーションでは,必須と言えなくもありません。ほんのちょっとした操作における印象の違いで,ユーザーはそのサイトやサービスを気に入ったり嫌ったりするのですから。コンシューマを対象にしたアプリケーションを開発するならば,こうした部分への感覚を磨くことが,ますます必要になってくると思います。

 従来のHTML型アプリケーションの開発では,考えもしなかった画面遷移の方法も,RIA型では当たり前になりつつあります。対象分野がよりアート系やキャンペーン系になれば,今回ご紹介したもの以上に,驚きや可笑しさを加えた画面遷移手法が存在します。

 しかしそれらの手法の根本にあるのは,ユーザーに「何が一番アピールするか」ということです。どんな人に,どんなものを売りたいのか,伝えたいのか,そこが肝心な点です。対象とするユーザーが“使いやすい”と思える画面こそが,開発者が作るべきものなのだと思います。それが,開発者の都合やルールに合わせるのではない,エンドユーザー視点のアプリケーション開発の原点なのです。


やはり,ここが起点/原点

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


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