これだけは覚えておきたい! もはや避けては通れないAR体験のデザインをハズさないようにするための方法 - WWDC2018 4日目 現地レポート

hey@WWDC2018!
「WWDC noteマラソン（思いつきで名付けた）」も、今日でついに4日目。残すところあと1日。
本日はマニアックなボタンデザインの思考プロセスの話や、旬なAR体験の方法論などのレポートをお伝えしつつ、みなさんお楽しみBashの様子もお届けしたいと思います。

The Life of a Button

たかがボタン、されどボタン。ボタンというあたりまえのUIも、あたりまえのように感じられるための数々の工夫がなされている。トースターと連携して「トーストするだけ」のアプリを例に、そのデザインプロセスの軌跡を解説されています。

Inspiration.
全ては観察からはじまる。
「インターネットにつながったトーストを操作できるアプリで、その『トーストする』ボタンを押したときのサウンドをデザインしてください。」そう言われた時、まず何から始めるでしょうか。
AppleのサウンドデザイナーであるHugo氏は、全体のサウンドデザインのプロセスを「Inspiration」「Designing Sound」「Building block」と3つに分けた上で、まずは対象のものを注意深く観察して「Inspiration」を得ることから始めるとしています。
トーストを開始している音はどうなっているのか、トースト中の電子音はどんなものだろうか。このサウンドをデジタルなインタラクションに置き換えた時にどうすれば良いか。
現実世界のサウンドをそのまま取り入れるのではなく、そのエッセンスを取り入れつつ音色や大きさ、速さなどを再構築することで洗練されたアプリの印象を与えることができるとしています。

Perceived Affordance.
ユーザーの「意味」によりそう。
トーストする。ただそれだけの1画面1アクションで済むようなアプリをデザインするということはどういうことか。シンプルな機能なので、画面の真ん中ににそのボタンをただ配置すれば出来上がるように思います。
でも、その配置は本当に使いやすいのか、ボタンの形状は本当に誰もがボタンと認識してもらえるようなものになっているかは注意深く考える必要があります。
今回の解説では、あらゆる配置やボタンのパターンを考慮した上で、基本的にはユーザーが使い慣れている環境や経験に沿ったものをベースにデザインすることを推奨し、今回の解説では様々なボタンの形状が検討できた中でOSと合わせたボタンのデザインにすることを選択しました。
その事を「Perceived Affordance（知覚されたアフォーダンス）」と表現し、ユーザーがOSを使うことによって蓄積された「これは押せる感じのやつ、これはスライドして動かす感じのやつ」といった、ユーザーの主観的な「意味」に寄り添うことで直感的に目的を達成できるデザインにできるとしています。

Creating Great AR Experiences

今年のWWDCはARの年といっても良いぐらい、Keynoteでも大きく時間を使われていて、ARのセッションも充実しています。今後ますます広がっていく可能性が高い中で、そのツボを抑えてハズさない体験にするための、基礎的なデザインの具体的な方法論を解説してくれています。

Understand to the world.
まず、画面に向かう前に、現実に向かう。
AR体験のデザインをする。そうなった時に何から手をつければよいでしょうか。Appleのデザイナーは、まず現実の世界がどのように動いているかを正確に理解・分析することが重要だとしています。
影の向きはどちらに向かうべきか。オブジェクトの反射光はどんな色をしているか。レンダリングの制限がある中で、いかにしてリアリティを感じる質感を持たせるか。ディテールに細分化して「リアルに作り込んでいく」のではなく、全体として「リアルに見える」ようにするかの観察眼とテクニックが必要だとしています。
このあたりは、まさにデッサン。という感じで、Sketchなどを使ってただ画面が設計できるだけではなく、そのあたりの観察→表現の技術も重要になってくるのではないかと思いました。

Moving the device first.
デバイスの動きをプライマリ操作にする。
これまでの2次元的なアプリ画面の操作設計と、3次元的なARアプリの画面デザインで大きく違う点は何か。
それは、AR上にあるオブジェクトの表示をユーザーが切り替えたりすることができるようにする際に、スワイプなどのジェスチャなどではなく、デバイスを動かすことでその目的を達成できるようにすることが必要だとしています。
家具配置アプリを例にしながら、ARとして展開された部屋のなかでは、現実世界と同じように空間に制限があり、スワイプなどでの操作だと、そのAR空間の制限にぶつかってしまうため、それを避けなければいけないとしています。
そのため「Moving the device first」として、ユーザーにデバイスを動かしてもらう。そうすることでユーザーはピンチや回転などの複雑な操作を覚える必要がなく、移動によって現実と同じようにAR空間でスムーズな体験をすることができるようになるそうです。
また、テキストやナビゲーションなどの配置も、AR空間とは別のナビゲーションレイヤーを用意して、固定することで可読性や視認性を保つようにすべきとのことでした。
ARなどの3次元的なインターフェイスが普及していく中で、マテリアルデザインにあるような、ナビゲーションやボタンなどのシャドウはかえって空間の不整合を生み出す原因となる場合があり、iOSがフラットデザインに踏み切った理由も、ARを見越していたからなのかもしれないとも考えることもできますね。

本日のセッションの詳細はApple公式サイトで配信されておりますので続きはこちらからどうぞ↓

WWDC 2018 - Videos - Apple Developer

Bash! 🎤🍻🕺

毎年やっているらしい、セッション終了後に別会場で行われる野外ライブ。
今年はDJのグルーヴ感たっぷりのプレイや、ロックバンド「Panic at the disco」の熱気あふれる演奏で大盛り上がり!
普段はキーボードにある開発者たちの両手も、サンノゼの爽快な空と心地よい風を切りながら心地よさそうに揺れていました🙌

開場直後の風景。空港が近いのでいい感じの画になる。

会場のサイドに用意されたゲームをビール片手に楽しんでいました。

まったり観賞派の方々はこちら。ノリノリじゃなくても雰囲気を楽しみながらビール飲んでおりました。チェアやテーブルなども多く、休む場所には困らない感じ。

会場で食べることのできるフードは、まさにアメリカンな肉厚ハンバーガーや、ベジタリアンの方向けのメニューなども用意されていました。個人的にはMac N' Cheese（マッケンチーズ）というマカロニにチーズを絡めたやつに何故か青ネギがのってたやつがうまかったです。チーズたこ焼きのような味にも感じられて、1週間ぶりに日本の食べ物っぽいものを口にできました😭

開演時のDJプレイ。まだまだ盛り上がりに欠ける感じ。このあとサプライズで雰囲気は一転。開発者勢が狂喜乱舞することに。

飛行機がとんでくるとみんなで指差すという謎のノリ。「ヘイガーイズ! カモォォン!」と声をかけられたので自分もやってみましたがやはり謎。何か特別な意味があるのでしょうか。

DJプレイの後のサプライズはなんと我らがフェデリギ🤘
会場の隅にいた開発者の方々もフェデリギさん登場でステージ付近に大挙して押し寄せてきました。
会場は一気に熱気を帯びながら「アイラーーーブ! フェデリギィィィーーー!!」と絶叫する人も続出。

Panic at the discoの演奏も最高潮に!

後半のDJプレイではクラブさながら。 国境、人種、年齢、性別を超えてみんながひとつに! これぞWWDCが重視しているDiversityの一面!

テクノロジーだけでは不十分です。
社会を前進させるような新しいアイデアと経験を生み出すために、テクノロジーはリベラルアーツや人文科学と交わらなくてはなりません。
この夏、私たちは、私たちが世界を変えるのを手助けしてくれる、多様な視点、情熱、そして才能を持った数千人の俊英を集めます。
ーWWDC メッセージより

もうね、なんだかね。グルーブ感を通り越すとそうなりますよね。

ということで、世界中の人たちと音楽でつながる楽しさと、会場の解放感に包まれたとても心地よい時間となりました!

いよいよ明日はWWDC最終日。
残りの力を振り絞って頑張ってまいります💪

✽ ✽ ✽

WWDC最終日のレポートはこちら👇