WCAN 2014 Autumnで発表した「ウェブデザインにおける動きの演出について」のスライド

1. ウェブデザインにおける動きの演出について
アップルップル 山田拓生

2. 山田拓生@yokozunat
有限会社アップルップル
デザイナー
dotgraphy.com

3. 課題
CSS、JS で動きの実装が求められる
チーム内でのイメージの共有

4. ゴール
ユーザーが楽しく使い続けてくれる
動きのあるサイトが作れるようになる

5. 3 つのポイント
UI アニメーション
インタラクション
伝え方とテスト
POINT 1
POINT 2
POINT 3

6. POINT 1 UIアニメーション

7. UI アニメーションを集めたサイトPOINT 1
UI アニメーション
Hover States / The best new & interesting interaction design Use Your Interface
http://hoverstat.es/ http://useyourinterface.com/

8. UI アニメーションの目的POINT 1
UI アニメーション
楽しさを伝える
変化を伝える
1
3
移動を伝える
焦点を絞る
2
4

9. 1 楽しさを伝える

10. 1
楽しさを伝える
Apple - iPhone 6
https://www.apple.com/jp/iphone-6/

11. 1
楽しさを伝える
VOTD.tv - Recognising a talented industry.
http://votd.tv/

12. 2 移動を伝える

13. 2
移動を伝える
Soleil Noir • Dream on
http://www.soleilnoir.net/dreamon/#/findlost

14. 2
移動を伝える
Medium
https://medium.com/

15. 3 変化を伝える

16. 3
変化を伝える
Kern Type, the kerning game
http://type.method.ac/

17. 3
変化を伝える
Huge. Digital agency.
http://www.hugeinc.com/

18. 4 焦点を絞る

19. 4
焦点を絞る
ANYI LU | Pre-Fall Available Now
http://anyilu.com/

20. 4
焦点を絞る
Plural App - News Reader, Social Browser & Media Center
http://pluralapp.com/#/home

21. 生き生きとした動きをつけるために
UI アニメーション
ハロルド・ウィテーカー, ジョン・ハラス
アニメーションのタイミング技法
1983/03
POINT 1

22. POINT 1 オーバーラップアクション
UI アニメーション
アニメーションのタイミング技法 P60 参照
犬の体が先に動き耳としっぽが後からついてくる

23. POINT 1 タイミングの階層構造
UI アニメーション

24. POINT 1
UI アニメーション
UI アニメーションまとめ
演出のストックを増やそう
自然界の動きを理解しよう

25. POINT 2 インタラクション

26. POINT 2 製品の最小単位のインタラクション
インタラクション
Dan Saffer
2014/03
マイクロインタラクション

27. POINT 2 マイクロインタラクションの構造
インタラクション
トリガー
ex. ボタンが押された時
ルール
フィードバック
ループとモード
ex. 入力内容が間違っていたので
ex. エラーメッセージを表示する
ex.３回エラーだったらログインできなくする
1
2
3
4
動きの演出

28. POINT 2 フィードバックの役割
インタラクション
フィードバックは…
ルールを理解してもらうため

29. POINT 2
インタラクション
Gumroad
https://gumroad.com/

30. POINT 2
インタラクション
Ecommerce Software, Online Store Builder, POS - Free 14-day Trial by Shopify
http://www.shopify.com/

31. POINT 2 インタラクション時のアニメーションの効果
インタラクション
利用者は作業をしているときは視界が狭くなる
動きをつけることによって注意を促すことができる
ただし… アニメーションが多すぎるとストレスを感じる

32. POINT 2 インタラクションまとめ
インタラクション
フィードバックはルールを理解
してもらうためのもの
動きをつけると注意を促せるが
使いすぎるとストレスに

33. POINT 3 伝え方とテスト

34. プロトタイピングの種類POINT 3
伝え方とテスト
手描きのスケッチ
Adobe After Effects を使う
Google Web Designer を使う
実際にコードを書く
1
2
3
4

35. 手描きのスケッチPOINT 3
伝え方とテスト
強み
スピーディー
弱み
動きが正確には伝わらない
クライアントに伝えにくい

36. Adobe After Effects POINT 3
伝え方とテスト
強み
イメージしている正確な動き
弱み
コードに置き換えづらい

37. Google Web Designer POINT 3
伝え方とテスト

39. Google Web Designer POINT 3
伝え方とテスト
強み
HTML、CSS、JS で作られてい
るためパラメーターなどをそのま
ま流用できる

40. 実際にコードを書くPOINT 3
伝え方とテスト
強み
コードをそのまま使える
弱み
時間がかかる

41. アニメーションのガイドラインPOINT 3
伝え方とテスト

42. プロセスPOINT 3
伝え方とテスト
新人デザイナーとベテランデザイナーの図
Julie Zhuo Junior / Designers vs. Senior Designers ̶ The Year of the Looking Glass ̶ Medium
https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e

43. デザイナーもバージョン管理を使おう伝え方とテスト
GitHub
Backlog
POINT 3

44. テスト、テスト、テストPOINT 3
伝え方とテスト
テストを繰り返して磨き上げる

45. 伝え方とテストまとめPOINT 3
伝え方とテスト
早めにアウトプットし、
短いスパンでテストを繰り返す
早くイメージを共有できるように、
ツールをうまく使う

46. 本日のまとめ
UI アニメーションの動きの研究をしよう
動きのあるインタクラクションの目的を考えよう
テストを繰り返して磨き上げよう
1
2
3

47. 参考にした資料POINT 3
伝え方とテスト
Design in Motion. The new frontier of Interaction Design // Speaker Deck
https://speakerdeck.com/myinteraction/design-in-motion-the-new-frontier-of-interaction-design
Web Design / Motion Design // Speaker Deck
https://speakerdeck.com/valhead/motion-design
インタフェースデザインの実践教室――優れたユーザビリティを実現するアイデアとテクニック
http://www.oreilly.co.jp/books/9784873116082/
Animations ̶ Web Fundamentals
https://developers.google.com/web/fundamentals/look-and-feel/animations/
iOS ヒューマンインターフェイスガイドライン: アニメーション
https://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobileh
ig/Animation/Animation.html#//apple_ref/doc/uid/TP40006556-CH57-SW1

48. Thanks