Design-JP 第2回 勉強会 : インタラクション connpass

エンジニア枠で参加してきました。
登壇者への Q&A は Sli.do だったので、暇をもつけてはせっせと質問を放り込んでおいたのが功を奏して
自分の質問が採用されたときは内心ちょっと小躍り。

セッション1「インタラクションデザインの調整のコツと、それにまつわるコミュニケーションの仕方」

資料はコチラです。

エンジニアなので、話の多くはすぐに実践に使えるというわけではないのですが「どれもコレも知っておいて損することは何一つない」と思うような話なのと、プレゼンの小道具から話に至るまで登壇者の安藤さんのプレゼン力にメモを取るのも惜しんで聞き入っていました。

以下、メモを。

Motion & Animation

• なぜアニメーションをするのか?
• ユーザーに対しての注意喚起と要素の切り替わりを伝え、情報構造を整理する手助けをするため
• いきなり画面要素を切り替えるとユーザーは置いてきぼりになる
  • 操作や画面内の要素が何の前触れもなく変化してしまうと「画面の変化」に対して追従するのが難しい
• アニメーションとは位置や形、色、透明度の変化
• 動画デモ。画面に白い正円が表示されるのと、同じ正円が点滅表示される
  • ポケモンフラッシュ注意
  • デモを通して、会場の参加者に円の表示について、点滅なしと、点滅ありでは、どちらの方が長く表示されたのか？
  • ほとんどの人が点滅する方が長く表示された方に挙手
  • 種明かしをすると、両方（点滅あり/なし）は同じ時間だけ表示されていたが人間の感覚的に「点滅あり」のほうが長く感じる
  • アニメーションのコツ「開始」と「終了」に50~100msecぐらいの間を設計する
  • 開始が早すぎると人の感覚的に操作した感じがしない
  • 終了に間をもたせるのは、人間がアニメーションを終了したこと認識する時間が必要なため
• 240fps のハイスピードカメラで分解して色んなアニメーションを観察するとアニメーションの違和感を減らす努力がよくわかる
• アニメーションの色々なデモ多数

Communication Design x Tech

デザイナーの立場から話が始まる?
- コードで正円が書けるのようになるために技術を習得するのはデザイナーにとって凄いことだが、そこから一気に多様な方向にも手を出しやすい
- 単純な正円を表示するロジックも、それを何度も組み合わせるだけで表現の幅は大きく増える

エンジニアに向けて
- エンジニアは機能性や実用性にフォーカスする傾向が高くデザインの中の細部に起きている小さな問題に寛容すぎる
- デザイナーは、そういった「小さなデザイン上の問題」でも 気持ち悪さ を感じる
- エンジニアも「そんな小さなこと？」と思わずに耳を傾けてあげてほしい

<感想>
逆のケースだと「日々、開発をしているエンジニアの人達がデザイナーの人達が書いてきたコードを見たときにインデントや命名やプログラミングをする中で身につけてきたソースコードのフォーマットから外れてる時に感じる感情」に近いものだと思います。
インデントや括弧/()/{} の前後のホワイトスペースなど。
</感想>

• 文字間の距離には意味がある・文字の間隔?幅?（なんて言うんだろうか）
• LOUIS VUITTON は商品に刻印されているロゴと、店舗に看板で使われているロゴでは文字の間隔が違う
• 文字間隔が広いほうが、優雅でゆったりとした印象を与える

（個人的な感想）
ロゴの文字間隔が狭いのは、大きすぎたり幅が広かったりすると認識しづらいとか？文字の読みやすさの問題ではなく、それ自体が造形的なロゴ？アイコンとして機能をなすものなので文字の間隔をあえて狭くしているとか？

コミュニケーションとは、お互いの別々の体験が一つの共有財産となるまで、その体験を貸し借りするプロセスのことをいう

• 擬音語などを整理する（すっと、すいすい、スコン、スカっと）
• 一般的すぎる、解釈が曖昧（ポジションや状況によって意味解釈が変化する）な言葉は避ける
• easing のカーブは今は失われた技術だ、コレ自体はなくなったわけではないので知っておく方が良い
• 「動き」に対してのディレクション
  • 「動き」そのものの試作・検討段階で必要なアウトプットを行いプロダクトの実装にすすめさせるのが良いディレクション
  • 「動き」が実装されたプロダクトの最終調整であーだこーだは悪いディレクション

<感想>
確かに。
プロダクトの実装前にアウトプットを出し切らずぬ「実装しないと動きわからないから〜」と言われると、ちょっと困る。毎回困る。
だったらプロダクトの実装前にプロトタイピングでアニメーションを作り込むフェーズが必要になると思います。
このあたりは安藤さんのスライドを見ないと始まらない
</感想>

• 比較しよう！例としてFacebook の emotion を取り上げ、現在のデザインにいたるまでの比較歴を紹介
• 複数機種向けに開発するなら一番古くて性能の低い端末に向けて調整する
• おすすめツール「processing」「keynote」「Kite Composer」
• React + sketch で コードの方を変えると sketch にも反映されるツールがある（限定的だが使える）
• 映画などは色んなアニメーションの参考になる宝庫

セッション2「誰のためのマイクロインタラクション？ -マイクロインタラクションへの理解とプロトタイピングの実践」(仮)

貴島さんによるマイクロインタラクションを中心に、プロトタイピングの実践に関して、ツールなども含めての発表。

こちらも内容は貴島さん本人のスライドを見ていただくほうが良いかと思います。
発表内容で紹介されたプロトタイピングツールなどを下記に.

• Farmer - Ubder でも使われているっぽい
• Prott - 有名な Goodpatch さんのプロトタイピングツール
• Adobe - Adobe 様
• inVision - 全く知りませぬ
• Flinto - Flinto 自体も有名ですがエンジニアなら Rebuild.fm の Okui さんの方が知名度的に上かもしれない
• Sketch - 説明不要
• Quartz Coomposer - 名前は聞いたことがある
• Origami - 名前は聞いたことがある

このイベントとは関係ないんですが、こんな blog もありました

2017年最新版！プロトタイピングツールのまとめ
https://www.wantedly.com/companies/Supership/post_articles/55150

LT 予定者が欠席のため LT 自体が流れる予定だったのが、そこから飛び入り LTの佐藤さんが登壇され、しかも飛び入りとは思えないほど素晴らしい出来栄えのスライドで正直デザイナーという職業で持ち得る技能の凄さに驚きを隠せなかったです。

Q&A でも、即質問されていた安藤さんが使っていたプレゼンテーションデバイス？ツール？
https://www.logicool.co.jp/ja-jp/product/spotlight-presentation-remote

Q&A

Q. みなさんがよく使うプロトタイプツールは何ですか？-> 会場
A.prottが一番多く、次がinVision. Adobe XDはちょこっと。
https://twitter.com/minyako/status/862273363334451201

Prott 大人気! もう定番プロトタイピングツールなんでしょうか。

Q.プロトタイピングをする時間がない場合などはどういった手法でインタラクション（アニメーションなど）を仕上げていくのでしょうか
A.時間がない時は定番の動きを使って構成すると、共通認識が得やすいのでは？
https://twitter.com/minyako/status/862274276329570304

個人的には、この回答はすごく助けられたというか...嬉しかったというか。
定番のことしかしないのは悪いことでもないし、ポジティブに定番を選択するという理由が明確になった。

Q.Prototypeでかなり完成度が高いインタラクションは作れると思うのですが、どこをプロトタイプの引き際にしてますか？
A.チームメンバーに伝わった、もう実装できる、と思えたら終えていいのでは？
https://twitter.com/minyako/status/862274804778323968

「プロダクトの実装」に入るということは仕様や構成などの洗い出しができていることと同義だとすると、たしかにその通りだと思います。

感想

エンジニアもデザイナーがインタラクションやモーションで使うアニメーションの認識合わせをするのは大変だし苦労している模様。
その点からもプロトタイピングで実際に作りたいモノ、見せたい動きを実現するのは有用な手法である。
とはいえアニメーションの議論をする時に使う口語表現は 擬音 が多くなりがちなのは、どこも一緒なのかも。

とても学びも多かったので、上げていくとキリがないのですが特に印象的に感じた内容を以下に。

• インタラクションの重要性
  • エンジニアも勉強したほうが良い
  • アニメーションのイロハからデザインのなんとなるかを知る必要はないが、ユーザーにとって使い心地が確実に改善するならエンジニアに出来ることもあるはず
  • デザイナーが作るプロトタイプの成果物を以下に齟齬なく、スムーズにプロダクトに取り込めるかは課題感として持っておきたい
• Material Design のアニメーションは凄く作りこんである
  • 認識の齟齬が起きないよう、コミュニケーション手段をすごく練り込んで進めている
  • ものすごく手間ひまかけて作ったもの（だからこそ、この定番と言われてしまいそうなアニメーションを選択することでユーザーにとって期待値の引く選択肢を回避するのはポジティブな選択なんだろう。と理解しました）

• 「完成度の高いプロトタイピング」 > 「最低限の動きが認識出るぐらいのプロトタイピング」 > 「ペーパープロトタイピング」という順でプロトタイピングでの評価...意思疎通や情報伝達量が下がる？

• プロトタイピング大事!