エモショーナルなデザインの参考に！メディテーションアプリのUXデザイン

UXデザインとは、ユーザーの「体験」をデザインすることですが、モバイルアプリのUIで「感情が動くような体験」をデザインすることには様々なハードルがあるように感じます。UXデザインに取り組んでいると、どうしても使いやすさ、機能性、満足度といった体験が重視されることが多く、喜び、安らぎ、興奮といったような感情を変化させるような体験をモバイルアプリ上でデザインするようなことはあまりないかもしれません。

とはいえ、オフラインの世界に目を向けると、どんなに機能性に重きを置いたプロダクトであっても、そのプロダクトを手にするユーザーのブランド体験には感情を揺さぶるような工夫が多く施されていることが当たり前となりつつあります。購入するとき、箱を開けるときの「ワクワク感」や、使われている素材の手触り、音など、様々な側面からリッチな体験を演出してくれます。

では、デジタルスクリーン上でプロダクトをデザインする場合には、このような「リッチな体験」を演出することは難しいのでしょうか？確かに、タッチポイントの少なさという面では、モバイルアプリなどでリッチな体験を提供することは簡単ではありません。また、場合によってはこのようなデザインが機能性やシンプルさを犠牲としてしまうこともあるでしょう。実際に、普段利用する多くのアプリを見てみても、あまり感情に訴えるようなデザインがされていることはないかもしれません。しかし、似たサービスが多く市場が飽和しやすいデジタルサービスにおいては、今後ますます感情に訴えるようなUXデザインが必要となる場面が増えてくるのではないでしょうか？ユーザーの感情を揺さぶるようなデザインを認知科学者ドナルド・ノーマンは「エモーショナルデザイン」と定義し、人の感情を動かすことはデザインの大切な役割であるとしています。そこで、今回はモバイルアプリの中でも珍しくエモーショナルなUXデザインを重視している「メディテーションアプリ（瞑想アプリ）」に注目して、感情を揺さぶるUXデザインのヒントを探してみました。

メディテーションアプリ（マインドフルネスアプリ・瞑想アプリ）とは、ストレスの解消や睡眠の改善、気持ちの切り替えなどの様々な目的のためにBGMや瞑想のチュートリアルを提供するアプリです。アプリの提供価値をシンプルに考えると、収録された音源を聴くことができれば「機能性」という側面は満たされるはずです。しかし瞑想という、感情や心理状態に強く紐づいたトピックを取り扱うにあたって、それぞれのアプリは単なる機能の提供のみならずアプリのデザイン面でも感情を動かすような工夫を凝らしています。では、早速いくつかの瞑想アプリのUXデザインを見てみましょう。

一般的なアプリにとってのアプリ起動画面はあくまでも「アプリやデータのローディング中に表示する画面」といった役割が強く、あまり長い時間表示されることは好ましくないでしょう。しかし、メディテーションアプリにとって、アプリの起動画面は「瞑想」という行動への大切な入り口となっています。ユーザージャーニーの始まりとして設計されたそれぞれのアプリの起動画面をみてみましょう。

Headspaceの起動画面は約5秒間ものアニメーションを表示して、ユーザーの呼吸を整えるように促しています。呼吸に連動したアニメーションがユーザーの満足度も高めてくれます。アプリ内部の画面を表示する前に「瞑想」というルーティーンのスイッチを入れることを出来るだけ早い段階で行なっていることがわかります。

睡眠の質を改善することに特化したアプリであるBetterSleepも同じく約5秒間の起動画面を表示しています。星空の下で蛍が舞うようなアニメーションを表示することで、「眠り」というユーザージャーニーへの入り口の役割を果たしていますね。

同じく瞑想アプリのPauseでは、オンボーディングのフローで画面が切り替わるのに合わせて背景のアニメーションが切り替わります。ユーザーのオンボーディングフローを邪魔しないようにしながら、新たな体験の始まりを演出する良い例となっています。

このように、アプリ起動画面を気持ちを切り替える「スイッチ」として活用することは、認知心理学の中で扱われている心理効果「文脈効果」をうまく取り入れた例ともいえます。

関連記事

文脈が変わると認知される意味も変わる。文脈効果とは?

文脈効果（Context Effect）とは、ある情報の前後の状況やつながりによって、その意味合いが変化してしまう現象のことをさします。人の脳は、外界からもたらされる多くの情報や刺激を取り入れて瞬間的にその意味を判断したり、状況にふさわしい行動を起こすメカニズムを備えています。脳の情報処理のひとつである文脈＝コンテクスト効果は、認知心理学の中で扱われている心理効果のひとつです。また、文脈効果は文章の意味を捉えるときだけでなく、知覚や言語、認知、記憶、意思決定など、さまざまな認知活動の場面で影響を

モバイルアプリのホーム画面では、ユーザーの求める機能や情報を提供することが重視され、Webサイトのようなヒーローエリアやメインビジュアルを表示することはほぼないでしょう。しかし、瞑想アプリのCalmとMeditopiaでは、スクリーンの約半分から3分の1もの領域を使ってアプリの世界観や、瞑想にあった雰囲気を醸し出す動画を背景として表示しています。このようにゆったりとした流れるような映像をホーム画面に表示することで、瞑想という行動に向けてユーザーの気持ちを穏やかに整えようとしていることがわかります。

Calm - 瞑想・安眠・リラクゼーション

Calm.com, Inc.

ブランドのビジュアルアイデンティティの表現にイラストレーションを使用することはよくある例かもしれません。しかし、モバイルアプリなどの限られたスペース内でのUIデザインにおいては、イラストレーションの使用方法に悩まされることも少なくないです。HeadspaceとBetterSleepはイラストレーションを使ってアプリUI上でブランドアイデンティティを表現している良い例です。

関連記事

ブランディングとは？目的や戦略、ブランド構築の5ステップについて解説

ブランディングは、近年ラグジュアリービジネスのみならず、さまざまなビジネスにおいて重要な戦略となっています。この記事では、ブランディングの基本的な概念やプロセスをはじめ、Webサイトやモバイルアプリなどのデジタルデザインにおけるブランドデザインの考え方について紹介します。ブランドとは、消費者が特定の企業やサービスから連想するイメージのことです。企業はこのブランドを意図的に作り出すことによって、消費者に対して物理的な商品やサービスの提供にとどまらず、企業の発信する「世界観」を体験させることで、競合

このように、メディテーションアプリには感情を動かすようなUXデザインのヒントをたくさん見つけることができます。このようなユーザー体験のデザインは、瞑想という特殊な分野のみならず他の領域においても応用することができるのではないでしょうか？モバイルアプリのユーザー体験をよりエモーショナルなものにしたい場合、今回紹介したようなメディテーションアプリを参考にしてみてはいかがでしょうか？

Headspace: Mindful Meditation

Headspace Inc.

‎BetterSleep：睡眠トラッカー

Ipnos Software Inc.

Pause：マインドフルな時間

PauseAble ApS

UXデザインに関する記事をもっと読む

「UXデザイン」に関連する記事一覧

「より良い未来」をつくるデザイナーのためのWork & Lifeマガジン『unprinted』では、UXデザインに関する学習コンテンツや最新情報など、デザイナーのためのコンテンツを配信中