[レポート]インタラクションはシステムとユーザーの壁を超えるというお話 #Adobe MAX Japan

赤の会場「R（Red）ホール」の様子。

 

12/3に開催された「Adobe MAX Japan」では沢山のクリエイティビティが刺激されるセッションが行われました。

今回自分が受講したセッションのうち印象的なものをまとめました。

セッションレポート①

14:10 - 15:00

ユーザーの心を掴む！気持ちいいインタラクションがつくりだすインターフェースデザイン

登壇者：奥田透也さん

セッション情報URL：https://maxjapan.adobe.com/sessions/2

奥田さんのポートフォリオ

奥田さんのTwitter

……

登壇スライドを奥田さんがアップしてくださっています。読もう！

（※図がないと伝わりにくい部分に関してキャプチャをお借りしています。問題がありましたらご指摘ください）

会場でもっとも大きなホール「R」ホールで行われたセッション。こちらは「インタラクション」について、奥田さんが常日頃から意識している考え方をご紹介いただきました。今回自分が最も印象に残ったセッションです。

「普段やっていることはサービスの立ち上げ、改善です」と、実際のお仕事の紹介からはじまりました。

「ウェブサイトの提案や、インスタレーション。物理現象に興味がある。影の中に別の映像を写したり。シンボルマークのモーションデザイン、インタラクションの考え方を応用してカードを作ったりもしている。構造・動きに興味がある」

今回の主題

今回話すことは「気持ちいいインタラクションをつくる唯一無二の方法。それは雑にやらないということ」

雑なものとは…

①ユーザーのことを見ていない。

「ふわっとさせておけばいいんでしょ」というと、ユーザーも人間なのでその気持は伝わってしまう。

持つべき心得は「インタラクションは対話なので繊細に読み取るのが大事」

②部分に拘りすぎて全体が破綻している。

大工が思い思いに作った結果、ロココ調のお風呂や和風建築の部屋で全体がわからなくなるような状態。これはもったいない。

持つべき心得は「システムは支え合って生きているので、全体の流れを想像しながらこだわる」

……

我々を取り巻く環境の変化。この10年15年でインタラクションがかわってきた。対応年数があがってきている。

広告やキャンペーン：作ってすぐ終わる。接触機会が限られるのでインパクト重視。一瞬で人をひきつけて気持ちよくさせる。

サービス：開始してスタートしてだんだん育てていくスキーム。長期的なプロダクトである。インタラクションの気持ちよさも、飽きやすいものよりは、自然で普遍的な良い手触りが大事。

強い表現　≠　派手なインタラクション

強い表現をしたいからといって、派手なインタラクションを使えばいいというわけではない。

「自分は普遍的な気持ちよさで、長く愛されるものを作っている」とおっしゃっていました。

インタラクションを紐解く

インタラクションの正体とはなんなのだろう？

システムとユーザーの間にあるのがインターフェース。ユーザーは、インターフェースを通じてシステムから受け取ったり操作している。インタラクションは、そのやりとりをつっきるものである。

システムとユーザーの壁を、インタラクションがつっきっている。

気づき→行為→反応。この一連の流れをデザインする。

たとえば、部屋の照明スイッチ。当たり前にやっていることだが、紐解いてみよう。

脳はよく出来ているので、ほとんどこの複雑な流れを無意識に行っている。

人間の脳はよく出来ているので、この複雑な流れをほとんど無意識に行っている。

行為を行って反応を得る。ユーザーとシステムの間にどんな丁寧なやり取りがあったのかが大切。

・変化させるためのもの、メタファーをスイッチとして捉えている。

・部屋が暗い、オンオフのメタファーの二つで切り替えたら電気がつくだろう、と思う。

・我々はいろいろな状況を組み合わせて仕組みを想像することができる。

・カチッとした手応えでわかる。これは「できたよ」という機械からのメッセージである。

見慣れた照明のスイッチでもシステムとユーザーの細かなやりとりがある。

より具体的に見ていこう

気づき、行為、反応をどれだけ丁寧に扱えるか、の話。

情報からさまざまな情報を読み取りながら、頭にさまざまな構造を想像する。

ここで映像が流れます。タップすると拡大するカードのUIですが、一番右のカードと次のカード。拡大するときの左右のカードの挙動が僅かに違います

動きが変わることによってユーザーの認識する空間構造が変わる、という例でした。

 

インターフェースを我々は空間として取られているので、UIは構造を設計することになる。

上のスライドでは、白いところがカメラがみているところ。しかし、ユーザーが見れていない部分も意識することで構造をつくることができる。

ユーザーはインターフェースに触れながら、頭の中でシステムの構造をイメージする。

インタラクションはUIの構造を裏切ってはいけない。UIの世界の秩序、設備を定義していく必要がある。UIの世界はどういった原理で、どういった構造なのかを考えながら作る。

 

起こること全てが意味を持ってしまう。

よく動くアニメを作ればいいのではなく、動きは意味を与えてしまう。

私達は、インタラクションすべてに意味を与え続けなくてはいけない。

行為の扱いについて

タップやクリックについて考えてみよう

タップもクリックもどちらも決定に適している。ユーザーがオブジェクトに触れて、垂直に指を離す行為である。たとえば、オブジェクトから離れると「キャンセル」になるUI。「離れるとキャンセル」というのはユーザーが自らの行為に対して重みを感じるのだ。

重みとはなんなのか＝意識的か、意識的でないか。

これはタッチパネル、マウス、それぞれの行為の重さのイメージ。

右に行けば重みのある行為、左は軽い行為。

こういったイメージを頭の中にもっておくと、考える上で幅が持てる。

 

P45の動画

画面を押す強さに対して、挙動が変わるデモ。強く押すことでシークができるようなUI。

動画をもっとコントロールしたい！という気持ちをシークにした。操作したいのに隠す、という従来のものが苦手だった。

ハプティック（Haptic）フィードバック（振動）をあたえて、UIの世界により深く入り込んで、あたかもデータを直接触っているかのような気持ちになる。

ユーザーが画面に対してか関わろう、とおもう気持ちを雑に扱ってはいけない。

反応の扱いについて

反応とは変化のこと。振動、サウンドなどさまざまだが画面の中だとアニメーションが重要。

今回は時間がないのでイージニングについてとりあげる。

ボタンを触って、それが白くホバーする。その時の速度の変化を見ていく。

結論から言うとイーズアウトが気持ちがいい。動きのピークが最初に現れるのでシステムがすぐに応答している感じがする。触れる勢いが、画面を貫通して勢いが伝わるイメージを持つ。

またOrigamiで作ったボタンでは、乗った！という情報でなく、どこにのったのか、という情報をエフェクトに変えている。ボタンが自分に寄り添ってくれる、という気持ちが表現できている。

インタラクションが作り出す普遍的な気持ちよさとは

①　イメージが画面越しに伝わる気持ちよさ。

ユーザーはインターフェースを自在に操れるようになる。

 

②　好奇心が生まれ、発見していく気持ちよさ。

好奇心が発見をもたらす体験。自ら発見して楽しさを見出していく。そういった余白を設計できると、人を豊かな気持ちにできるかもしれない。

ユースケースの紹介

脳活総研の事例

・認知症の早期発見に関するページ。佐藤卓氏制作のシンボルマークを使用した。脳に血液や思考が循環するイメージ。

・スクロールをすると動く。わざわざ触りに行くことはしない。

・次に触れるとさらに動く。触れるものだという核心。

クリックすると一番大きな反応になる。という４段画面で設計をした。もしかして？の連鎖で能動的にユーザーを巻き込んでいく。意思の外側にあるスクロールからホバーを経て、ダウン、クリックと行為と反応を徐々に大きくしていくことでユーザーの好奇心を増幅していった。

脳活総研ウェブサイト　https://nokatsusoken.co.jp/

すっごくうごくよ！

大日本タイポ組合の事例

 

・入力した名前が自分の顔になるインタラクション。これは二つのモードから成り立っている

・入力モード　名前を入れる　：　顔がすでに写っている。顔と自分の名前両方を見ている

・出力モード　顔として出す　：カメラの映像をのこしてキーボードがきえる。顔に文字が張り付くことで体験をなめらかに、ひとつづきにした。

単純に文字の形が顔になって、面白くなるというギャップがある。そのために入力フェーズではきっちりしたフォントにした。

・クリックする：　文字がばらばらになる。 これは展覧会のあとで、つけたモーション。

展示会が始まって、ユーザーがこのインタラクションを体験していくと「この作品はさわるもの」という意識が生まれた。

実際に子どもたちがばんばん出来た顔を叩いた。一旦イメージができるとユーザーは叩いてしまう。そこで叩いたときの反応を入れることにした。

文字を叩いてばらばらになるのは身体的にいい。また文字は戻る過程で、読めるようになる。形としての文字と、おもしろさの文字をつたえることに成功した。

デザインスタジオ「YOY」の事例

・照明や家具の制作を行っているブランド。どこか不思議な、これまでの先入観に対してあたらしい視点を与えるプロダクト。

・「空間的だなあ」と思った。プロダクトによって、これまでの空間が違った見え方をする、というのをウェブのインタラクションに取り入れた。

・風のような動き。そっと撫でることで画像を送ることができる。手が乗っていない作品もつながっているように動く。

・実装の話をすると、空気の流れが発生して、オブジェクトに力を与え、力学の計算で加速度が速度になって、最終的に座標になる。物理現象を簡略化させたものをこのサイトは持っている。

やけに間接的なインタラクションである。動きの原理原則を先に設計して、それに対して裏切らないアウトプットを作った。

ユーザーが法則性を発見したり、ウェブサイトの空間を楽しんでくれるような設計にした。

自然や物性から着想を得ることが多い。原理をつけることにしている。

デザインスタジオ「YOY」ウェブサイト https://yoy-idea.jp/

増幅する記憶の話

人は経験を印象として記憶する。実際より大げさになる。悲しい思い出は悲しく、楽しい思い出は楽しくなる声質を持っている。

ボールをなげてはずむ描写を物理原則にしたがってやっても物足りない。すこし滞空時間を長くすると、しっくりくる。

誇張をとりいれることでより気持ちよくなる。

インタラクションを開拓しよう！

新しいものは生まれにくい。普段の実験を見てもらって、面白さや広がりを知ってもらいたい。

自分で開拓していくためにやっていることの紹介。

P67の動画

コインランドリーの乾燥機を中から見たイメージ。洗濯物の視点を体験できる。自分がぐるぐると回った分だけ中の円も動く。

「三半規管狂うと、実際の洗濯物の気持ちになった」

行為と反応が身体的な別の部分を使って同期している例。

 

P68の動画

タッチパネルと指の関係性の実験。

「画面から指が離れたときも、インターフェースと関われないか」をテーマにした。

・指を画面につけると勝手に線が引かれる。

・離れると画面がはなれていく。

・ときどき風切り音がなる

・繰り返しているとまるで指が線を引きながら飛んでいるように感じる！

これは映像を見ていただくか触っていただいたほうがいいです。

待ち時間の画面でも、タイトルが点滅していて、いかにも触ってほしそうな待ち時間にした。

触らせれば勝ちなインタラクションなので…わかってきただろ？というタイミングでタイトルロゴは消える。こういったコミニュケーションも、テキスト一つで丁寧に設計ができる。

インタラクションは自由なもの。ユーザーとシステムの間にどのような意味を見いだせるのか。

まとめ

大切なことは３つ。

・丁寧に扱うこと。ユーザーの頭のイメージを手応えとして返してあげて。

・眼の前の作るインターフェースはどんな原理なんだろうか、を作りては考えて。

・触れる人が好奇心を持ち、いろいろな触り方ができるような余白を。体験者の気持ちになって遊ぶようにつくってください。

最後に

まだ誰も見たことのないものを探すには前提を疑うこと。タッチパネルはふれてなきゃいけない、とか。ユーザーとシステムの間の意味を考えてほしい。

 

セッションを終えて

インタラクションは楽しい。でも工数を考えると難しいし、かけた工数に対して得られるものなんかあるんだろうか？そんな自分のマイナスな気持ちを吹き飛ばしてくれるような明るいエネルギーに満ちたセッションでした。

奥田さんの「構造と動き」についての考え方や捉え方が非常にわかりやすくプレゼンテーション自体に私達聞き手への「仕事の丁寧さ」を感じ取ることが出来たのがとても印象的でした。

奥田さんのTwitterからは今回使用された映像や、実験用のインタラクションを触ることができるので是非そちらも御覧ください！