約10年のスマートフォンの歴史の中で、アプリデザイナーやUXデザイナーが考えてきたことはずっと*「この小さな画面でどうやってユーザーに心地いい体験をしてもらうか」*ということではないでしょうか。
画面が小さいので過度な装飾はできません。とはいえ単調なデザインでは飽きられてしまいます。

そこで登場したのが、*「マイクロインタラクション」*という考え方です。
マイクロインタラクションとは、小さなアニメーションを使って現在何が行われているかをフィードバックしたり、進行中のプロセスの状況を伝えたりするコミュニケーション手法のことです。

参考：
マイクロインタラクションとは？UXに取り入れる際の5つのポイント

これまでマイクロインタラクションは、モバイルデザインにおいては全体の中の*「要素の一部」として考えられてきました。
しかし最近では、これまでの「Static Design」(静止したデザイン)に対して、「Alive Design」*(生きているようなデザイン)として、より大きなくくりで考えられるようになっています。

今回は、モバイルUXの主流になりつつある「Alive Design」の考え方や概要をご紹介します。

Alive Designとは？


by Barthelemy Chalvet on dribbble

*「Alive Design」(生きているようなデザイン)*という考え方は、UXデザイナーのChristina Pan氏によって提唱された、モバイル体験に関する考え方です。

同じような考え方に*「Human-centered Design(人間中心デザイン)」*という、人間同士でコミュニケーションをするのと同じようにアプリをデザインしようという考え方があります。

Alive Designも同じような理念から始まっていますが、従来の動きのない「Static Design」との対比で語られることが多く、Alive Designでは*「今、この瞬間」*の新鮮なやりとりをより重視している点が特徴的です。

よいAlive Designの4つの特徴

それではモバイルアプリにアニメーションを多用すればいいのかというと、そういうことではありません。

Alive Designと言えるようにするためには、どんな要素が必要なのでしょうか。

1. 動きのあるコンテンツを主役にする


by Julia Petrenko on dribbble

モバイルデザインにおいてエンゲージメント率を高める最も重要な場所は*「ホーム画面」と「ディスカバリー画面」*です。

「ディスカバリー画面」については*「発見」「検索」「探索」「ストーリーズ」「トレンド」などたくさんの名前がありますが、本質的にはユーザーが役に立つ面白いコンテンツやそのコンテンツを発信しているユーザー*を見つけやすくするための検索・一覧画面のことを言います。

Alive DesignはUIに小さなアニメーションを施すマイクロインタラクションにとどまらず、コンテンツ自体が動的であればなおよいでしょう。
ホーム画面でユーザーが投稿した内容や、ディスカバリー画面での内容を見た時に、ユーザーが*「もっと見ていたい」*と思わせることができればAlive Designは成功したも同然です。

2. 「モバイルタイム」に合わせて毎回違った新しいコンテンツを表示する


by Caice | Oneheart on dribbble

モバイルアプリを設計するときによくある間違いが、「もっとも最近の投稿」「一番新しい投稿」を一番上に表示することです。
ユーザーが求めているのは新しいコンテンツではなく、「新鮮な」コンテンツです。

例えばLinkedInやFacebookでは、すでにあるコンテンツの中からユーザーが最も面白いと感じ役立つと思われるコンテンツをフィードに表示します。
Facebookでは、他のユーザーがいいねをつけた投稿や、つながりの中で影響力を持っているユーザーが書いた投稿などをハイライトとして表示し、アプリを立ち上げるごとに表示を変えるようにしています。

なぜこのようにするのかというと、*「モバイルタイム」*とアプリデザイナーたちが呼ぶ、スマートフォンを操作する時間と関係します。
スマートフォンをいじるのは、例えば電車の中や病院の待ち時間など、とても短い時間、あるいは一瞬でさえあります。

こうした非常に短い「モバイルタイム」を、1日何十回も繰り返して生活をしているのが私たちです。
そのため、アプリを開くたびにいわゆる*「新しい投稿」*が残っているのはあまり好ましくありません。

これは、ホーム画面だけでなく、ディスカバリー画面についても同様のことがいえます。
ディスカバリー画面も、ページを開くたびに表示が変わっているほうが、ブラウジングのしがいが出てくるというわけです。

また、このように毎回新鮮な投稿を表示していると、所属しているコミュニティ自体が*「活動している」(aliveの状態になっている)*と感じるので、エンゲージメントの高いユーザーほど1日に何度もFacebookアプリを開くことになるのです。

3. 勝手に動いていると感じるレベルにする


by Igor Savelev on dribbble

FacebookやPinterest、インスタグラムやTwitterなどのフィードでは、GIFアニメを含めたビデオの自動再生オートプレイを取り入れています。
半透明のレイヤー上に置かれた再生ボタンを押してビデオを押すと、せっかく動きのあるコンテンツを載せても動きが止まってしまいますが、自動再生によってエンゲージメントがさらに上がります。

インスタグラムではディスカバリー画面の*「おすすめの動画」*という欄で見ることができますが、どこにもタップしないままにするとさらにページが切り替わるという徹底ぶりになっています。

ただし、動きをつけるのにビデオやGIFアニメである必要は全くありません。
例えばライドシェアリングをしたい場合にLyftやUberアプリを開いたら、地図上に小さな車が何台も動き回っているのがわかります。
一度あるドライバーとシェアリングのマッチが成立したら、その車だけがあなたの現在地までやってきます。
これこそ、生きているかのようなデザイン(まさに「Alive Design」)なのです。

4. パーソナライズする


by Robin Clediere on dribbble

パーソナライズとはバズワード的に使われている意味ではなく、いわばAlive Designの発展形のような位置付けとして考えてください。
簡潔に言えば、「ひとりの人としてユーザーのことを知る」(knowing me as a person)ということです。

優秀なビジネスパーソンが日々考えていることのひとつに、*「目の前の顧客にもっと特別感を感じてもらうには、何ができるだろうか？」*という問いがあります。
商売をしているのであれば、顧客の名前、顧客の家族のこと、そして何を問題だと思っているか、何を欲しがっているのか、顧客のことをとにかく詳しく知ろうとします。

アプリのようなデジタル上のプロダクトであっても、まるで目の前のユーザーのパーソナルアドバイザーのように振る舞うことができれば、エンゲージメントがぐっと上がります。
Facebookのフィードで一年を振り返ろうと提案してくれたり、誕生日の人をお祝いしようと言ってくれるのは、まさにあなたのパーソナルアドバイザーになろうとしているからです。