インタラクションをスケッチすること

前置き（学生は飛ばし読みでOK）

UI/UXデザインを学ぶ上で、ユーザー調査や情報の構造設計、ユーザー体験の構築、サービスとしてビジネスを牽引していくとか、そういうのの前に、ちゃんと人間のエモーションに働きかける魅力的な「図」と「動き」を自分の手で作れますか？訓練してる？という問題意識がずーっとありました。
メーカー系制作ではグラフィックの部門とUX部門が別とか言うのを聞くと、ゲーム系とは違うなぁ～と思う。なんで全部自分でやらせないんだろう。

私の体験では、ゲームの会社でグラフィック出身の学生を新卒採用して、部門の研修で私がAfterEffectsやMayaなど1ヶ月くらいハンズオンで教えてチームに放り込むと、すぐにもりもりゲーム内のインタラクションやアニメーション、ムービーを作り始めてました。
だから、やらせればけっこうできるのはわかっていたんで、それを教育機関で研究や訓練としてやってしまえばいいんじゃないかなっていうのが今回の話です。

インタフェースでは、人間から機械への働きかけに呼応して画面上の「図」が変化します。
その瞬間、人間の心に浮かび上がる感情の変化を、デザイナー自身が自分の感情を見つめることで観測し、より良い体験を生み出すように「図」と「動き」を何回も繰り返し調整します。
「図」と「動き」自体が持つ面白さのデザイン。
これは、グラフィックデザイン、イラストレーション、プロダクトデザイン、アニメーションなど従来別々だった職能を横断し、融合して生み出すデザインです。
人間の身体性がデジタルな仮想空間上に今後さらに拡張していく中で、この「図」と「動き」自体が持つデザインについて学ぶことの重要性から、最初の課題として選びました。

展覧会前文

課題の再確認

今回の課題は「図」と「動き」を自分の手で作成する事です。
人間の手の動きに呼応して、機械に表示された図が変化する事で、結果的に人間の心が変化します。どうやったら操作したくなるのか。操作の納得感。操作する際の楽しさ、わかりやすさ。そういった様々な自分の感情を掘り下げる事で、より良い「図」と「動き」を実現する色々な手法を自分で体得する。ペルソナやユーザー体験などを考える前に、まず自身の感情の変化を観測する技能を身につけて欲しい。こういうのって正解があるわけじゃないんだよね。

UIデバイスについて

展示についてはハードウエアを5種類準備しました。本当は学生が自身で持ち寄ったデバイスを使いたかったんだけど、今回は時間もないので私が用立てしました。次回の学生は、ぜひ色々なデバイスを持ち寄って欲しいな。

今回こちらで用意したデバイスは一応座学の内容を反映させています。ゲームUIの進歩と並行発生したPCでのGUIについて。ゲームUIとWEBのUIの相互に影響を与えた関係、現代のスマートフォンに続くUIの歴史をそれなりに俯瞰できる仕掛けとして考えてみています。座学では伝わりにくいことが実体験で少しでも補えればと思います。ぜひ、パネルにも記しておいた文章を参考に、自分で触って体験をしておいてください。

上記の理由からボタン以外のインタラクションは全て私が作成しました。これも次回からは学生に任せたいです。授業内で時間は作るから、楽しいのでやってみてくださいね。

①アイコンと同じ色のボタンのインタラクション

アクションゲームを上達するためには、操作するキャラクター(アバター)と一体になる必要があります。そのためには、操作ボタンを見ないでもプレーできる事、すなわちUIの透明化が必要になります。その時、画面を見ていて手もとは見ません。
自由なUI設計が可能なアーケードゲームでは、実際に操作するボタンを模した図を画面の中のボタンとして表示し同期させることで、操作するボタンを見ずに画面だけを見て操作する学習を即す、というものがあります。
この効果についてメカニカルミニキーボードのキートップを変更することで再現を試みました。
上記のWEB上のインタラクションは操作可能です。クリックしてカレントにしたあとで、キーボードの１～４を押してみてください。各アイコンにアサインされています。学生はできるだけ実際の展示を触ってみてください。

②カーソルキーのインタラクション

今では忘れられがちなことですが、ゲームUIの起源はおもちゃや遊技機にありました。直接的にはコンピュータのUIの歴史とは別になるのです。
1980年代、アーケードゲームをパーソナルコンピュータへ移植する際「上下左右による選択＋決定ボタン」というゲームUIの基本操作はカーソルキーなどで代用されました。
ゲームパッドやマウスというフィジカルなポインティングデバイスが生まれる前のUIを体験してみましょう。

③ゲームパッドのインタラクション

家庭用ゲーム機のUIは、40年以上の歴史があります。ただ最近は家庭用ゲーム機用に作られたゲームパッドを無線でPCと接続し、STEAMやEPICなどのプラットフォームを利用してプレーするスタイルが普及しているようです。
仮想空間へ身体性が拡張している状態では、ゲームパッドはゲーム内のアバターと同期するための重要なフィジカルな器官となります。
上記インタラクションはUSBでもBluetoothでもX-Box用のゲームパッドをPCへ繋げば動作します。
ゲームパッドのお陰で生まれる一体感をあらためて感じてみましょう。

④マウスのインタラクション

ダグラス・エンゲルバートが発明したマウスは、GUIの重要な要素としてALTOに搭載されました。その後なかなか世に出ていなかったALTOを視察に来たしたジョブズとゲイツによって、GUIは爆発的に世界中へ普及しました。
マウスカーソルは手や指の延長としてフィジカルに機能します。モバイルファーストが当たり前になった現在でも、マウスを使用したインタラクションの正確さや安定性はかけがえのないものです。慣れもあるけど使いやすいですよね。

⑤スマートフォンのインタラクション

「もの」そのものを人間が自分の手や指で直接動かす事で機械を操作するタンジブルなUIが、CUI、GUIに次ぐUIとして研究者によって予言されていました。そして今日爆発的に普及したスマートフォンでは、指先で直接画面上の「もの」を操作しています。
指の影のグラフィックが見えないなどいくつか欠点はありますが、マウスに比べてよりフィジカルな操作感があるため没入感を得やすく、また直感的に使わせる設計が可能になっています。

終わりに

今のところ、同じテーマで年に3回繰り返す予定です。このように展覧会で展示用に作成したインタラクションは可能な限り動作可能な状況で保存しておき、必要なときはいつでも確認できるので次回以降の学生は参考にして貰えればと思います。
同様に卒業制作でインタラクティブな作品を作る学生にとっても、きっと参考になるはずです。
現状学生にとって、ラフなスケッチレベルのインタラクティブな作品を見る機会が少ないので、こうした現物を見せる事で自身の作品作りのイメージしやすいと考えています。

大阪芸術大学　デザイン学科　15号館1階の入って左側の部屋で2023/6/22 10:20開催中です。