DMN Report 044：デザインフォーエモーション

Written by DMN事務局
on 4月 13, 2022

DMN Design Management Report #044

デザイン・フォー・エモーション

Daniel Ruston

ダニエル・ラストン Daniel Ruston
UX Lead @ Google. Brand + Product.

今回は、優れたサイトやアプリケーション、そして体験をデザインする際に、「なぜ感情に訴えるデザインが重要なのか？」というテーマについて、Googleのデザインリード、ダニエル・ラストン氏によるMediumの記事をご紹介いたします。

人間には感情、思考、情動があります。私が長年にわたって見てきた優れたサイト、アプリケーション、体験の中には、感情を考慮してデザインされたものがあります。単にタスクを実行するだけではなく、その過程で反応を促すようにデザインされているのです。その反応は、単純に「かっこいい」というものもあれば、「すごい」というものもあり、キーボードに向かってすすり泣いてしまうようなものもあります。

映画監督はシーンを作るとき、観客に恐怖、悲しみ、共感など何かを感じてもらいたいと考えています。映画監督は、シーンを作り上げるために、照明、音、場所、セットの配置、カメラレンズなどを丹念に選びます。映画の世界では、これは「Mise-en-scène」と呼ばれ、映画の美学と感覚に不可欠な部分です。

fig01

左：ノーラン監督作品「インターステラー」のブラックホールのシーン。マシュー・マコノヒーがブラックホールに落ちていくのを目の当たりにすると、恐怖と驚きと好奇心が湧き上がってくる。右側。トニー・スコット監督の「トップガン」のバイクのシーンでは、トム・クルーズが離陸するF-14戦闘機の横を疾走するのを見て、興奮、やる気、冒険といった感情が生まれます。

さて、これがデジタルデザインにどう当てはまるのか、疑問に思われるかもしれません。ユーザーにタスクAやタスクBを実行してもらいたいといつも考えている現代のデジタルデザイナーにとって、感情的な反応を生み出すことは、必ずしも真っ先に出てくるアイデアではないかもしれません。もちろん、全ては何のためにデザインするのかやコンテクストに依存します。しかし、ユーザーも人間です。たまたまサイトやアプリを利用している「層」というだけではなく、私たちのオーディエンスなのです。私たちは、UI要素、イメージ、書体、インタラクティビティなどの独自の「Mise-en-scène」を提供し、ムードを作り、ユーザー体験全体を作り上げるのです。

デジタルの世界での例

ここでは、ユーザーに素晴らしい体験を提供していると感じられる、デジタルデザインの素敵な作品の例をいくつかご紹介します。

海への旅

image-Dec-12-2021-07-52-20-16-AM

没入感のあるインタラクティブな体験があなたを連れて行きます。

このゲームの特徴は、物語が一人称視点で語られていることと、体験がシンプルであることです。前提はシンプルで、主人公が海に落ちてしまい、自分が彼の立場になって、スクロールホイールを使って水面にとどまるというものです。必死になって浮かんでいるのが実感できますし、疲れた感覚、音、息苦しさ、冷たく見える海などは、シンプルなインタラクティブの技術が組み合わされています。短いUIの一瞬が、キャラクターのエネルギーと水面との関係を示唆しています。恐怖、疲れ、絶望、悲しみを感じさせます。

このサイトは何のためのものでしょうか？　実は海での安全性をプロモートするというレンズを通して、ガイコットンのマリンウェアを宣伝しています。ウェアの特徴や防水素材のテクニカルデータを紹介する1ページのプロモーションサイトを作ることもできました。その代わりに、海でどのようなことが起こりうるかというストーリーを語り、ユーザーを参加型の没入体験に導きました。それは、ユーザーを引き付け、感情を起こさせ、より記憶に残り、うまくいけばより意味のあるものになります。

（編集部補足：ゲームの紹介映像）
https://www.youtube.com/watch?v=0Uu_N1c7E2M

シティーマッパー（Citymapper）

Android App｜App Store｜ウェブサイト

image-Dec-12-2021-07-54-00-95-AM

ユーザーが行きたい場所に行けるようにするだけでなく、その道中で個性を発揮する機能のいくつかの例

このアプリがどのように街をナビゲートするのか、少し具体的な例を挙げてみましょう。世の中には数多くの地図アプリがありますが、シティーマッパーはユースケースを重視していることから、その中でも特に優れたアプリです。シティーマッパーが感情を注入するのは、個性を散りばめたいくつかの素晴らしい機能です。例えば、「そこに連れて行って（get me there）」機能では、ユーザーがAからBへの移動を段階的に開始することができます。特定の駅で降りるときにバイブレーションを鳴らしたり、文脈に応じて（徒歩と電車など）デザインを少し変えたりするなど、ちょっとした合図が、ユーザーのナビゲーションの理解を大いに助けてくれます。

ユーザーは自信を持って街を探索することができ、未知の恐怖感を解消してシンプルにアプリを使えるようになります。このパワーと個性を組み合わせた（例えば「家に帰ろう」機能を使った）「ホバーボード」は、デバイスのチルト機能を使って操作するホバーボードに、マーティ・マクフライが飛び乗るきっかけとなるオプションです。これまでのバージョンには、カタパルトモードやロケットモードがありました。もちろん、これらの機能は必須ではありません。多くの人は、なぜ時間をかけてまでこれらの機能を実装したのかと疑問に思うかもしれませんが、このようなちょっとしたことが、このアプリを面白く、楽しくしてくれています。繰り返しになりますが、ちょっとした個性と、感情に訴える強力な機能の組み合わせは、感情的な反応を引き起こすのに大いに役立ちます。

24 Hours of Happy

ウェブサイト

image-Dec-12-2021-07-54-03-78-AM

24時間のミュージックビデオ - インターネット上でのみ...

素晴らしいアイデアとシンプルな仕組みが組み合わさったもう一つの例です。24時間のミュージックビデオをストリーミングできるメディアが他にありますか！？　ユーザーがサイトにアクセスすると、その場所のタイムゾーンでミュージックビデオが始まり、曲に合わせてダンサーがパフォーマンスをします。ダンサーは数分ごとに入れ替わり、同じものは出てきません。「24時間のハッピー！」というアイデア自体がとても楽しいものです。

ユーザーは、円形のUIスクラバーをドラッグして、24時間のビデオの中を飛び回ることができます。このシンプルなインタラクションモデルは探索を促します。ドラッグすることで、見られるかもしれないシーンのプレビューを得ることができます。1時間の始まりにはファレルが登場し（Pボタンでも可）、トロフィールームにいるマジック・ジョンソンや娘と一緒にいるジェイミー・フォックスなど、たくさんの人々が登場します。この体験は、ユーザーを引き込み、ユーザーがコンテンツを探索・発見できるようになっています。説明のための長いイントロビデオやコピーはなく、サイトを起動するたびに何か新しいものを見ることができるでしょう。

単純に24時間のビデオをYouTubeにアップすることもできたでしょうし、シンプルな「レギュラー」スクラバーを導入することもできました。しかし、彼らには、メディアを活用し、楽しくて探索的な仕組みを取り入れた新しいものを作るというビジョンがありました。つまり、これらの体験全体が、人を笑顔にし、幸せな気分にさせるものなのです。

ペイパープレーン（Paper Planes）

ウェブサイト
image-Dec-12-2021-07-54-07-74-AM

ジェスチャーベースのインタラクティビティとネイティブデバイスの挙動が、体験に遊び心をもたらす

2016年のI/Oイベントでは、Googleの素晴らしい例として、人々に楽しんでもらう方法を紹介しました。世界中から集められた紙飛行機を飛ばしてキャッチするというシンプルなものですが、モバイルで見るのが最も適しています。短いイントロの後、スタンプを置いて、ドラッグ操作で紙飛行機を折りたたむと、ユーザーは携帯電話を回転させて、紙飛行機を投げる真似をするように指示されます。ちょうどいい具合に投げる必要がありますが、そうするとデバイスがブザーを鳴らし、「ウィー」という音がします。すごいでしょう？　紙飛行機を飛ばしたら、次は他の紙飛行機を捕まえて、スタンプを押してみましょう。小さな網が出てくるので、スマホを振って、網で何かを捕まえる真似をします。飛行機を捕まえると端末が振動し、その飛行機がどこにいたかを明らかにして、スタンプを押し、再び紙飛行機を飛ばすことができます。

この体験で私が気に入ったのは、ユーザーのデバイスをインタラクティブに活用している点です。思いがけない動作、ジェスチャーを使ったインタラクティビティ、シンプルさ、そしてすべてに遊び心があることに、思わず笑みがこぼれます。Googleのためにリリースされたこの作品は、ブランドレベルにおいて、Googleのポジティブな雰囲気をプロモートしていると感じずにはいられません。ユーザーが何かを作り、それを伝えるというこの種の「コンセプト」はよく目にしますが、この作品が他と違うのは、個性と技術のすべてが、驚きと喜びの感情を呼び起こすところです。

なぜ感情に訴えるデザインが重要なのか？

あなたは「なぜそれが重要なのか？」という疑問を持っているでしょうか。ここで、マズロの欲求階層を再解釈した小さなチャートを紹介します。このチャートは、様々な形で見たことがあるかもしれませんが、基本的には、あなたが取り組んでいる製品やサイトのガイドとして見ることができます。

image-Dec-12-2021-07-54-10-33-AM

一番下にあるのは機能性という基本特性で、機能するか、やることをやっているかということです。次に、信頼性があります。エラーなく確実に動作するか、高速であるかということです。その次に、ユーザビリティがあります。使いやすいか、簡単に使えるか、ユースケースに即しているかといったことです。そして、最後の2つには、到達するのが最も難しい、「楽しい」かと「意味がある」かがあります。使っていて楽しいかどうか、笑顔になれるかどうか、魅力的かどうか、楽しいかどうか。そして最後に、意味があるとは、ユーザーにとって意味のあるものであるか、感情を呼び起こすものであるか、ということです。

これは、多くのデジタル製品やサイトが越えられない一線です。いったんMVPを作った後に、提供するものを使う喜びだけでなく、意味のあるものにする努力を続けるには、しばしは苦労が伴います。これは、ほとんど人は踏み込まない神聖な領域なのです。もしユーザーが、あなたのデザイン、サイト、体験、製品に感情的なレベルで接することができれば、それを使いたい、覚えていたい、好きだと思うようになります。

要約すると

私がインタラクティブメディアを愛する主な理由のひとつは、ほとんど何でもできるところです。オーディオ、ビジュアル、VR、インタラクティブ性、すべてが指先ひとつで操作できます。それを際立たせるのがインタラクティブ性であり、その気になればほとんど何でもデザインできるのです。最近のデザイナーは、安全策をとって、使い勝手のよい体験をデザインすることに専念する傾向が強まっています。無茶をする必要はありませんが、思慮深さとビジョンがあれば、それだけで大きな力になります。

自分自身に問いかけてみてください。「この体験は使っていて楽しいか、意味があるか、感情を呼び起こすものか？」と。

私たちが「人間中心設計」と呼ぶのには理由があります。記憶に残るもの、感動的なもの、意味のあるものを作りたいなら、感情を刺激することで強力な反応が得られ、どんなにシンプルな体験でも人々が好んで使うものにすることができます。

・・・

この記事は、2017年3月に公開されました。英文はMediumで閲覧できます。

● Design for Emotion

https://medium.com/google-design/design-for-emotion-7ba0cf40e05b

（DMN編集部）

PSDtoHUBSPOT News Blog

This Blog Template is created by www.psdtohubspot.com

デザインインパクト デザイン組織 デザイントレンド

DMN Report 044：デザインフォーエモーション

Categories

Subscribe to Email Updates

Popular Stories

DMN Design Management Report #044

デザイン・フォー・エモーション

デジタルの世界での例

海への旅

シティーマッパー（Citymapper）

24 Hours of Happy

ペイパープレーン（Paper Planes）

なぜ感情に訴えるデザインが重要なのか？

要約すると

・・・

PSDtoHUBSPOT News Blog

This Blog Template is created by www.psdtohubspot.com

デザインインパクト デザイン組織 デザイントレンド

DMN Report 044：デザインフォーエモーション

Categories

Subscribe to Email Updates

Popular Stories

DMN Design Management Report #044

デザイン・フォー・エモーション

デジタルの世界での例

海への旅

シティーマッパー（Citymapper）

24 Hours of Happy

ペイパープレーン（Paper Planes）

なぜ感情に訴えるデザインが重要なのか？

要約すると

・ ・ ・

You may also like:

DMN Report #99 UXの構造的問題

DMN Report #97 サービスデザインは地球への影響を緩和するために何ができるのか？

DMN Report #96 AIユーザーリサーチは 「何もしないよりはマシ 」ではないーもっと悪い

デザインインパクトデザイン組織デザイントレンド

・・・

DMN Report #96 AIユーザーリサーチは「何もしないよりはマシ」ではないーもっと悪い