ウェブデザインにおける動きの演出について - wcan 2014 autumn
DESCRIPTION
WCAN 2014 Autumnで発表した「ウェブデザインにおける動きの演出について」のスライドTRANSCRIPT
![Page 1: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/1.jpg)
ウェブデザインにおける 動きの演出について
アップルップル 山田拓生
![Page 2: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/2.jpg)
山田拓生@yokozunat有限会社アップルップルデザイナーdotgraphy.com
![Page 3: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/3.jpg)
課題
CSS、JSで動きの実装が求められるチーム内でのイメージの共有
![Page 4: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/4.jpg)
ゴール
ユーザーが楽しく使い続けてくれる動きのあるサイトが作れるようになる
![Page 5: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/5.jpg)
3つのポイント
UIアニメーションインタラクション伝え方とテスト
1POINT
2POINT
3POINT
![Page 6: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/6.jpg)
UIアニメーション1POINT
![Page 7: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/7.jpg)
UIアニメーションを集めたサイト UIアニメーション1POINT
http://hoverstat.es/ http://useyourinterface.com/
Hover States / The best new & interesting interaction design Use Your Interface
![Page 8: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/8.jpg)
UIアニメーションの目的 UIアニメーション1POINT
楽しさを伝える変化を伝える
1
3
移動を伝える焦点を絞る
2
4
![Page 9: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/9.jpg)
楽しさを伝える1
![Page 10: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/10.jpg)
楽しさを伝える1
https://www.apple.com/jp/iphone-6/Apple - iPhone 6
![Page 11: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/11.jpg)
楽しさを伝える1
http://votd.tv/
VOTD.tv - Recognising a talented industry.
![Page 12: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/12.jpg)
移動を伝える2
![Page 13: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/13.jpg)
移動を伝える2
http://www.soleilnoir.net/dreamon/#/findlostSoleil Noir • Dream on
![Page 14: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/14.jpg)
移動を伝える2
https://medium.com/Medium
![Page 15: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/15.jpg)
変化を伝える3
![Page 16: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/16.jpg)
変化を伝える3
http://type.method.ac/Kern Type, the kerning game
![Page 17: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/17.jpg)
変化を伝える3
http://www.hugeinc.com/
Huge. Digital agency.
![Page 18: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/18.jpg)
焦点を絞る4
![Page 19: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/19.jpg)
焦点を絞る4
http://anyilu.com/ANYI LU | Pre-Fall Available Now
![Page 20: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/20.jpg)
焦点を絞る4
http://pluralapp.com/#/homePlural App - News Reader, Social Browser & Media Center
![Page 21: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/21.jpg)
生き生きとした動きをつけるために
アニメーションのタイミング技法1983/03
ハロルド・ウィテーカー, ジョン・ハラス
UIアニメーション1POINT
![Page 22: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/22.jpg)
UIアニメーション1POINTオーバーラップアクション
犬の体が先に動き耳としっぽが後からついてくるアニメーションのタイミング技法 P60 参照
![Page 23: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/23.jpg)
UIアニメーション1POINTタイミングの階層構造
![Page 24: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/24.jpg)
UIアニメーション1POINT
演出のストックを増やそう自然界の動きを理解しよう
UIアニメーションまとめ
![Page 25: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/25.jpg)
インタラクション2POINT
![Page 26: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/26.jpg)
インタラクション2POINT製品の最小単位のインタラクション
マイクロインタラクションDan Saffer
2014/03
![Page 27: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/27.jpg)
インタラクション2POINTマイクロインタラクションの構造
トリガールールフィードバックループとモード
ex.ボタンが押された時
ex. 入力内容が間違っていたので
ex. エラーメッセージを表示する
ex.3回エラーだったらログインできなくする
1
2
3
4
動きの演出
![Page 28: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/28.jpg)
インタラクション2POINTフィードバックの役割
ルールを理解してもらうためフィードバックは…
![Page 29: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/29.jpg)
インタラクション2POINT
https://gumroad.com/Gumroad
![Page 30: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/30.jpg)
インタラクション2POINT
http://www.shopify.com/
Ecommerce Software, Online Store Builder, POS - Free 14-day Trial by Shopify
![Page 31: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/31.jpg)
インタラクション2POINTインタラクション時のアニメーションの効果
動きをつけることによって注意を促すことができるアニメーションが多すぎるとストレスを感じるただし…
利用者は作業をしているときは視界が狭くなる
![Page 32: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/32.jpg)
インタラクション2POINTインタラクションまとめ
動きをつけると注意を促せるが使いすぎるとストレスに
フィードバックはルールを理解してもらうためのもの
![Page 33: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/33.jpg)
伝え方とテスト3POINT
![Page 34: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/34.jpg)
プロトタイピングの種類 伝え方とテスト3POINT
手描きのスケッチ
Adobe After Effects を使う
Google Web Designerを使う
実際にコードを書く
1
2
3
4
![Page 35: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/35.jpg)
手描きのスケッチ 伝え方とテスト3POINT
動きが正確には伝わらないクライアントに伝えにくい
スピーディー弱み
強み
![Page 36: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/36.jpg)
Adobe After Effects 伝え方とテスト3POINT
コードに置き換えづらい
イメージしている正確な動き弱み
強み
![Page 37: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/37.jpg)
Google Web Designer 伝え方とテスト3POINT
![Page 38: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/38.jpg)
![Page 39: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/39.jpg)
Google Web Designer 伝え方とテスト3POINT
HTML、CSS、JSで作られているためパラメーターなどをそのまま流用できる
強み
![Page 40: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/40.jpg)
実際にコードを書く 伝え方とテスト3POINT
時間がかかる
コードをそのまま使える弱み
強み
![Page 41: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/41.jpg)
アニメーションのガイドライン 伝え方とテスト3POINT
![Page 42: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/42.jpg)
プロセス 伝え方とテスト3POINT
Julie Zhuo Junior / Designers vs. Senior Designers ̶ The Year of the Looking Glass ̶ Mediumhttps://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e
新人デザイナーとベテランデザイナーの図
![Page 43: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/43.jpg)
GitHubBacklog
デザイナーもバージョン管理を使おう 伝え方とテスト3POINT
![Page 44: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/44.jpg)
テスト、テスト、テスト 伝え方とテスト3POINT
テストを繰り返して磨き上げる
![Page 45: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/45.jpg)
伝え方とテストまとめ 伝え方とテスト3POINT
早くイメージを共有できるように、ツールをうまく使う
早めにアウトプットし、短いスパンでテストを繰り返す
![Page 46: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/46.jpg)
本日のまとめ
UIアニメーションの動きの研究をしよう
動きのあるインタクラクションの目的を考えよう
テストを繰り返して磨き上げよう
1
2
3
![Page 47: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/47.jpg)
参考にした資料 伝え方とテスト3POINT
Design in Motion. The new frontier of Interaction Design // Speaker Deckhttps://speakerdeck.com/myinteraction/design-in-motion-the-new-frontier-of-interaction-design
Web Design / Motion Design // Speaker Deckhttps://speakerdeck.com/valhead/motion-design
インタフェースデザインの実践教室――優れたユーザビリティを実現するアイデアとテクニックhttp://www.oreilly.co.jp/books/9784873116082/
Animations ̶ Web Fundamentalshttps://developers.google.com/web/fundamentals/look-and-feel/animations/
iOSヒューマンインターフェイスガイドライン : アニメーションhttps://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobilehig/Animation/Animation.html#//apple_ref/doc/uid/TP40006556-CH57-SW1
![Page 48: ウェブデザインにおける動きの演出について - WCAN 2014 Autumn](https://reader034.vdocuments.site/reader034/viewer/2022042518/54c3d8514a7959dc058b457d/html5/thumbnails/48.jpg)
Thanks