Webサービス ( システム ) におけるプロトタイピングをデザイナーの方々も是非やってみようというお話。

1. エンジニアからデザイナーに贈る
プロトタイピングのすすめ
山田 直樹 - @wakamsha
株式会社リクルートマーケティングパートナーズ
2015.05.30
春のフロントエンド祭り 2015

2. 1. 自己紹介
2. これまでの Web 制作現場あるある
3. Adobe MAX 2014
4. デザイナーのこれからあるべき姿とは
5. プロトタイピングの必要性
6. おわりに
Agenda

3. 自己紹介
俺の名前を言ってみろ

4. 自己紹介
山田直樹 (ヤマダナオキ) - @wakamsha
株式会社リクルートマーケティングパートナーズ
フロントエンドエンジニア
HTML, CSS, JavaScript, UI / UX, SCSS, TypeScript,
AngularJS, Ruby on Rails, etc…

5. https://ryorisapuri.jp

7. http://tech.recruit-mp.co.jp
NET BIZ DIV. TECH BLOG

9. これまでの
Web 制作現場あるある

10. デザインカンプ パーツ Webページ
よくあるであろう一般的な Web 系制作の流れ

12. コレジャナイ
(́・ω・`)

13. デザインカンプにある意図全てを他者が み取るのはとても困難
反対に全てのデザイン意図を
漏れ無く & わかりやすく盛り込むのも非現実的

14. いかに早い段階から実際に動くものをいかに作り、
そして課題を見つけて作りなおすというサイクルを沢山回せるかがキモ

15. 分業ではなく一人で複数のタスクをこなす
スピードを上げるには大人数よりも少人数

16. 設計まで含めて総合的にデザインできる人
Web 制作現場で求められているもの

17. (́・ω・｀) …
具体的にどうすりゃいいのさ？

18. Adobe MAX 2014 に
参加してきました
2014.10.6 - 2014.10.8
経費！経費！

19. What s Adobe MAX ?

20. What s Adobe MAX ?
アドビシステムズ社最大の技術カンファレンス
アドビ製品の最新情報を発表
各種 Tech Talk
現地ならびに世界中から集まるトップレベルの
技術者たちとの直接交流の場

21. What s Adobe MAX ?
クリエイティブ業界のリーダー、デザイナー、
Webディベロッパーなど
世界中から毎年5,000人以上が参加
デジタルコンテンツを作成する上で必須となる
最新のテクニックやテクノロジーを習得する
絶好の機会

24. 231
Sessions & Labs

25. 207
Speakers

28. デザイナーが Web 業界で
更にその価値を高めるにはどうするべきかを
製品と共に提案
Adobe MAX 2014

29. 色々と収穫の多いイベントでした
今年もまた行きたい

30. これからのデザイナーの
あるべき姿とは？

31. 『グラフィックについて勉強してきました』
『デッサン力に自信あります』
Designer

32. ……?
『グラフィックについて勉強してきました』
『デッサン力に自信あります』

33. Animation Layer Transition

34. Animation Layer Transition
これらすべてを
機能としてデザインすることが不可欠

35. 設計まで含めて総合的にデザインできる人
Web 制作現場で求められているもの

36. プロトタイピングの
必要性

37. プロトタイピングの必要性
デザイナーの存在意義は
UI を意識してプロトタイピングし続けること
職種問わずプロトタイピング出来る人は
希少価値

38. プロトタイピングが る
Adobe のツール

39. Edge Animate CC

40. Edge Animate CC
画像・テキスト・図形をコードを一切書かず
にアニメーションさせることが出来る
HTML5 アニメーション作成ツール

41. Edge Animate CC
最終的に HTML, CSS, JavaScript ファイル
として出力される
UI は Flash と殆ど同じで
タイムラインでアニメーションを制御

42. DEMO
Edge Animate CC

43. Adobe Muse CC

44. Adobe Muse CC
HTML
コードを一行も書くことなく
最新のWeb標準に準拠した Web サイトが作れる
グラフィックデザイナーのための
Web サイト作成ツール

45. Adobe Muse CC
HTML
最終的に HTML, CSS, JavaScript ファイル
として出力される
InDesign に似た UI だが、
フォトショ・イラレ感覚で操作可能

46. DEMO
Adobe Muse CC

47. おわりに
- プロダクトをリードする存在になろう -

49. HTML
Material Design は装飾的なデザインは殆ど無ければ
トーンマナーもまだまだ地味目な印象だが、
アニメーションが非常に繊細かつダイナミックなのが特徴
まさに動きそのものをデザインしていると言える

50. UI 設計
ビジュアルデザイン
インタラクションデザイン
プロトタイピング
Designer

51. プロトタイピングは設計
設計まで含めて総合的にデザイン
¦¦
プロダクトをリードする存在
Designer

52. Thank you.
ご清聴有難うございます