第一回html5minutesでお話しました。

1. プロトタイピングで
しあわせになろうよ
第１回 HTML5minutes!!
Goodpatch Inc. Yoshiki Kojima

2. 自己紹介
小島芳樹
@yoshikikoji
!
グッドパッチというUIデザイン制作会社でディ
レクター/フロントエンドエンジニアをやっ
ています。

4. 今日はJavaScriptじゃない話をします

5. プロトタイピングで
しあわせになろうよ
1. 複雑化するWebサイト・アプリケーション
2. 変化するWeb制作の現場
3. プロトタイピングとは？

6. プロトタイピングで
しあわせになろうよ
1. 複雑化するWebサイト・アプリケーション
2. 変化するWeb制作の現場
3.プロトタイピングとは？

7. WEB2.0以前
文書閲覧
広告媒体

8. 今
課題解決
自動化

9. 課題解決
自動化
文書閲覧
広告媒体
俺が支える！

10. WEBの担う役割
進化・変化・複雑化

11. プロトタイピングで
しあわせになろうよ
1. 複雑化するWebサイト・アプリケーション
2. 変化するWeb制作の現場
3.プロトタイピングとは？

12. グラフィックデザイナー
インタラクティブデザイナー
UIデザイナー
UXデザイナー
フロントエンドエンジニア
マークアップエンジニア
サーバサイドエンジニア
インフラエンジニア
インフォメーションアーキテクト
アートディレクター
クリエイティブディレクター
営業
プロデューサー
プランナー
マーケター
データアナリスト
コピーライター
フォトグラファー

13. 進化・変化・複雑化
分業化
!
職種の専門性が
高まる

14. 分かり合えない
人間たち

15. 仕様書で殴りあう
毎日

16. ばらばらになる
開発現場

17. プロジェクト
中 止

18. ウォーターフォール型
最後まで
成果物は見えない
思ってたのと
違うね…

19. プロトタイピングで
解決しましょう！

20. プロトタイピングで
しあわせになろうよ
1. 複雑化するWebサイト・アプリケーション
2. 変化するWeb制作の現場
3.プロトタイピングとは？

21. プロトタイプとは？
• 試作品
• ワイヤーと違うの？
→機能やUI設計をちゃんと考える！
→きちんと検証する！
• 実装前に問題点を洗い出せる（手戻り防止）
• 簡単だよ！だれでもできるよ！！
→ノートやメモ帳にさらっと書いたり…
→プロトタイピングツールの導入でより簡単に！

22. だれでも簡単に作れる・触れる
完成のイメージがつかみやすい

23. チームの距離が縮まる

24. クライアントが
技術に関する知識を持っていない場合でも

25. 触って納得！
これ、チョーやばくね？
チョーやばい♥

26. 画面遷移やアニメーションを再現
プロトタイピングツール
POP
InVision
Flinto

27. 日本発世界行き！プロトタイピングツール

28. 工程が増えるのはちょっと…
検証をフェーズに合わせてきちんと行うこと
で手戻りを防止
工数削減・品質向上

29. 開発プロセス、見直してみませんか？
よりよいプロジェクトを目指して
✕ プロトタイピング

30. UIデザイナー/フロントエンドエンジニア
iOS・Androidエンジニア/ディレクター
募集中
http://goodpatch.com/
Prott
オープンβ公開中
https://prottapp.com/