参加録 "第二回 design-jp"

定時ちょっと前に上がって六本木へ。

初めて訪ねたGooleオフィス。

安藤さんの書籍を何冊か読んで、気になったのでこのイベントに参加しました。

 

UXガイドにあたり、アニメーションの考察を交えてお話されていたので、講演の至るところで納得感を覚えながら聴きました。

 

下記イベントのメモです。

 

イベント名：第二回 design-jp
日時：2017/05/10 19:00-22:00
URL：https://design-jp.connpass.com/event/55950/

 

講演内容
　①セッション1「インタラクションデザインの調整のコツと、それにまつわるコミュニケーションの仕方」
　②セッション2「誰のためのマイクロインタラクション？ -マイクロインタラクションへの理解とプロトタイピングの実践」(仮)

[twitter]
　#designjp
[slack] ※参加歓迎
　https://design-jp.herokuapp.com
[“sli.do”] ※匿名質問板
　www.slide.com with code #Y883

コンセプト：
　なぜインタラクションか？を軸に、エンジニアとデザイナーをまたぐ勉強会の企画。

■ セッション①
@yukio_andoh

※slideshare
https://www.slideshare.net/yukio.andoh/design-jp-vol2-motion-design-animation

"motion, animation” の話し
　Motion　ディレクション
　Communication

By Norman McLaren
　アニメは装飾でない、機能である

アニメなぜ？
　変化を伝える
　小さなものに注意換気
　操作の楽しみ
　構造の理解（奥行きとか）

フリクション（＝意図的違和感）
操作素早いけど、アニメでわかりやすくする

時間＋位置、形
時間＋色、透明度（グラデーション、、）

時間軸の解釈
　１５パターン

アニメの認識
　300ms-400msがおよそ
　初回はさておき。
　慣れるといらいらがたまる

　素早すぎると操作感が薄まる、溜めが必要。
　その後。本編が始まるようにする。

　止まった感が出るのも同様。
　最小でも150msは見せるのがいい

Chatbotの返事。
　これも然り。早すぎると違和感。
　時間がかかるのが自然。

240fps
　スマホでもハイスピードカメラで撮影可能
　アニメーションを厳密に視える。

秒針が進んで戻る（15fps）

Remoteテストキットは良いツール
　By NTTレゾナント

ディズニーのアニメの法則
　予兆
　予備動作
　モーション

参考書籍あります
　・ディズニーアニメーション
　・アニメーターズサバイバルキット
　・アニメーションの本
　※加えて、vimeo参照

Vimeoのアニメーション動画
　スクロール実装も予備動作あり
　リスのしっぽのモーション

気に入ったアニメーションサンプルを蓄えておく
“path”は昔流行った

参照：
uimovement.com

動きすぎると酔う
　ディズニー
　　コマ撮りしてアニメ化する
　日本
　　鉄腕アトム
　　コスト減のためにカット数を減らして、脳で保管する
　　いろんな方向、カーブでは非統一になる
　参照
　https://inspirationmobile.tumblr.com/

デザイナー
　丸を書く
　　美観、自分のわかるものを武器にできる

Sign Inフォーム
　エンジニアはデザイナーの気づいた違和感を大事にする。

LOUIS VUITTON
　「店舗」は文字感の幅広い（優雅な印象）
　「商品」は文字感の幅狭い（洗練された印象）

哲学者　ジョン・デューイ
　体験が共有財産になるように
　擬音語、擬態語の統一

書籍
　GIONGO GITAIGO JISYO

曖昧な解釈
　拡大する、展開する

すいすい
すかっ
すこん
すっ
ずっしり
すっぱり
すとん

ものの流れ
　easingの名前（Flashには表現の呼び方が揃っていた）
　easeOutSide
　等、30通りくらい

「動き」のひらめき
「動き」の試作、検討
「動き」の批評
「動き」の実装
プロダクト（※ここはディレクションではない）
調整

Facebookのアイコン

単体では判断できないことも「比べる」とわかる
素早い、ゆっくり。
製作者は思い入れがは消しいので、一旦寝かしてみる。

Google 時間のあるプロジェクト
　動画と進行表を作成して、エンジニアに渡す

複数機種向けの開発
　一番古い、遅い機種を最初に調整する
　その後、高性能、リッチな端末で滑らかに仕上げるのが(・∀・)ｲｲ!

アニメとは？
　アートは技術に
　技術はアートにインスピレーションを当たっる

オススメのツール
　Processing
　Keynote　（マジックムーブで、easier/out, 等のモーションデザインが設定できる）
　Kite Composer（タイムラインでアニメが作れる）
　https://kiteapp.co/

React＋Sketch.appに期待。

映画のタイトルシーケンスが良い
　モーションタイポグラフィーも参考になる。

その他参照：
https://material.io/guidelines/motion/material-motion.html
https://framer.com/examples/featured/

KIJIMA MAMORU
@sadako_a_

FOLIO Inc.
　次代型証券サービス
　iOSのリードデザイナー

マイクロインタラクション

例：登録フォームのインタラクション

分解
　メアド：フォームチェック
　PW：フォームチェック
　規約：チェック状態チェック
　登録：アクションチェック

設計上のアプローチ

意識する３つのポイント
　①無意識に操作
　②ほしいものをすぐ提供する
　③人間味のあるフィードバックを与える

①クラウドのファイルビューアー

読み込み中…に対するユーザーの感情
　いつおわるの？
　どれぐらいでおわるの？

進捗バーが表示される
通信環境が悪いメッセージ
→ストレスフリーに

②メモアプリ

テキストエディア
操作がすぐできること
行き来が少ないこと

③404エラーページ

検索結果
該当なし…では冷たい

顔アイコン出す
再検索を促すメッセージ

その他事例
　DropboxテキストエディタPaperも出している
　　保存自動的にされるとか
　Uber Eats
　　この情報で正しいですか？

ユーザーをファンにする
　Sketch + Framer

UI設計
※Framerはインタラクティブプロトタイピングツール
記述はJS(coffee script）

認識の共有のズレ

ツール
　Prott
　InVision
　Xd

　Framer
　OrigamiStudio
　…

サイト「UXTOOLS」
　20個くらいある…
　自社にあったツールがいい
　例：ツイート画面のプロトタイプ

Group階層でSketchで揃えておく
※レイヤーではなく

オブジェクト生成
　コードベース
　GUIでも調整可能

SketchファイルのImport
　→Group階層で読み込まれる
　→レイヤー作成
　→アニメ調整（CSS調整に近い作業）

公式サイトのサンプルを見てコードを参照して、作れる
コーディングもデザインの一貫であると考える

■まとめ

マイクロインタラクション
　MicroInteraction <> Animation
ユーザー体験の向上
　表現のためだけでないアニメーション
Flamer
　Twitterの動画機能

LT
@nobsato

佐藤のぶや
　Secret Lab Inc.

提案型デザイン

6 things
　InViision事例

Ideaはどこから？
　”Pentagram”　UKのデザイン会社
　グラフィックデザイン
　（書籍）IDEAS ON DESIGN

ひらめきからの発想
　アイディアは日頃考えていることからの飛躍

参考
　MARVEL
　カイル・クーパーのデザイン

QA

Q：使っているサービスは？

　Prott （多い
　Invison
　Flinto
　XD
　Pixate

　使い分け？
　　プロジェクトごととか

Q：エンジニアとデザイナーの間で animation/transition を作る時のコミュニケーション方法はどうやっていますか？

プロトタイプツールを用意する
　数字を調整して可視化するツール

Q：プロトタイピングをする時間がない場合などはどういった手法でインタラクション（アニメーションなど）を仕上げていくのでしょうか

定番、共通認識のもので固める

Q：どこをプロトタイプの引き際にしてますか？

工数。実装までのコミュニケーション次第。
フェディリティ。
共有の粒度を考えておく。
実物で。

Q：アニメーションの原則を体系的に学ぶ？

Udemyでオンラインで学ぶ。Pixarの講座。
それから手を動かす。
学校に通う。

Q：最近気になるWebサービスやアプリやデバイスは何ですか？

メルカリのカウが気になる。
　バーコードで出品できる。
　出品体験を簡単にする。
　メルカリポイントの経済圏、ポイントで買う。

意図的にリッチなモーション、チープなモーションを選ぶ。
安い、楽しいをデザインする。

Amazon Echo 画面つき

モーニン：スマホでカーテンが開閉できる
ぬいぐるみ：装着できるデバイス

スマホだけで完結しないサービス
生活に組み合わせるサービス
チャットのデザイン

Q：デザイナーにとって、Material Design って制限多すぎる気もするのですが、実際にどうでしょう？

制限多いとは思わない。
目的を満たす上で充実している。
アニメーションの理想、アーティスティック。それは目的が異なる。

最上でなければ、定番にしたほうがカッコイイ。

ワークショップは時間ないため次回へ見送り

マテリアルデザインアワードやっていますとのこと。
https://design.google.com/articles/material-design-awards-2016/

以上です。