“アニメ化”するのには意味がある――デザイナーが語るモバイル端末のUI (1/2)

　アップルのiPhoneに限らず、アニメーションを伴うグラフィック表現や直感的な操作感は、モバイル端末のユーザーインタフェース（以下、UI）のトレンドになりつつある。“操作のしやすさ”や“機能の分かりやすさ”を追求する上で、こうした技術にはどのような魅力や課題があるのか――。「第19回 ファインテック・ジャパン」のセミナーで、デザイン会社takram design engineeringの田川欣哉代表が、制作者の視点からその疑問に答えた。

“見た目の豪華さ”がゴールではない――UI視点で見たアニメーションの本質

takram design engineeringの田川欣哉代表

　携帯電話のグラフィック処理能力が向上したことで、操作画面などでアニメーションの表現が使われることは珍しくなくなった。動きのある画面はコンテンツの“リッチ感”を演出してくれる。その一方で「そんなものいらないから、サクサク動くようにしてほしい」と考えるユーザーもいる。しかしこうしたアニメーション表現は、単なる見栄え以上の意味を持っていると田川氏は考える。

　田川氏は、端末の機能が多様化・複雑化していく中で「前の画面と次の画面とがどういう脈絡でつながっているかを解説しないと、“自分が何をやっていたか”が分からなくなる傾向が顕著になっている」と指摘。そうした問題を解決する手段として、アニメーションによる“解説”をUIに組み込む必要があるという。しかし「ハデに動けばいいと考えているデザイナーが多い」（田川氏）のが現状のようだ。

iウィジェットの各種画面。「ズーミングインタフェースを携帯の中でまじめに作る」ことが目指された

　田川氏率いるtakram design engineeringは、NTTドコモの「iウィジェット」や「iコンシェル」のUI開発を手掛けているが、例えばiウィジェットの動作を観察すると、アニメーション表現に対する同社のポリシーが見て取れる。

　画面に表示されているアプリの順序を入れ替える“シャッフル”と呼ばれる動作では、まず表示されている複数のアイコンが画面の奥に引っ込むように小さくなり、次にアイコンの順番がぐるりと入れ替わり、最後に各アイコンが前にせり出して元の大きさに戻る。

　アイコンが“ズームアウト”する（小さくなる）動作は不要に思えるが、意味がある。人間は目の前で大きな物が動くと、クラクラしたり動きについていけなくなったりすることがある。「画面をズームアウトしてアイコンを小さくすることで、ビジュアルの変化を少なくし、ユーザーの混乱を防ぐ。その後、再びズームインすることで（コンテンツに対する）没入感を生み出す」という意図が、一連のアニメーションに込められている。

アプリランチャーが画面の奥から手前に迫ってくるようなアニメーションの演出があるが、これはユーザーに“奥行きのある空間”をイメージさせ、「起動している機能が手前に表示され、それ以外の機能が後ろに隠れている」ことを感覚的に伝えたいという意図がある

iウィジェットの誕生までには、700ものバージョンのUIが試作された。デザインとエンジニアリングを並行して進め、完成度の高い実動モデルで検証を繰り返すプロトタイピングの手法を同社では取り入れている

立ち上がったアプリの縦幅が小さい場合は、画面下部のキー表示がアプリに近づくように移動する。キー表示を近づけるのは視線移動を少なくするための工夫だが、画面が突然切り替わるのではなく、アニメーションで“キー表示が移動したこと”を伝え、ユーザーの混乱を防いでいる。写真は試作バージョンのものだが、この動作はiウィジェットにも実装された