![Page 1: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/1.jpg)
エンジニアからデザイナーに贈る プロトタイピングのすすめ山田 直樹 - @wakamsha 株式会社リクルートマーケティングパートナーズ 2015.05.30
春のフロントエンド祭り 2015
![Page 2: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/2.jpg)
1. 自己紹介 2. これまでの Web 制作現場あるある 3. Adobe MAX 2014 4. デザイナーのこれからあるべき姿とは 5. プロトタイピングの必要性 6. おわりに
Agenda
![Page 3: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/3.jpg)
1.自己紹介
俺の名前を言ってみろ
![Page 4: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/4.jpg)
自己紹介
山田直樹 (ヤマダナオキ) - @wakamsha 株式会社リクルートマーケティングパートナーズ フロントエンドエンジニア
HTML, CSS, JavaScript, UI / UX, SCSS, TypeScript, AngularJS, Ruby on Rails, etc…
![Page 6: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/6.jpg)
![Page 8: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/8.jpg)
![Page 9: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/9.jpg)
2.これまでの
Web 制作現場あるある
![Page 10: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/10.jpg)
デザインカンプ パーツ Webページ
よくあるであろう一般的な Web 系制作の流れ
![Page 11: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/11.jpg)
≠
![Page 12: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/12.jpg)
≠コレジャナイ (́・ω・`)
![Page 13: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/13.jpg)
デザインカンプにある意図全てを他者が汲み取るのはとても困難
反対に全てのデザイン意図を 漏れ無く & わかりやすく盛り込むのも非現実的
![Page 14: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/14.jpg)
いかに早い段階から実際に動くものをいかに作り、 そして課題を見つけて作りなおすというサイクルを沢山回せるかがキモ
![Page 15: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/15.jpg)
分業ではなく一人で複数のタスクをこなす スピードを上げるには大人数よりも少人数
![Page 16: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/16.jpg)
設計まで含めて総合的にデザインできる人
Web 制作現場で求められているもの
![Page 17: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/17.jpg)
(́・ω・`) …
具体的にどうすりゃいいのさ?
![Page 18: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/18.jpg)
3.Adobe MAX 2014 に 参加してきました
2014.10.6 - 2014.10.8
経費!経費!
![Page 19: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/19.jpg)
What’s Adobe MAX ?
![Page 20: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/20.jpg)
What’s Adobe MAX ?
アドビシステムズ社最大の技術カンファレンス アドビ製品の最新情報を発表
各種 Tech Talk
現地ならびに世界中から集まるトップレベルの技術者たちとの直接交流の場
![Page 21: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/21.jpg)
What’s Adobe MAX ?
クリエイティブ業界のリーダー、デザイナー、Webディベロッパーなど
世界中から毎年5,000人以上が参加
デジタルコンテンツを作成する上で必須となる 最新のテクニックやテクノロジーを習得する
絶好の機会
![Page 22: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/22.jpg)
![Page 23: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/23.jpg)
![Page 24: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/24.jpg)
231Sessions & Labs
![Page 25: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/25.jpg)
207Speakers
![Page 26: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/26.jpg)
![Page 27: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/27.jpg)
![Page 28: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/28.jpg)
デザイナーが Web 業界で 更にその価値を高めるにはどうするべきかを
製品と共に提案
Adobe MAX 2014
![Page 29: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/29.jpg)
色々と収穫の多いイベントでした
今年もまた行きたい
![Page 30: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/30.jpg)
4.これからのデザイナーの
あるべき姿とは?
![Page 31: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/31.jpg)
『グラフィックについて勉強してきました』
『デッサン力に自信あります』
Designer
![Page 32: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/32.jpg)
……?
『グラフィックについて勉強してきました』
『デッサン力に自信あります』
![Page 33: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/33.jpg)
Animation Layer Transition
![Page 34: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/34.jpg)
Animation Layer Transition
これらすべてを 機能としてデザインすることが不可欠
![Page 35: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/35.jpg)
設計まで含めて総合的にデザインできる人
Web 制作現場で求められているもの
![Page 36: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/36.jpg)
プロトタイピングの 必要性
5.
![Page 37: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/37.jpg)
プロトタイピングの必要性
デザイナーの存在意義は UI を意識してプロトタイピングし続けること
職種問わずプロトタイピング出来る人は 希少価値
![Page 38: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/38.jpg)
プロトタイピングが捗る Adobe のツール
![Page 39: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/39.jpg)
Edge Animate CC
![Page 40: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/40.jpg)
Edge Animate CC
画像・テキスト・図形をコードを一切書かずにアニメーションさせることが出来る
HTML5 アニメーション作成ツール
![Page 41: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/41.jpg)
Edge Animate CC
最終的に HTML, CSS, JavaScript ファイルとして出力される
UI は Flash と殆ど同じで タイムラインでアニメーションを制御
![Page 42: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/42.jpg)
DEMO
Edge Animate CC
![Page 43: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/43.jpg)
Adobe Muse CC
![Page 44: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/44.jpg)
Adobe Muse CC
HTML
コードを一行も書くことなく 最新のWeb標準に準拠した Web サイトが作れる
グラフィックデザイナーのための Web サイト作成ツール
![Page 45: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/45.jpg)
Adobe Muse CC
HTML
最終的に HTML, CSS, JavaScript ファイルとして出力される
InDesign に似た UI だが、 フォトショ・イラレ感覚で操作可能
![Page 46: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/46.jpg)
DEMO
Adobe Muse CC
![Page 47: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/47.jpg)
6.おわりに
- プロダクトをリードする存在になろう -
![Page 48: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/48.jpg)
![Page 49: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/49.jpg)
HTMLMaterial Design は装飾的なデザインは殆ど無ければ
トーンマナーもまだまだ地味目な印象だが、 アニメーションが非常に繊細かつダイナミックなのが特徴
まさに動きそのものをデザインしていると言える
![Page 50: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/50.jpg)
UI 設計 ビジュアルデザイン
インタラクションデザイン プロトタイピング
Designer
![Page 51: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/51.jpg)
プロトタイピングは設計 設計まで含めて総合的にデザイン
|| プロダクトをリードする存在
Designer
![Page 52: エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015](https://reader030.vdocuments.net/reader030/viewer/2022020106/55c786a1bb61ebc0348b4835/html5/thumbnails/52.jpg)
Thank you.
ご清聴有難うございます