http://www.kansai-u.ac.jp/umeda/event-seminar/startup/post-90.html

1. 株式会社Dive into Code
代表取締役 創始者 CEO 野呂浩良
Tel 03-5459-1808
info@diveintocode.jp
https://diveintocode.jp/
アイデアを形にする
- ①プロダクト設計のイロハを学ぶ -
スタートアップスキルカレッジ第３弾

2. 2Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
この講座を受けると出来ること
アイデアを形にするためのプロダクトの設計の概要ができ、開発
相談や自力開発に踏み出せるようになる。

3. 3Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
構成
● 自己紹介
● 全体概要
● プロダクトのフォーマット
● 仕様の決め方
● ワイアフレームの描き方
● ワークセッション
○ 初めてのワイアフレームをつくろう
○ チーム発表・講評
● まとめ
● 質疑応答
● Appendix

4. 4Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
自己紹介
野呂 浩良（のろ ひろよし） MBAエンジニア講師。元 非エンジニ
ア。29歳ではじめてプログラミングを経験。
1980年 誕生
2003年 東京農業大学 農学部農学科（学士）卒業
「昆虫生態学研究室」
2003年 株式会社すみや 「接客販売」
2006年 株式会社リクルート 「法人営業」
2009年 株式会社ワークスアプリケーションズ 「コンサル」
2013年 株式会社プロスタンダード 「研修講師」
2014年 グロービス経営大学院大学 経営管理科（修士）卒業
2015年 株式会社Dive into Code 創業
キャリアの軸は、未経験分野への挑戦

5. 5Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
自己紹介
就職に強いプログラミングスクール DIVE INTO CODE。 ビジョン
「テクノロジー教育のエコシステムを構築する」
フルタイム就業
正社員 / フリーランス
実課題を元にした研究
リモートワークで
アルバイト / 副業
政府と組み
地方＆海外IT人材育成
卒業後も学び続ける
永続 勉強会
スクールで本気で学習
プログラミング初体験

6. 6Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
日本全国 3,000人 + 海外（ベトナム、ルワンダ）でセミナー開催。
RubyWorld Conference 2016 登壇。
自己紹介
Ruby経験ゼロから 3年で 3,000人 に直接講義

7. 7Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
自己紹介
エンジニア育成事業だけでなく、起業家や新規事業担当者がテク
ノロジーを駆使出来るようになるための支援も行う。
https://hodai.globis.co.jp/courses/57a7e865

8. 8Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
お一人 3分ほどでご紹介ください
1. お名前
2. お仕事内容
3. この講座に参加した目的
4. 形にしたいビジネスアイデア
自己紹介
同じテーマに興味をもつ人たちとの出会いはその後もご縁が続く
ことが多い。お互いに自己紹介をしませんか？

9. 9Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
プロダクトと言っても様々な形がある。ソフトウェアであれば Webア
プリケーション、スマホアプリ、VR など。
プロダクトのフォーマット
Webアプリケーション スマホアプリ VR
Webページ アプリ
サーバと
通信
サーバと
通信
サーバと
通信

10. 10Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
プロダクトのフォーマット
事例：世界的に有名なスタートアップのサービス
Webアプリケーション スマホアプリ VR
AirBnB パズドラ
https://play.google.com/store/apps/det
ails?id=jp.gungho.pad&hl=ja
https://www.airbnb.jp/
Smash Hit
https://play.google.com/store/apps/det
ails?id=com.mediocre.smashhit&hl=ja

11. 11Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
事例：プロダクトは最初から完璧である必要はない、理想を追い求
める前に体力、気力が尽きてしまう。
プロダクトのフォーマット
第一段階
Googleドキュメント
+ facebookグルー
プ
第二段階 第三段階
DIVER（Web化）
+ Slack
DIVER 高機能化
チャット、通知、自動翻訳 等

12. 12Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Why? How? What? の順番で考える。根底にある想いや目的を達
成できれば、手段は何でも良い。手段に囚われないこと。
仕様の決め方
Why How What
なぜ？
（誰の？どんな課題を？）
どう解決するのか？ 何をつくるのか？
心がついてくる 顔が見える 何をつくるかわかる
原体験 / 志 が
重要
アイデア企画で
解決可能
アイデア企画で
解決可能

13. 13Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Why？「誰の？何の課題を？」、How ?「どう解決するのか？」を書
き出そう。 （3分/人：12分）
ワークセッション

14. 14Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Why? How? をグループにシェアしよう。（3分/人：12分）
ワークセッション

15. 15Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
シェアされた内容を一人ひとりにフィードバックしよう。（5分/人：20
分）
ワークセッション

16. 16Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
仕様の決め方
仕様は、デザインと機能要件に大別される。
デザイン＝画面設計
機能要件＝機能の羅列

17. 17Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
仕様の決め方
認識は、必ずズレる。自分自身の頭の中でさえ、ズレる。アウト
プットして明記しておくことが重要。
・デザイン
・機能要件

18. 18Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
仕様の決め方
ビジネスアイデアを選び、デザインと機能要件を書き出してみよ
う。
アイデアを選ぶ デザイン 機能要件
・・・
・・・
選ぶ観点
- Webアプリケー
ションで実現でき
そう
- 面白そう
- 社会的インパクト
が強い 最初は手書きでOK 最初は手書きでOK

19. 19Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
仕様の決め方
Who? 誰のためにどう役に立つのか？がまだ曖昧な場合は、カス
タマージャーニーマップを描くことを推奨。

20. 20Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
仕様の決め方
デザインの完成イメージ

21. 21Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
仕様の決め方
機能要件の完成イメージ

22. 22Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
What? 「何をつくるのか？」を書き出そう。（20分）
ワークセッション
デザイン 機能要件
最初は手書きでOK 最初は手書きでOK

23. 23Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
デザインと機能要件をグループにシェアしよう。（3分/人：12分）
ワークセッション

24. 24Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
シェアされた内容を一人ひとりにフィードバックしよう。（5分/人：20
分）
ワークセッション

25. 25Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
ワイアフレームの描き方
画面ごとに、何をどこにどのように配置するのかを決める。決めて
書き出したもののことをワイアフレームという。
ヘッダー
フッター
サイド
バー
ページごとの内容
メインビジュアル
※行＝ロー
※列＝カラム

26. 26Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
ワイアフレームの描き方
作成が簡単にできるツールのご紹介
汎用ツール
Googleスライド
https://docs.google.com/pres
entation/u/0/
Microfoft PowerPoint
https://products.office.com/ja
-jp/powerpoint
専用ツール
Cacco
https://cacoo.com/ja/
Moqups
https://moqups.com/
等、自分にあうツールを見つけ
てみてください。

27. 27Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
ワークセッション
初めてのワイアフレーム。チームに分かれてワイアフレームを作
成しよう。
ヘッダー
フッター
サイド
バー
ページごとの内容
メインビジュアル
デザイン
最初は手書きでOK
ワイアフレーム

28. 28Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
ワークセッション
チーム発表・講評
作成したプロセス → よかったこと ・ わるかったこと

29. 29Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
まとめ
・Why? How? What? の順番で考える。根底にある想いや目的を達成できれば、
手段は何でも良い。手段に囚われないこと。
・認識は、必ずズレる。自分自身の頭の中でさえ、ズレる。アウトプットして明記
しておくことが重要。
・Who? 誰のためにどう役に立つのか？がまだ曖昧な場合は、カスタマージャー
ニーマップを描くことを推奨。
・画面ごとに、何をどこにどのように配置するのかを決める。決めて書き出した
もののことをワイアフレームという。
プロダクトは最初から完璧である必要はない、理想を追い求める
前に体力、気力が尽きてしまう。

30. 30Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
質疑応答
なんでもご質問ください。 ^ ^

31. 31Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Appendix
「ゼロから稼げるエンジニアになる3つのステップ」
RubyWorld Conference 2016 講演資料と動画を公開中！
https://youtu.be/bZ4Y1lNbI1o
http://2016.rubyworld-conf.org/files/program/B-3.pdf資料
動画

32. 32Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Appendix
サイモン シネック: 優れたリーダーはどうやって行動を促すか。
Golden Circle「Why? How? What? 」
https://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action?language=ja