本文へ

ここから本文です

アニメーションがつなぐUI / 統一された美しさと、ブランディング

2008年9月 9日 掲載

DESIGN IT! magazine』vol.1の特集「Feature-1」を掲載しています。

アニメーションがつなぐU I

ホーム画面を長押しすると、アイコンがプルプルと震え始める。この状態で、アイコンの配置を変更したり、ブックマークを削除できるようになる。状態を示したり操作を促すためのメッセージ(「編集モード」「アイコンを移動してください」といった)は皆無である。アニメーションがなんとなく示す「アイコンの不安定さ」「動きそうな雰囲気」のみがユーザーへのメッセージだが、それを見ただけでは、アイコンを動かせるという確証をユーザーは持ち得ないだろう。

だが、一度このアニメーションを見て、操作してみると、この動きの表示と機能の関連性が強烈に印象に残る。

いったん動きの意味がわかると、プルプルしているアイコンが「じっとしてられない!」「動きたい!」「わたしを動かして!」という意思表示をしているように見えてくるから不思議だ。

「アニメーション」と聞くと派手なプロモーション的な要素を想像するが、ここで言及するものは、インタラクションにおけるアニメーションだ。

iPhoneでは、操作のフィードバックとして巧妙にアニメーションを取り入れ、ユーザーに自分の行為やその結果を示すだけでなく、システムや情報の構造を的確に示している。

人間の感覚は、動くものに対して非常に敏感だ。画面上の1ピクセルの点はそれだけでは目立たないが、もしそれが動いていれば、ほとんどの人がすぐに気づくだろう。

現実世界では、視界に入る何かしらが常に動いている。また、周囲の環境がすべて静止していても、身体や眼を動かすことで視界は動く。そして動きを察知すると、その意味を捉えようとする。人間にとって、動きには常に意味がともなうのだ。

インタフェースの設計においても、そうした人間の性質を十分理解して利用しなければならない。画面上の要素の何をどう動かすか(あるいは動かさないか)という点は、ユーザーの理解にとても大きく影響する。


動きの意味を生かすアニメーションがUIをわかりやすく使いやすくする

iPhoneにおけるアニメーションは、言葉やアイコンなどの新たな要素を画面に加えることなく、ユーザーに情報を伝えることのできる重要なインタフェースとなっている。

一般的なUIであればダイアログを表示するような場面では、画面全体や要素を動かすことで、情報そのものや情報間の関係性を伝えている。そして、それが感覚に強く訴えるので、テキストよりはるかにその意味を理解しやすく、記憶しやすい。

また、アニメーションの使い方に一貫性があるため、学習効果が高い。正しい動きの重要さ、あるいは間違った動きの危険性が、iPhoneの動きを観察するとよくわかる。

だが、iPhoneのアニメーションは、必ずしもユーザーが初見ですぐにその意味を解釈できるものばかりではない。例えば、ホーム画面のアイコンがプルプル震えるアニメーションは、それを単独で見ても何を意味するのかが明確なわけではない。だが一度経験すると、その印象的な動きと意味(アイコンが移動できること)は、分かちがたく記憶に残る。

今後の企業情報システムにおいても、別々の動作や機能をうまくつなぐインタフェースとして、アニメーションが持っている役割は、重要度が増すことになるだろう。

例えば、WebアプリケーションではAjaxのような技術において、画面遷移を減らし、ちょっとした視覚効果をつけるようなUIが増えてきている。このようなUIの設計の際に、iPhoneは大きなヒントとなるだろう。


統一された美しさと、ブランディング

統一された美しさが作り出すソフトウエアの世界観

iPhoneのUIのビジュアルの基本はやはり「シンプルさ」であり、個々の要素に特別な派手さがあるわけではない。Mac OS Xや、最近の新しいWebサービスのサイトデザインによく見られる「角にRのある(丸くなっている)枠」「プラスチックのような艶」「床面の反射」といった共通した方法を使って、繊細にビ ジュアルが作られている。

単に意匠として手が込んでいるだけではなく、iPhoneのホーム画面に並ぶアプリケーションのアイコンのデザインは、Mac OS Xユーザーなら誰でも見たことがある、Dashboard(Part.3で詳述)に並ぶウィジェットのアイコンと同じデザインモチーフとなっている。これにより、Mac OS Xを使用していたユーザーにとっては違和感のない統一された世界観を感じることができる。

また、世界観を統一することで、ユーザーは複雑な学習なしに、自然とそれぞれのアイコンの意味を汲み取ることができるだろう。


ディスプレイを超えるインタラクションがブランドの魅力を高めていく

この世界観は、スイッチを入れる前から始まっている。iPhoneのユーザーは、まず購入するところから、アップルのデザインを体験している。

通常、携帯電話を買うときには販売代理店で住所等を記入して、手続きをしてもらわけなければならないが、iPhoneにはそれがない。普通の商品と同じように買ってすぐ持ち帰ることができ、手続きは帰ってからiTunesで行えばよいのだ。購入する際に必要なユーザーとショップとの「インタラクション」をリデザインし、不必要な作業や待ち時間を極力廃する、シンプルさの徹底と言える。

ユーザー体験はディスプレイの上だけにあるのではない。この視点は、コンピュータのシステムを開発している際にはおろそかになりがちな点でもある。

製品やサービスに接するあらゆる局面で細やかに配慮された工夫によって、ユーザーはアップルを総体的に体験していく。この積み重ねによって、ほかの何者でもなく、アップルであること、iPhoneであることという強烈なアイデンティティが伝達され、育成される。これこそがブランドと言えるだろう。

毎日使う企業情報システムでも、こうした世界観を取り入れられる可能性はあるだろう。使うことが楽しく、会社の価値を共有できるCIツールのひとつとして、情報システムも企業のブランディングと無縁 ではない。


 1  2  3  4  5

DESIGN IT! magazine』vol.1の特集「Feature-1」を掲載しています。


関連情報


トラックバック

このページのトラックバックURL
http://www.designit.jp/mt/mt-tb.cgi/1273