Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,626 views

Published on

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

Published in: Design
  • Be the first to comment

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

  1. 1. ウェブデザインにおける動きの演出について アップルップル 山田拓生
  2. 2. 山田拓生@yokozunat 有限会社アップルップル デザイナー dotgraphy.com
  3. 3. 課題 CSS、JS で動きの実装が求められる チーム内でのイメージの共有
  4. 4. ゴール ユーザーが楽しく使い続けてくれる 動きのあるサイトが作れるようになる
  5. 5. 3 つのポイント UI アニメーション インタラクション 伝え方とテスト POINT 1 POINT 2 POINT 3
  6. 6. POINT 1 UIアニメーション
  7. 7. UI アニメーションを集めたサイトPOINT 1 UI アニメーション Hover States / The best new & interesting interaction design Use Your Interface http://hoverstat.es/ http://useyourinterface.com/
  8. 8. UI アニメーションの目的POINT 1 UI アニメーション 楽しさを伝える 変化を伝える 1 3 移動を伝える 焦点を絞る 2 4
  9. 9. 1 楽しさを伝える
  10. 10. 1 楽しさを伝える Apple - iPhone 6 https://www.apple.com/jp/iphone-6/
  11. 11. 1 楽しさを伝える VOTD.tv - Recognising a talented industry. http://votd.tv/
  12. 12. 2 移動を伝える
  13. 13. 2 移動を伝える Soleil Noir • Dream on http://www.soleilnoir.net/dreamon/#/findlost
  14. 14. 2 移動を伝える Medium https://medium.com/
  15. 15. 3 変化を伝える
  16. 16. 3 変化を伝える Kern Type, the kerning game http://type.method.ac/
  17. 17. 3 変化を伝える Huge. Digital agency. http://www.hugeinc.com/
  18. 18. 4 焦点を絞る
  19. 19. 4 焦点を絞る ANYI LU | Pre-Fall Available Now http://anyilu.com/
  20. 20. 4 焦点を絞る Plural App - News Reader, Social Browser & Media Center http://pluralapp.com/#/home
  21. 21. 生き生きとした動きをつけるために UI アニメーション ハロルド・ウィテーカー, ジョン・ハラス アニメーションのタイミング技法 1983/03 POINT 1
  22. 22. POINT 1 オーバーラップアクション UI アニメーション アニメーションのタイミング技法 P60 参照 犬の体が先に動き耳としっぽが後からついてくる
  23. 23. POINT 1 タイミングの階層構造 UI アニメーション
  24. 24. POINT 1 UI アニメーション UI アニメーションまとめ 演出のストックを増やそう 自然界の動きを理解しよう
  25. 25. POINT 2 インタラクション
  26. 26. POINT 2 製品の最小単位のインタラクション インタラクション Dan Saffer 2014/03 マイクロインタラクション
  27. 27. POINT 2 マイクロインタラクションの構造 インタラクション トリガー ex. ボタンが押された時 ルール フィードバック ループとモード ex. 入力内容が間違っていたので ex. エラーメッセージを表示する ex.3回エラーだったらログインできなくする 1 2 3 4 動きの演出
  28. 28. POINT 2 フィードバックの役割 インタラクション フィードバックは… ルールを理解してもらうため
  29. 29. POINT 2 インタラクション Gumroad https://gumroad.com/
  30. 30. POINT 2 インタラクション Ecommerce Software, Online Store Builder, POS - Free 14-day Trial by Shopify http://www.shopify.com/
  31. 31. POINT 2 インタラクション時のアニメーションの効果 インタラクション 利用者は作業をしているときは視界が狭くなる 動きをつけることによって注意を促すことができる ただし… アニメーションが多すぎるとストレスを感じる
  32. 32. POINT 2 インタラクションまとめ インタラクション フィードバックはルールを理解 してもらうためのもの 動きをつけると注意を促せるが 使いすぎるとストレスに
  33. 33. POINT 3 伝え方とテスト
  34. 34. プロトタイピングの種類POINT 3 伝え方とテスト 手描きのスケッチ Adobe After Effects を使う Google Web Designer を使う 実際にコードを書く 1 2 3 4
  35. 35. 手描きのスケッチPOINT 3 伝え方とテスト 強み スピーディー 弱み 動きが正確には伝わらない クライアントに伝えにくい
  36. 36. Adobe After Effects POINT 3 伝え方とテスト 強み イメージしている正確な動き 弱み コードに置き換えづらい
  37. 37. Google Web Designer POINT 3 伝え方とテスト
  38. 38. Google Web Designer POINT 3 伝え方とテスト 強み HTML、CSS、JS で作られてい るためパラメーターなどをそのま ま流用できる
  39. 39. 実際にコードを書くPOINT 3 伝え方とテスト 強み コードをそのまま使える 弱み 時間がかかる
  40. 40. アニメーションのガイドラインPOINT 3 伝え方とテスト
  41. 41. プロセス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
  42. 42. デザイナーもバージョン管理を使おう伝え方とテスト GitHub Backlog POINT 3
  43. 43. テスト、テスト、テストPOINT 3 伝え方とテスト テストを繰り返して磨き上げる
  44. 44. 伝え方とテストまとめPOINT 3 伝え方とテスト 早めにアウトプットし、 短いスパンでテストを繰り返す 早くイメージを共有できるように、 ツールをうまく使う
  45. 45. 本日のまとめ UI アニメーションの動きの研究をしよう 動きのあるインタクラクションの目的を考えよう テストを繰り返して磨き上げよう 1 2 3
  46. 46. 参考にした資料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
  47. 47. Thanks

×