ウェブデザインにおける 動きの演出について

アップルップル　山田拓生

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

課題

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

ゴール

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

3つのポイント

UIアニメーションインタラクション伝え方とテスト

1POINT

2POINT

3POINT

UIアニメーション1POINT

UIアニメーションを集めたサイト UIアニメーション1POINT

http://hoverstat.es/ http://useyourinterface.com/

Hover States / The best new & interesting interaction design Use Your Interface

UIアニメーションの目的 UIアニメーション1POINT

楽しさを伝える変化を伝える

1

3

移動を伝える焦点を絞る

2

4

楽しさを伝える1

楽しさを伝える1

https://www.apple.com/jp/iphone-6/Apple - iPhone 6

楽しさを伝える1

http://votd.tv/

VOTD.tv - Recognising a talented industry.

移動を伝える2

移動を伝える2

http://www.soleilnoir.net/dreamon/#/findlostSoleil Noir • Dream on

移動を伝える2

https://medium.com/Medium

変化を伝える3

変化を伝える3

http://type.method.ac/Kern Type, the kerning game

変化を伝える3

http://www.hugeinc.com/

Huge. Digital agency.

焦点を絞る4

焦点を絞る4

http://anyilu.com/ANYI LU | Pre-Fall Available Now

焦点を絞る4

http://pluralapp.com/#/homePlural App - News Reader, Social Browser & Media Center

生き生きとした動きをつけるために

アニメーションのタイミング技法1983/03

ハロルド・ウィテーカー, ジョン・ハラス

UIアニメーション1POINT

UIアニメーション1POINTオーバーラップアクション

犬の体が先に動き耳としっぽが後からついてくるアニメーションのタイミング技法　P60 参照

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

UIアニメーション1POINT

演出のストックを増やそう自然界の動きを理解しよう

UIアニメーションまとめ

インタラクション2POINT

インタラクション2POINT製品の最小単位のインタラクション

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

2014/03

インタラクション2POINTマイクロインタラクションの構造

トリガールールフィードバックループとモード

ex.ボタンが押された時

ex. 入力内容が間違っていたので

ex. エラーメッセージを表示する

ex.３回エラーだったらログインできなくする

1

2

3

4

動きの演出

インタラクション2POINTフィードバックの役割

ルールを理解してもらうためフィードバックは…

インタラクション2POINT

https://gumroad.com/Gumroad

インタラクション2POINT

http://www.shopify.com/

Ecommerce Software, Online Store Builder, POS - Free 14-day Trial by Shopify

インタラクション2POINTインタラクション時のアニメーションの効果

動きをつけることによって注意を促すことができるアニメーションが多すぎるとストレスを感じるただし…

利用者は作業をしているときは視界が狭くなる

インタラクション2POINTインタラクションまとめ

動きをつけると注意を促せるが使いすぎるとストレスに

フィードバックはルールを理解してもらうためのもの

伝え方とテスト3POINT

プロトタイピングの種類 伝え方とテスト3POINT

手描きのスケッチ

Adobe After Effects を使う

Google Web Designerを使う

実際にコードを書く

1

2

3

4

手描きのスケッチ 伝え方とテスト3POINT

動きが正確には伝わらないクライアントに伝えにくい

スピーディー弱み

強み

Adobe After Effects 伝え方とテスト3POINT

コードに置き換えづらい

イメージしている正確な動き弱み

強み

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

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

HTML、CSS、JSで作られているためパラメーターなどをそのまま流用できる

強み

実際にコードを書く 伝え方とテスト3POINT

時間がかかる

コードをそのまま使える弱み

強み

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

プロセス 伝え方とテスト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

新人デザイナーとベテランデザイナーの図

GitHubBacklog

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

テスト、テスト、テスト 伝え方とテスト3POINT

テストを繰り返して磨き上げる

伝え方とテストまとめ 伝え方とテスト3POINT

早くイメージを共有できるように、ツールをうまく使う

早めにアウトプットし、短いスパンでテストを繰り返す

本日のまとめ

UIアニメーションの動きの研究をしよう

動きのあるインタクラクションの目的を考えよう

テストを繰り返して磨き上げよう

1

2

3

参考にした資料 伝え方とテスト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

Thanks