デザイナーは製品を作る際、ユーザーにそのストーリーを伝えます。 伝えるべきストーリーをより興味深いものにするために、デザイナーは多くのツールを持ち合わせています。その中でももっとも強力なツールの１つが、モーションデザインです。モーションの真の強みは、モバイル体験に現れます。モーションを伴わないモバイルアプリは、独立した画面の連続でしかありません。 しかし、デザイナーがモーションを導入すれば、劇的な変化が生まれます。つまりデザインに命が宿り、アプリはユーザーをひきつけるインタラクティブなストーリーに変化するのです。
今回は、AI（人工知能）アシスタントを用いた未来のインターフェイスにおけるモーションデザインの概念を探ります。
人工知能の未来を築く
AIアシスタントは、現代の多くの自動車やスマートフォンに搭載されている機能です。 簡単に言えば、ピザの注文や目的地の設定といった、日常的なタスクから人々を解放するのに役立つシステムです。 システムとの対話のプロセスは非常にわかりやすく思えます。ユーザーはシステムを起動して（ほとんどの場合は音声を介して）コマンドを入力し、システムはリクエストに応じて詳細を返すのです。
Gleb Kuznetsov氏による自動車用のAIビジュアルデザイン
しかしAIデザインの現状には、２つの大きな欠点があります。
- システムが提供するフィードバックは、それほど有効なものではありません。 システムがどのようにリクエストを処理するのかや、与えられた情報によって何が起こるのか、ということが明確ではないからです。
- システムが提供するフィードバックは、感情を伴わない、ロボットのようなものです。したがってユーザーはそのようなシステムと対峙しても、コンピューターにコマンドを与えるようだとしか思いません。 従来のGUIとの唯一の違いは、キーボードではなく音声という異なる手段でコマンドを入力する点です。
デザイナーはこれらの問題を解決して、機械のルックアンドフィールをより生き生きさせようとしています。
それではモーションによって、それらをどのように達成していくのかをご紹介しましょう。
VUIで信頼を築く
未来のAIシステムは、VUI（音声UI）によって信頼を築くことを優先します。 信頼は人とコンピューターとの橋渡しの役割をするものです。信頼が欠けている場合、ユーザーはシステムとのインタラクションを良く思いません。
信頼を築く上でもっとも重要な側面の１つは、ユーザーにコントロール感を与えることです。 Jakob Nielsen氏によるユーザビリティに関する10のヒューリスティックのうちの２つに含まれる、システムステータスの可視化や、ユーザーに操作の主導権と自由度を与えることはVUIデザインにも適用することができます。
この側面は、AIシステムという文脈において、どのような意味を持つのでしょうか？ システムはユーザーのリクエストに的確に反応する必要があります。 このフィードバックは、システムが何を処理しているのかを、ユーザーに完璧に理解させるものであるべきです。
ユーザーのインプットに対する視覚的なフィードバック
視覚、または音声による明確なフィードバックがなければ、ユーザーはシステムとのインタラクションを推測することしかできません。視覚的なフィードバックがあれば、ユーザーはシステムの現在の状況を知ることができます。システムがリクエストを受け取り、処理しているということを確認することができるのです。
AIシステムの視覚的なフィードバックをデザインする際、デザイナーには多くの選択肢があります。もっとも基本的な場合には、フィードバックは、単純に黒い画面から何らかの意味のある画面に変化するのと同じくらいシンプルで単純なものかもしれません。しかし、ブランド独自のプロパティを組み込むことで、より良い結果を得ることができるでしょう。下図は、RokidのAIボイスアシスタントのコンセプトです。アニメーション効果はブランドのオリジナリティを反映し、ユーザーを製品とのインタラクションに夢中にさせています。
Rokidの人工知能UIデザイン
しかし人々はシステムがリクエストを受け取ったことだけでなく、そのリクエストを理解したということも確認したいのです。 この感覚は、より強い信頼を築く上で重要な役割を果たします。
動的なビジュアルコミュニケーションを通じて、深く没入できる体験を実現することができるのです。 実際にどのように機能するのかを見てみましょう。 モーションは、ユーザーのアクションの確認に利用できます。Rokidのケーススタディから、下図の「音声認識」の例を挙げてみましょう。 ユーザーが命令を発したときのみ音の波が見えるようになるので、システムがユーザーの声を聞き取ったことを確認することができます。 ２つ目の例は「システムGUI」です。円が「いいえ」の応答を示すために水平方向に動くことに注目してください。
ユーザーが実行している行動を補強するモーション。Rokid AlienシステムのUIからのイラスト
状況の変化を明確にする
UIの状態変化は、デフォルトではぶつ切りになっていることが多いです。ユーザーには２種類の状態（ユーザーの入力を受け入れる最初の画面と、結果を示す２つ目の画面）のみが表示されます。 このようなぶつ切りのUIでは状態の変化が追いにくく、２つの状態の間を繋ぐために余分に頭を使う必要があるので、認知的負荷が増えます。
この２つの状態の間を仲介するフレームを生むインビトウィーニングを導入することで、ぶつ切りの問題を解決し、はるかにユーザーフレンドリーな体験を作ることができます。目標は、最初の画面から２番目の画面にスムーズに変化することです。 モーションは、このプロセスにおいて重要な役割を果たします。２つのビューの間で、ユーザーの注意を誘導し続けることができます。
Gleb Kuznetsov氏によるパーソナルAIアシスタントモーション
行動のプロセス（POD：Process Of Doing）
ユーザーがAIアシスタントとやりとりするときには、リクエストを与え、システムが提供する結果を待ち、そして読むという３つの過程を体験します。
システムがユーザーのリクエストを処理している間に表示されるアニメーションエフェクト 画像：Gleb Kuznetsov氏
ほとんどのユーザーは、送ったコマンドによって何が起こるのかを、結果が表示される前に知りたがっています。 その情報によって、ユーザーはシステムが自分の意図を理解したかどうかを判断することができます。
POD（process of doing）のコンセプトは、デザイナーがこの目標を達成するのに役立つものです。 このときモーションデザインは、次に何が起こるのかについての手掛かりをユーザーに与えることによって、理解のギャップを埋めることができます。 具体的な動作は下記のようなものです。
- ユーザーがシステムにリクエストを送ると、システムは現在実行している処理をわかりやすくユーザーに表示します。
- PODは、ローディングアニメーションとは異なります。システムが何らかの動作を終えるのを待たなければいけないという事実を伝えるだけでなく、システムが何をしているかという、価値のある情報を提供します。
自分の製品に合わせてPODをデザインするにはどうすればいいのでしょうか？
残念ながら、この質問に一概に答えることはできません。 製品の性質によって解決方法は決まります。デザイナーはユーザーの立場に立って、ユーザーが特定の状況でどのような行動を起こすか（ユーザーが操作を自力で完了するまでのユーザージャーニーがどのように見えるか）について考えてください。 たとえばDropboxからファイルを取り出すといった指示のPODは、実際のストレージからファイルを探すのと似たようなものになるはずです。
Brain.aiで、Dropboxからファイルを取り出す際のPOD 画像：Gleb Kuznetsov氏
パーソナリティを伝えるインターフェイス
多くのデザイナーは、同じカテゴリ内の他の製品と同じように作ろうとしてしまいます。しかし、ユーザーはそのような製品と接しても、それらの違いを見分けることができません。その結果、製品同士を混同しやすくなるのです。
モーションを用いれば、デザイナーのこうした問題を解決することに役立ちます。 デザインに微妙なモーションを取り入れることで、ユーザーに何らかのパーソナリティがあるものとインタラクションしているように感じさせることができるでしょう。
細部により注目する
ディテールは単なるディテールに留まりません。ディテールがデザインを作るのです。
Charle Eames氏の不朽の名言は、製品のあらゆるディテールがユーザーの認知に影響を与えるという事実を思い出させてくれます。優れたディテールを単に認知するだけで、製品のクリエイターがユーザーを大切にしていることを彼らに示すことができます。小さな１つのアイコンが、ユーザー体験において重要な役割を果たす可能性があるのです。
デザイナーがプロジェクトのために個性的なアイコンの作成に時間を費やしたら、ユーザーはそれに気づき、より記憶に残る体験になります。優れたアイコンデザインとモーションを組み合わせることで、真に魅力的なユーザー体験を生み出すことができるでしょう。
RokidのAIボイスアシスタント用のアイコンモーフィングアニメーション
モーションランゲージ
モーションはインタラクションデザインにより深みを加えることができます。 ユーザーがAIアシスタントに送信するすべてのコマンドには、デザイナーがモーションを基にしたデザインを使用することで効率的に伝えようとしているストーリーが存在します。したがってストーリーを伝える際に使われる言葉は、ユーザーに伝えたい感情と深く結びついているのです。
ユーザーに何を感じてもらいたいのか？ ユーザーを楽しんでもらいたいのか、洗練された感覚を伝えたいのか？ 製品の本質を考えることで、それらの感情を適切に伝える方法を見つけることができるでしょう。
Gleb Kuznetsov氏が制作した、Brain.aiにおける未来のモバイルインタラクションのビジュアルデザイン
人間のようなAI
インターフェイスを人間的だと感じさせるものは何でしょうか？ AIアシスタンスでは、音声とモーションという２つの特性が人々のインターフェイスの認識に重要な役割を果たしています。音声は人格の一部であり、アイデンティティを形成します。音声を機械に関連付けると、音声はその機械のアイデンティティの一部になるのです。 そしてそのようなインターフェイスとやりとりすると、ユーザーは実際の人間に接するのと同じような感覚を経験します。モーションを用いれば、この感覚をさらに強めることができるでしょう。
103EXという動画では、Rolls-Royceが人工知能に魂を与える方法を実証しています。 モーションのおかげで、Rolls-Royceの車のボンネットに飾られている「The Spirit of Ecstasy」が単なる装飾以上の要素になっています。オーナメントは未来のドライバーと車を関連付ける機能を持ち、自然と体験の一部になるのです。
デザイナーは自分の作品にも同じ原則を適用することができます。たとえば、製品にマスコットがある場合は、適切なトーンや音声、豊かなモーションエフェクトを追加することで、それらを商品デザインの一部に統合させることができるでしょう。
結論
モーションは、未来のデザインにおいて決定的に重要です。デザイナーが根本的な問題を解決し、インターフェイスを人間化することでマシンとユーザーの信頼関係を構築する助けになるでしょう。
