世の中をより良くする アイデアを形に出来るようになる会議 β版
いいアイデアを思いついた!でも、作れないし 作ってくれる人が見つからない!というあなたに。
目次 1. こんにちは 2. アイデアを実現することの難しさ 3. MVPとは ~ minimum viable product ~ 4. ムダのない課題解決方法、リーン 5. リーンキャンバスを描いてみよう 6. UIを描いてみよう 7. [10分間 : 休憩] 8. ユーザビリティテストの重要性、見せてみよう 8. アジャイルソフトウェア開発とは 9. ユーザストーリーを書こう 10. 今日作ったものの改善方法 11. 自分で開発 or 人に依頼 12. リリース後はどうするか? 13. まとめ 14. Spath Schoolの宣伝
© 2013 Actcat, Inc. All Rights Reserved 2
予めご了承ください • 今回は、あくまで、「アイデアを形にできるようになる」ように、その流れと知識を得てもらう、体験してもらうためのワークショップです
• 途中、皆さんに手を動かして作ってもらったものに満足行かず、修正したい!ってなるかもしれませんが、あまり凝らずに、楽しんで体験してもらえると幸いです。※まき(急ぎめ)で進めるので。
• アイデアはちょくちょく、グループ内で共有するので、「絶対に人に見せたくないアイデア」は今回のワークショップ内では使わないようにしてください。
© 2013 Actcat, Inc. All Rights Reserved 3
こんにちは
© 2013 Actcat, Inc. All Rights Reserved 4
こんにちは • 今日のワークショップは、
結構グループでやります。
• ですので、予め、会話が問題なく行えるよう
• 各班ごと、1人1分を目安に、自己紹介お願いします
© 2013 Actcat, Inc. All Rights Reserved 5
こんにちは : まとめ • 今日のワークショップは、
このグループで進めていきますので、宜しくお願い致します!
• 何かあれば講師、サポーターにご遠慮なくお声がけ頂いても大丈夫です。
© 2013 Actcat, Inc. All Rights Reserved 7
アイデアを実現することの難しさ
(アンケート)
© 2013 Actcat, Inc. All Rights Reserved 8
アンケート 1/2 1. アイデアを考えたことがありますか?
2. 考えたアイデアを発注しようとしたことがありますか?
3. 見積り依頼・発注方法が分からず断念したことがありますか?
© 2013 Actcat, Inc. All Rights Reserved 9
アンケート 2/2 1. 見積もりが高すぎて、諦めたことがありますか?
2. 自分で作ろうと思い、プログラミングに 興味をもったことがありますか?
3. プログラミングの勉強をしたことがありますか?
4. プログラミングは今行えるスキルを持ち合わせていますか?
© 2013 Actcat, Inc. All Rights Reserved 10
MVPとは ~ minimum viable product ~
© 2013 Actcat, Inc. All Rights Reserved 11
アイデアの肥大化 • 何かアイデアを思いついたことがある人は、 そのアイデアが、ドンドン膨らんでいった経験はありませんか?
• アイデアを実現することの難しさの大きな要因の1つにアイデアの肥大化です
• アイデアのコアとなる部分のみ、検証、その後、拡大を図ったほうがムダがありません
© 2013 Actcat, Inc. All Rights Reserved 12
MVPとは ~ minimum viable product ~ • その名の通り、 「最低限有効な機能を備えたプロダクト」アイデア(課題解決)の実現のコア機能のみ、 実装したようなプロダクトのことです。
• アイデアの検証のために、 そのアイデアがイケてるかどうか試す為に、 全部の機能を作る必要は一切ありません
• MVPでもイケてる!流行る! の確認ぐらいはできちゃいます
© 2013 Actcat, Inc. All Rights Reserved 13
MVP例: パズドラはパズルから
© 2013 Actcat, Inc. All Rights Reserved 14
[引用元] 【徹底インタビュー】「パズル&ドラゴンズ」はこうして作られた。http://www.appbank.net/2012/04/11/iphone-news/395927.php
• パズドラの場合は、MVPを検証への利用にのみ留め、Productとして有効であるにもかかわらず、リリースはせずに、最初に狙った目標を狙いに行くパターン だと思います
• ゲーム等はすぐ他社に真似されたりするので、それも致し方がないです
• 大きく産んで引き離す、パターンかなと
© 2013 Actcat, Inc. All Rights Reserved 15
ムダのない課題解決方法、リーン
© 2013 Actcat, Inc. All Rights Reserved 16
“リーン” • 「贅肉のとれた」の意である 英単語のlean(リーン)
• コストをあまりかけずに最低限の製品やサービス、試作品を作って顧客の反応を見て、改善を施す
• このサイクルを繰り返すことで、起業や新規事業の成功率が飛躍的に高まるという
© 2013 Actcat, Inc. All Rights Reserved 17
リーンキャンバスを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 18
リーンキャンバスとは?
リーンキャンバスを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 19
リーンキャンバスとは?
© 2013 Actcat, Inc. All Rights Reserved 20
こういうものです。
リーンキャンバスのメリット • リーン(ムダが生まれないよう)努めながらアイデアをより深く考えていく方法を、 フレームワーク化(仕組み・ルール化)したものです
• ルールに従って書くと、 アイデアが洗練されます、あら不思議。
© 2013 Actcat, Inc. All Rights Reserved 21
リーンキャンバスの描き方
リーンキャンバスを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 22
リーンキャンバスの描き方
© 2013 Actcat, Inc. All Rights Reserved 23
1 2
3
4
5
6 7
8
9
リーンキャンバスを描いてみよう
リーンキャンバスを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 24
リーンキャンバスをグループ内で見せ合おう
リーンキャンバスを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 26
リーンキャンバスをグループ内で見せ合おう • アイデアは思いついたときは、テンション上がっちゃって、翌日よく考えると、微妙だなってこと、ありませんか?
• 見せ合う(誰か第三者に見せる)事で、 キャンバスへの客観的な意見が貰えます
• もしかしたら、アイデア(課題と解決方法)の検証にもなるかもしれません。
© 2013 Actcat, Inc. All Rights Reserved 27
見せ合う時のルール • すいません、ペアを組んでください • どちらが先にキャンバスを説明するか、決めて、キャンバスの説明を始めてください
• キャンバスの説明は、キャンバスに付いている番号順(記載順)にしていって下さい。 (3分目安)
• 説明が終わったら、聞いていた方は、 思ったことを伝えてみて下さい(3分目安)
• 次に、聞いていた人が、 自分のキャンバスを説明してください
© 2013 Actcat, Inc. All Rights Reserved 28
1人目の方の説明
© 2013 Actcat, Inc. All Rights Reserved 29
1人目の方へのフィードバック
© 2013 Actcat, Inc. All Rights Reserved 31
2人目の方の説明
© 2013 Actcat, Inc. All Rights Reserved 33
2人目の方へのフィードバック
© 2013 Actcat, Inc. All Rights Reserved 35
まとめ
リーンキャンバスを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 37
まとめ • アイデアは顧客、顧客の抱える課題ありきで
あるべきである
• それを発想しやすくするツールの1つがリーンキャンバスである
• 本来はこのキャンバスを検証しないといけないので、あとで「実践リーン・スタートアップ」読んでみてね
© 2013 Actcat, Inc. All Rights Reserved 38
リーン・スタートアップ系おすすめ書籍
© 2013 Actcat, Inc. All Rights Reserved 39
リーンキャンバスおすすめサイト http://leancanvas.com/
© 2013 Actcat, Inc. All Rights Reserved 40
UIを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 41
1. UIとは?なぜUIから?
UIを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 42
• アイデア=>開発、みたいなイメージを持たれている方も多いかと思います。いかがでしょうか?
• しかし、使い方が分からない機能は、価値がありません。
© 2013 Actcat, Inc. All Rights Reserved 43
• ユーザファースト、デザインファースト。ユーザの体験をベースに考えるべきです。
• 体験とユーザが触れる場、それが、UserInterfaceです。
• ですから、先ほど描いたキャンバスを、実際にユーザに届ける物であるUIに落とし込みましょう。
© 2013 Actcat, Inc. All Rights Reserved 44
2. UIの一例(スマホ or PCファースト)
UIを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 45
UIの一例(Facebook)
© 2013 Actcat, Inc. All Rights Reserved 46
Mobile, PC コンテンツはほぼ同様。 PC側はコアコンテンツ以外に、ナビゲーション、お知らせなどを常時表示可
UIの一例(Twitter)
© 2013 Actcat, Inc. All Rights Reserved 47
Mobile, PC コンテンツ・各ボタン配置共にほぼ同様。 優先度が低い扱いの情報もPC版では表示している程度
スマホファーストを提案 • 最もユーザが長時間触れる端末はPCからスマホに移行が進む…と想定
• スマホ対応が必須に
• スマホを主軸にUI作成後、PCはスマホ版をより便利にする程度が、主流になってくるのでは。コスパは高い。
© 2013 Actcat, Inc. All Rights Reserved 48
3. Viewという概念
UIを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 49
View Partsの組み合わせでUIは作られている
© 2013 Actcat, Inc. All Rights Reserved 50
4. 代表格のインターフェイスパターン => Viewの組み合わせのパターン
UIを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 51
ナビゲーションパターン
© 2013 Actcat, Inc. All Rights Reserved 52
タブバーパターン
© 2013 Actcat, Inc. All Rights Reserved 53
ユーティリティ / 没入
© 2013 Actcat, Inc. All Rights Reserved 54
5. 細部のインターフェイスパターン
UIを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 55
パターンだけで本が出来ちゃう • オススメ☆
© 2013 Actcat, Inc. All Rights Reserved 56
パターン多すぎ • 細かなUIの作りこみはMVPには一旦不要
• ユーザビリティテストなどを通じて、 デザイナと共に構築していこう
• まずはシンプルな、MVPのための、 UIを描こう
© 2013 Actcat, Inc. All Rights Reserved 57
6. 実際に描く流れ
UIを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 58
UIを描く準備 1. コアとなるViewを描く
=> ユーザにとって最も価値あるページ 1. 外枠の線をとりあえず引く 2. とりあえずナビゲーションバー(ヘッダー)をつけても良し
3. この後は、パーツなどを参考に試行錯誤する。。。 例: Facebookのタイムライン、Cookpadのレシピページ
© 2013 Actcat, Inc. All Rights Reserved 59
パーツ例
© 2013 Actcat, Inc. All Rights Reserved 60
私はいつも『Balsamiq Mockups』を使っています
実際に描く流れ(A4用紙に描こう!) 1. コアとなるViewを描く(続き)
1. パーツなどを参考に試行錯誤する。。。 2. UIは「他の人に見せる」ことを前提に描いてください。 (この後実際にグループ内の人に見せます)
2. コアとなるViewへの動線となる、 各Viewを描く
1. タブ、ナビ、ユーティリティから選択 2. 登録画面、一覧画面、なども
3. 自分で使うイメージを思い浮かべて、 機能の優先度、使用頻度に応じて並び替え、 入れ替えなどを行う
© 2013 Actcat, Inc. All Rights Reserved 61
1. コアとなるViewを描く 例: Facebookのタイムライン、Cookpadのレシピページ
2. コアとなるViewへの動線となる、 各Viewを描く
1. タブ、ナビ、ユーティリティから選択 3. 自分で使うイメージを思い浮かべて、
機能の優先度、使用頻度に応じて並び替え、 入れ替えなどを行う
延長が必要であれば、5分のみ
UIを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 63
7. まとめ
UIを描いてみよう
© 2013 Actcat, Inc. All Rights Reserved 65
まとめ • ユーザ体験ファーストで作っていくために、
開発先行ではなく、ユーザの各機能の使用頻度などに応じたデザイン設計をしましょう
• もっとくわしく知りたい方は、先ほどの書籍がオススメ
• デザインを0から創造することは難しく、そして、ユーザフレンドリーじゃない。みんなが慣れた自然なUIを目指そうね。
© 2013 Actcat, Inc. All Rights Reserved 66
休憩: 10min
© 2013 Actcat, Inc. All Rights Reserved 67
ユーザビリティテスト
© 2013 Actcat, Inc. All Rights Reserved 69
ユーザビリティテストをする理由 • 改善のため
• とにかく、製品が出来たら、 やってみたら分かる
• 本当に、「絶対分かるだろう」と思っていた部分が伝わらなかったり、ほとんどの機能が使われないまま終わったりする
© 2013 Actcat, Inc. All Rights Reserved 70
やってみよう 1. 達成してほしいシナリオを作る
– テストしたいユーザ体験のシナリオを作る – 「タスク」ではない – 例: 「今日の天気を教えてください」など
NG例: 「天気マークのボタンを押し、出てきたポップアップの…」ではない
– 今回は、「課題」の「解決」を「シナリオ」としてください。 – 例: 課題: 天気を知る方法がない 解決: 天気を知ることが出来る
シナリオ: 今日の天気を知ってください 2. UIを、先ほどペアになった方に見せて、シナリオを伝えてください。そして、何かボタンを押して貰うなどして貰ってください
3. ボタンを押したら何が起こるか、どの画面にいくのか伝えてください – 例:戻るを押したらコチラの画面に戻ります、など
4. 結果として、「ここを押してここに飛んでここで天気が分かる」みたいに回答してもらえるか、途中で躓ついて、なかなかシナリオを達成出来ないかのどちらかになると思います
© 2013 Actcat, Inc. All Rights Reserved 71
テストしたいユーザ体験の シナリオケースを作る
「課題」の「解決」を 「シナリオ」としてください
© 2013 Actcat, Inc. All Rights Reserved 72
テストシナリオの作成 • 今回は、「課題」の「解決(機能)」を「シナリオ」としてください • 課題とその課題に対応する解決策を掛けあわせたシナリオを3つ箇条書きにしてください
• 課題と解決(機能)がペアになっていない場合は、解決の方をシナリオにしてください
• 課題、解決(機能)のペアが3つしかないと思いますが、それらを書き終えたら、それ以外にテストしたい内容を書いてみてください
© 2013 Actcat, Inc. All Rights Reserved 73
今回は、「課題」の「解決」を「シナリオ」としてください。 [例] 課題:天気を知る方法がない 解決: 天気を知ることが出来る シナリオ: 今日の天気を知ってください
UIをペアの人に見せてみてね 1人目 3分たったらフィードバックに移ってね
© 2013 Actcat, Inc. All Rights Reserved 75
1. UIを、先ほどペアになった方に見せて、シナリオを伝えてください。そして、何かボタンを押して貰うなどして貰ってください
2. ボタンを押したら何が起こるか、どの画面にいくのか伝えてください – 例:戻るを押したらコチラの画面に戻ります、など
3. 結果として、「ここを押してここに飛んでここで天気が分かる」みたいに回答してもらえるか、途中で躓ついて、なかなかシナリオを達成出来ないかのどちらかになると思います
© 2013 Actcat, Inc. All Rights Reserved 76
ユーザビリティテスト
ユーザビリティテスト
© 2013 Actcat, Inc. All Rights Reserved 77
ユーザビリティテスト • UIをペアの人に渡してください
• シナリオを伝えてください
• UIを触る方(テスターさん)は、ボタンを押すなどの動作をしてください
• UIを作った方は、ボタンを押したら何が起こるか、どの画面にいくのか伝えてください
© 2013 Actcat, Inc. All Rights Reserved 78
ユーザビリティテスト(フィードバック)
ユーザビリティテスト
© 2013 Actcat, Inc. All Rights Reserved 80
ユーザビリティテスト(フィードバック) • UIに関して思ったことなどを、伝えて、お互いに、どうやったら改善できるかなど、話し合ってみてください。
© 2013 Actcat, Inc. All Rights Reserved 81
ユーザビリティテスト(2人目)
ユーザビリティテスト
© 2013 Actcat, Inc. All Rights Reserved 83
ユーザビリティテスト (フィードバック:2人目)
ユーザビリティテスト
© 2013 Actcat, Inc. All Rights Reserved 85
まとめ • 体験してほしいユーザ体験を本当にユーザに
届けるために、継続的にUIを改善していきましょう
• そのために、継続的に、定期的に、ユーザビリティテストを行いましょう
© 2013 Actcat, Inc. All Rights Reserved 87
ちょっとしたオススメ
© 2013 Actcat, Inc. All Rights Reserved 88
http://uiscope.com/ <= 格安
『アジャイルソフトウェア開発』とは
© 2013 Actcat, Inc. All Rights Reserved 89
今回想定している開発手法 • 先ほど書いたリーンキャンバス、UIを、
どのようにプログラミングに落としこんでいくかをご紹介します
• そのために使う手法が、『アジャイルソフトウェア開発』です
© 2013 Actcat, Inc. All Rights Reserved 90
『アジャイルソフトウェア開発』とは • ユーザにとっての一つの体験、機能ごとに開発
を進める手法を、「アジャイルソフトウェア開発」と呼びます
• アジャイルでは、ユーザにとって価値ある体験毎に開発を進めることで、ムダを減らし、また、追加した機能が本当に使われるか、サービス全体がよくなったかどうかなどが分かります
• 以降、機能のことを「ユーザストーリー」と呼びます。
© 2013 Actcat, Inc. All Rights Reserved 91
なぜMVPでもアジャイル? • MVPを開発した後、1つずつユーザストーリー(機
能)を追加していく、改善していくイメージはつきやすいかと思います
• これを、MVPの開発の時からする理由は、単純に、結果がわかりやすいからです。自分が学んだこと、作ったものが、確実に動くので、モチベーションが持続します。
• また、従来の開発手法と比べ、「動く」ものを改善し続けるため、途中でつまずいても原因を探しやすく、不透明な状態になりにくいのです。
© 2013 Actcat, Inc. All Rights Reserved 92
アジャイルの流れ 1. 最低限有効なプロダクトに必要な ユーザストーリー(機能)の一覧を作る
2. 順序をつけて順番に取り組む 1. どうなったらゴールか?という事が確認できる、テスト項目を作成する
2. テスト項目を実現するために必要な、 ユーザストーリーの一覧を書き出す
3. 各ユーザストーリーを実装していく 4. 作成したテストを元に、テストを行い、 問題なければ、反映、該当ユーザストーリーの開発を終了
5. 取り込んだユーザストーリーがどういった影響をもたらしたか計測する (いらなそうなら削除しても構わない)
3. 順番を再考して、再度取り組む
© 2013 Actcat, Inc. All Rights Reserved 93
ユーザストーリーを書く
© 2013 Actcat, Inc. All Rights Reserved 94
イメージ
© 2013 Actcat, Inc. All Rights Reserved 95
実装が完了したユーザストーリー
実装中の ユーザストーリー
実装予定の ユーザストーリー
実装するかもしれないかもな ユーザストーリー
ユーザストーリーの一例 • ◯◯として△△が欲しい。なぜなら、☓☓だ
からだ。 – ◯◯=ユーザーの役割
– △△=機能
– ☓☓=機能の価値や目的
• 例:図書館の訪問者として、蔵書を検索する機能がほしい。なぜなら、館内で見たり借りたりしたい本があるかどうか、そして、それがどこにあるのかが知りたいからだ。
• 引用: 『アジャイル開発とスクラム 顧客・技術・経営をつなぐ協調的ソフトウェア開発マネジメント』 平鍋 健児 (著), 野中 郁次郎 (著)
© 2013 Actcat, Inc. All Rights Reserved 96
ユーザストーリーの書き方例 1. 各画面での コアとなるユーザストーリーを描く – 各画面を丸印で囲って、そこにユーザストーリーを書いてくだ
さい – 例: Twitterの「タイムライン」だと、
Twitterのユーザとして、友人が今、ついさっき、何を思っていたかが分かる機能がほしい。なぜなら、その友だちと次話すときの話のネタにしたいからだ。
– 実際は◯◯△△☓☓は難しい。。。 – コアとなるView、ヘッダー、フッター、ボタン、などが対象
2. UIをとにかく細かく丸印をつけて、 区切って、ユーザストーリーを羅列していく – アイコンが表示されるとか、押すとグーグルの検索画面に飛ん
でグーグルで検索出来るとか – 大切(コア)っぽいところから手をつけて下さい
3. 各View全部に◯がついたら終わり、それが機能の詳細なリストである。要件定義書としても使える。かも
© 2013 Actcat, Inc. All Rights Reserved 97
© 2013 Actcat, Inc. All Rights Reserved 98
◯◯として△△が欲しい。なぜなら、☓☓だからだ。 ◯◯=ユーザーの役割 △△=機能 ☓☓=機能の価値や目的
まとめ • 本当にユーザにとって必要な機能なのかどう
かを考えながら、UIをユーザストーリーのリストに落としこんでいきましょう
• この後、各機能ごと、大切な順番、あるべき順番、作れる順番、な順序に並べて、実際には開発をすることになります
• 「ユーザにとって価値ある機能かどうか」がも重要です。
© 2013 Actcat, Inc. All Rights Reserved 100
今日作ったものの改善方法
まだ満足はしていないですよね、完成度的に、たぶん。
© 2013 Actcat, Inc. All Rights Reserved 101
今日作ったものの改善方法 • 第三者に見せる – 友達 – 知見所有者 – ターゲーットユーザー、アーリーアダプター
• ターゲーットユーザー、 アーリーアダプターに、 課題とソリューションについてインタビュー、ユーザビリティテストを行う
• リーンキャンバスやUVPなどを意識しつつ、改善していく(繰り返す、10人~100人ぐらい)
© 2013 Actcat, Inc. All Rights Reserved 102
改善の続きは、Webでも!
今日作ったものの改善方法
© 2013 Actcat, Inc. All Rights Reserved 103
お願いとフィードバックの場作り • Facebookページにいいね! 頂けますと幸いです
• 皆さま、ご自由に、キャンバスなど投稿してください。
• Spathのワークショップ参加メンバーで、盛り上がれると嬉しいです。
• https://www.facebook.com/spathjp © 2013 Actcat, Inc. All Rights Reserved 104
自分で開発 or 人に依頼
おめでとう!お疲れ様でした!
© 2013 Actcat, Inc. All Rights Reserved 105
おめでとう!お疲れ様でした! 後はお金さえあればOKです!
自分で開発 or 人に依頼
© 2013 Actcat, Inc. All Rights Reserved 106
後はお金さえあればOKです • 今日下記のものを作りました – LeanCanvas – User Interface – ユーザストーリー(必要な機能リスト)
• 開発自体は、外注可能 – 上記3点で発注可能です
• デザインも発注可能 – 上記3点で発注可能です
© 2013 Actcat, Inc. All Rights Reserved 107
具体的な実現方法 1. 一括見積りサイトから、 開発会社に一括見積り依頼
2. フリーランスに依頼 1. デザイナ 2. エンジニア 3. 最初、もしくは最後に、 デザインをエンジニアに渡す
3. 全部自分で頑張る
1. デザインはテンプレートや各種素材利用 UIは既に固まっているのでMVPとしては十分可能
2. 開発は勉強しながら頑張る
© 2013 Actcat, Inc. All Rights Reserved 108
発注する場合のオススメ • アイコンデザイン / ロゴデザイン – 99designs : http://99designs.com/ – DesignClue : http://www.designclue.co/
• 各画面のデザイン – CrowdWorks : http://crowdworks.jp/ – Lancers : https://www.lancers.jp/
• 開発 – CrowdWorks : http://crowdworks.jp/ – Lancers : https://www.lancers.jp/
© 2013 Actcat, Inc. All Rights Reserved 109
アイコン、ロゴ発注例 : DesignClue
iPhoneアプリ オズボーンのチェックリスト
弊社ロゴ Action + Cat = actcat
© 2013 Actcat, Inc. All Rights Reserved 110
デザイン発注例: Lancers
iPhoneアプリ モテる一言、アイコン デザイン
© 2013 Actcat, Inc. All Rights Reserved 111
デザイン / アイコン • アイコンはDL数に超影響を与える超重要部分なので、出来れば発注しよう!
• 99DesignsやDesignClueは海外の人がやってくれるので、とても安価で、超オススメです。デザインはきちんと意志疎通出来ないと結構きついです
• デザインはアイコンからの切り貼りか、フリー素材を頑張って使えばなんとかなるケースも。(アイコン切り貼りする場合は要著作者確認・許可)
© 2013 Actcat, Inc. All Rights Reserved 112
デザイン自分で頑張ってみた例
iPhoneアプリ | 素材切り貼り オズボーンのチェックリスト
Androidアプリ|フリー素材 大小速算
© 2013 Actcat, Inc. All Rights Reserved 113
開発発注例 • 弊社は基本、開発メンバー主体なので、 発注実績はないので、ごめんなさいm(__)m
• 普通に会社に発注出すと結構高いです。時給換算3000円~はします。さらに、結構難しいです。定期的に上がってきたものをチェック、改善の依頼、は最低限しないときついです。変なのになります
• オフシェアなどは、安めですが、もっとすごく難しいです。技術レベルが低いところも多いです
• MVPレベルであれば、 フリーランスプログラマに頼めばまぁわりと、 人によっては早く安く良くやってくれます。
© 2013 Actcat, Inc. All Rights Reserved 114
見積り(発注)してみよう! • 最近流行りのCrowdWorksに、 「これぐらいだったらいいかな」という金額で、 プロジェクトを投稿してみよう!
• これらを用意しよう! – [Done] UIの画面 – [Done] ストーリー – [Done] LeanCanvas – LeanCanvasをテキスト(CrowdWorksのテンプレート)にしたもの
– ユーザーストーリーをテキスト(CrowdWorksのテンプレート)にしたもの
• わからなかったらCrowdWorksの人に聞けばOK! (たぶん、可能な限り親切に教えてくれる、はず)
• いかがでしょうか?
• →あとで、私たちに、大体の概算見積もり、相談してもらっても大丈夫です。
© 2013 Actcat, Inc. All Rights Reserved 115
iPhoneアプリ発注テンプレート
© 2013 Actcat, Inc. All Rights Reserved 116
デザイン発注テンプレート • テンプレというテンプレがまだ
CrowdWorksもLancersもなかったです
• 先ほど用意したらOKと記載した 5点があればおそらく大丈夫です
• あとは人対人のコミュニケーションです
© 2013 Actcat, Inc. All Rights Reserved 117
いやいや、自分でやろうよ!
自分で開発 or 人に依頼
© 2013 Actcat, Inc. All Rights Reserved 118
どこを自分でやるか • アイコンは任せよう – もしあなたがデザイナーなら自分でやろう
• デザインは頑張ってもいいかもしれない – 本気度が高いプロジェクトなら任せよう
• 開発は自分でやろうよ! – サービスや製品は「改善」されるもの – 改善を随時実施するために、自分で、改善を施していけるほうが、サービス品質は高くなりやすい
– それに、アジャイルに対応出来る開発会社、 フリーランスはまだ多くない
© 2013 Actcat, Inc. All Rights Reserved 119
どうやって開発するか? • アジャイル開発がオススメ
• 少しずつ作って、リリースして、 様子を見て、フィードバックを貰って、 改善していこう
• 小さく生む(可能な限り低コストなMVP) 大きく育てる(少しずつ育てていく)
© 2013 Actcat, Inc. All Rights Reserved 120
どうやって開発を勉強するか? • 自分で本を買いまくって超頑張る
• プログラミング講座にいってみる
• Spath School – プログラミングを最大効率で学習
3ヶ月でサービスをあなたがリリース 出来なければ半額キャッシュバック
– 後で宣伝しますw
© 2013 Actcat, Inc. All Rights Reserved 121
リリース後はどうするか?
© 2013 Actcat, Inc. All Rights Reserved 122
リリース後はどうするか? • 3つの成長エンジンのチューニング
• Lean Canvasの修正による拡大(Pivot)
© 2013 Actcat, Inc. All Rights Reserved 123
3つの成長エンジンのチューニング 1. 粘着型成長エンジン
– 一度獲得した顧客がずっと使ってくれる、お金を支払ってくれる場合の、成長パターン
– 新聞購読など定期購読系など – シャンプーとかも同じブランドを使い続ける
2. ウイルス型成長エンジン – 口コミなどによるバイラルによるもの – 『バイラル係数』が1以上だと成長出来る
• バイラル係数 = 既存利用者から紹介された新利用者 / 既存利用者
3. 支出型成長エンジン – 顧客生涯価値(一人の顧客が取引期間を通じて企業にもたらす利益) – 顧客獲得単価 = 利益
– 顧客獲得単価 < 顧客生涯価値 であればあるほど、成長出来る
• OTHER: – 放置型: 自己満足で放置でも別にいいのでは? 自分のためのプロダクトであれば。
© 2013 Actcat, Inc. All Rights Reserved 124
Lean Canvasの修正(Pivot)による拡大 • ズームイン型
– (いくつかのうち)一つの機能にフォーカスする。 • ズームアウト型
– それまでの製品がより拡大したものの一部となる、製品拡大。 • 顧客セグメント型
– ターゲット顧客の変更。 • 顧客ニーズ型
– 想定していた課題が重要でなかったり、対価を支払えない場合は、対象とするニーズを変更あるいは再定義する。
• プラットフォーム型 – アプリケーションからプラットフォームに、あるいはその逆の方向転換。
• 事業アーキテクチャー型 – 低マージンで量を追うか、量を追わないが高マージンを狙うか。
• 価値獲得型 – どのようにマネタイズするか、売上をどう獲得するか。
• 成長エンジン型 – バイラル(クチコミ)、顧客定着化、(広告など)マーケティング投資、の三つがあるが、その転換。
• チャンネル型 – 販売・流通チャンネルの転換。
• テクノロジー型 – 用いる技術の転換。
© 2013 Actcat, Inc. All Rights Reserved 125
まとめ • 小さくてもいいから、まずはサービスを産んで、
その後、Pivotしながら、継続的に大きく育てて行きましょう。その際、適切な成長エンジンを選択しましょう
• 実践リーンキャンバスという本がオススメです
• それ以外、広告手法などは各種の本をお読みください。。。
© 2013 Actcat, Inc. All Rights Reserved 126
今日のまとめ
© 2013 Actcat, Inc. All Rights Reserved 127
今日のまとめ • 今日はMVP、アジャイル開発、リーンスタートアップについて、UIの書き方やアイデアの考え方を学びました
• その結果、UI, LeanCanvas, ユーザストーリーを 作成しました
• 自分が満足いくまでそれらを改善したら、 あとはお金さえあれば、 いつでも発注、実現出来ます!
• MVPの完成、リリース後も、 継続的に改善していきましょう!
© 2013 Actcat, Inc. All Rights Reserved 128
Spath Schoolの宣伝
© 2013 Actcat, Inc. All Rights Reserved 129
プログラミングを最大効率で学習 3ヶ月でサービスをあなたがリリース 出来なければ半額キャッシュバック
Spath Schoolとは? • プログラミング初心者の方向けの プログラミングスクールです
• あなたが作ってみたいサービスを作りながら学んで頂くことで、効率的に実践的なプログラマを目指せます。
• iPhone, Webサービスの2コースからお選び頂けます
© 2013 Actcat, Inc. All Rights Reserved 131
Needs • サービスを作ってみたい
• プログラミングを身につけたい
• 手に職を付けたい、就職したい • 副業したい
© 2013 Actcat, Inc. All Rights Reserved 132
Problem • プログラミングの勉強をしたいが、 何から手をつけていいか分からない。 独学では難しい気がする (dotinstallや本はたくさんあるんだけれども)
• 既存の代替手段 – プログラミング講座
• 高くて受けられない • 講座に通ってみても、サービスを作れる気がしない。 成長できた気がしない。
– 大学、専門学校、短大 • 莫大な時間とお金を必要とするので受けられない • 実践的な内容を学べるところがほとんどない
© 2013 Actcat, Inc. All Rights Reserved 133
Reason • 0から10まで教える事により、実務に使用しないもの、頻度の低いものも覚えようとしてしまい、定着しづらく、コストも高い
• プログラマーであり続けるためには学習し続ける必要があり、”教わる”事は弊害がある – タクシー運転手のような、求められるスキルの 変化がほとんどない職業ではありません
– 身につけたスキルの多くはすぐに古くなり、 使えなくなる職業です。もちろん、基礎というのは残りますので、新しいものへの差分だけ勉強をし続ける必要があります
– 新しいものとの差分を教えてくれる講座や人はほとんどないのが現状です。独学あるのみ。
© 2013 Actcat, Inc. All Rights Reserved 134
Solution 1. 書籍やDotinstall, TreeHouseなど既存コンテンツを利用したプログラミング学習の提案と、スケジュール、つまづき、不明点のサポート
2. Minimum Variable Product の企画、開発、リリース、継続的改善を”独力”で行うカリキュラムを提供。サポート
© 2013 Actcat, Inc. All Rights Reserved 135
Unique Value Proposition
プログラミングを最大効率で学習 3ヶ月でサービスをあなたがリリース 出来なければ半額キャッシュバック
© 2013 Actcat, Inc. All Rights Reserved 136
Step and Pricing 1. 体験ワークショップ – 5,250円 / 1名 / 3時間
2. プログラミング学習、学習支援 – 9,800円 / 1名毎 / 1ヶ月間
3. OJT型プログラミング研修、MVP開発 – 129,800円 / 1名毎 / 3ヶ月間
=>約15万円でサービスを作れるエンジニアに * iOS(Objective-C), Web(HTML/Ruby/MySQL/Sinatra)
© 2013 Actcat, Inc. All Rights Reserved 137
『体験ワークショップ』の流れ
Coming Soon
© 2013 Actcat, Inc. All Rights Reserved 138
『プログラミング学習、学習支援』の流れ
© 2013 Actcat, Inc. All Rights Reserved 139
『プログラミング学習、学習支援』の流れ
1. コースの選択(iOS/Web) 2. 書籍、コンテンツの推薦、オリジナルコンテンツをまとめたメンバー専用サイトを案内
3. 学習スケジュールをPivotal Trackerにて登録してもらう
4. 私どもでPivotal Tracker APIを利用してスケジュールの進捗を把握、リマインドなど行う
5. 躓いた際や不明点があった際などは、ルール化した質問方法などで、自己解決を促しつつ、サポートを行い、必ず解決する。 Skype, Facebookなどを利用して行います
詳細はMemberサイトより http://members.spath.jp/
© 2013 Actcat, Inc. All Rights Reserved 140
『プログラミング学習、学習支援』 イメージ
© 2013 Actcat, Inc. All Rights Reserved 141
どちらか選択
Web(ruby)
iOS
書籍送付
メンバーサイト登録 / FBグループ登録
オリジナルコンテンツで補完
書籍送付 オリジナルコンテンツで補完
随時FBグループでサポート カリキュラム自体は
メンバーサイトで案内
具体的なコンテンツ内容(予定) • iOS
– 『よくわかるiphoneアプリ開発の教科書』 • Objective-Cとは(クラス, メソッド, for,if,array,each,etc…)
/ iOS用各種UIKitの使い方 – 補完コンテンツ
• JSON, JSONPaerser / APIの利用方法
• Web – Sinatra
• Sinatraとは / ViewとController / GET, POST / MySQLとの接続 – 『たのしいRuby』
• Rubyとは(クラス, メソッド, for,if,array,each,etc…) – MySQL (dotinstallより) – HTML (dotinstallより)
• 共通 – デバッグ方法 / ググる方法 / PivotalTrackerによるタスク管理
© 2013 Actcat, Inc. All Rights Reserved 142
アプリ開発に最低限必要な基礎知識を、 それぞれのペースで身につけてもらう。
※MVC構造やクラス設計、Active Record、バージョン管理、CSSなど、これらはカリ
キュラムに含まれません。 「必要になったら」覚えるべきであるという前提のもと内容を極端に選定しています。
© 2013 Actcat, Inc. All Rights Reserved 143
『OJT型プログラミング研修、MVP開発』の流れ
© 2013 Actcat, Inc. All Rights Reserved 144
『OJT型プログラミング研修、MVP開発』の流れ
• Facebook グループに参加してもらう
• 下記カリキュラム(Lean canvasなどは最低限のみ)実施、 FBグループにて必ずフィードバックを返す、回答するなどして、 サービスをリリース出来る状態まで持っていく
• 1. 作りたいアイデア / 解決したい課題を考える 2. Lean canvasを書く 3. Lean canvasを検証する 4. アイデア・課題解決を実現する Solution の UserInterface を書く 5. Solution を細かなタスクに分解する 6. タスクに内包される技術調査を行う 7. Solutionを あなた自身で 開発する 8. ユーザビリティテスト(友達などに実施してもらう) 9. Solutionを あなた自身で 開発する 10. ユーザビリティテスト 11. 必要であれば、デザインを人に頼む 12. 開発 13. ユーザビリティテスト 14. リリース準備、リリース 15. 継続的マーケティング
© 2013 Actcat, Inc. All Rights Reserved 145
Lean canvas 一例
© 2013 Actcat, Inc. All Rights Reserved 146
User interface 一例
© 2013 Actcat, Inc. All Rights Reserved 147
User interface 一例(Feedback例)
© 2013 Actcat, Inc. All Rights Reserved 148
『OJT型プログラミング研修、MVP開発』の流れ
• 詳細はSpath School公式サイトより http://www.spath.jp/curriculum
© 2013 Actcat, Inc. All Rights Reserved 149
iOS 実績
© 2013 Actcat, Inc. All Rights Reserved 150
Android 実績
© 2013 Actcat, Inc. All Rights Reserved 151
作りたいものを作りながら学び、 必要なものを学習出来るようになる
※作成物毎に必要なスキルが異なるため、具体的なカリキュラム項目は記載致しかね
ます。 必須な内容があれば、それをカリキュラム
内に盛り込むことも可能です。
© 2013 Actcat, Inc. All Rights Reserved 152
導入、お申込み方法 • 下記サイトより無料メンタリングの お申込みください http://www.spath.jp/
• 体験ワークショップなどにて、 口頭にて申込みしたい旨お伝えください
© 2013 Actcat, Inc. All Rights Reserved 153
運営メンバー概要 角 幸一郎 • 徳島大学工学部卒業。在学中からフリーランスとしてiPhoneアプリを複数リリース、
累計199万DL超。新卒として入社した楽天を2010年末に退職後、CyberAgent、D.A.consortiumなどでサービスを企画・設計・開発。また、スマートフォン向けアドエクスチェンジ事業「SmAdd」などもリリース。
• 大学時代はパソコン講座を運営するアルバイトを大学生協にて3年半実施、講師やアドバイザー、新規事業(ITパスポート講座カリキュラムの追加)などの研修事業も実施
• あまりオープンには言っていませんが、研修の長さ(8ヶ月間)や中身の薄さ、講師の質の低さ、研修内での技術レベルの低さなども、楽天退職の一因です。
• iOS(Objective-C) / Android(Java) / Rails3(Ruby) その他、サービス開発に必要なものであればなんでも。
© 2013 Actcat, Inc. All Rights Reserved 154
米本 剛士 • 徳島大学工学部大学院卒業。iPhone3G発売当初からiPhoneアプリを複数リリース、各種アドネットワークを活用、収益化。代表作は「AppBottle」「標高ワカール」など。AppStoreにて無料総合ランキング3位獲得。2012年に株式会社アクトキャットに参画、取締役。
• 大学時代は産学官連携アプリ開発プロジェクト「make.app」にてリーダーとして、学生へのプログラミング指導等も実施
• 「私が受けた新人研修では、講義形式のプログラミング学習が受講者別の進度の違いに全く耐え切れていませんでした。プログラミング学習は講義形式である必要は全くありません。」とのCyberAgentでの研修の時は思いました
• iOS(Objective-C) / Rails3(Ruby) / Codeigniter(PHP) その他、サービス開発に必要なものであればなんでも。
会社概要 会社名 株式会社アクトキャット 設立年 2012年5月10日 代表取締役 角 幸一郎 本社所在地 東京都港区赤坂8丁目9番14号 ローザ赤坂 107号室
サービス紹介
お願いカンパニー for iOS / Android ユーザが悩み、相談、疑問などを投稿、他ユーザが回答するサービス。投稿者に選ばれるとポイントが貰え、景品に交換できるのが特徴。
その他実績 40以上のiOS/Android/Webアプリの企画設計開発運用実績 大手広告代理店等との受託開発、コンサルティング実績
Copyright 2012© Actcat, Inc. All Rights Reserved. 155
お問い合わせ先 下記までお気軽にお問い合わせ下さい
Copyright 2012© Actcat, Inc. All Rights Reserved. 156
担当: 角 幸一郎"Mail: [email protected]"Tel : 03-6434-5905"HP : http://www.actcat.co.jp/
最後にアンケートのお願い
© 2013 Actcat, Inc. All Rights Reserved 157
アンケートのお願い • アンケートにご記載ください
• 記入が終わりましたら、私まで、アンケート、LeanCanvas, UI, ユーザビリティテストシナリオの4枚をお渡しください
• アンケート以外の3枚をメールにて、 デジタル化(スキャン)してお送りさせて頂きます
© 2013 Actcat, Inc. All Rights Reserved 158
本日はお越しいただき 誠にありがとうございましたm(__)m
© 2013 Actcat, Inc. All Rights Reserved 159
運営メンバー概要 角 幸一郎 • 徳島大学工学部卒業。在学中からフリーランスとしてiPhoneア
プリを複数リリース、累計199万DL超。新卒として入社した楽天を2010年末に退職後、CyberAgent、D.A.consortiumなどでサービスを企画・設計・開発。また、スマートフォン向けアドエクスチェンジ事業「SmAdd」などもリリース。
• 大学時代はパソコン講座を運営するアルバイトを大学生協にて3年半実施、講師やアドバイザー、新規事業(ITパスポート講座カリキュラムの追加)などの研修事業も実施
• iOS(Objective-C) / Android(Java) / Rails3(Ruby) その他、サービス開発に必要なものであればなんでも。
© 2013 Actcat, Inc. All Rights Reserved 160
米本 剛士 • 徳島大学工学部大学院卒業。iPhone3G発売当初からiPhoneアプリを複数リリース、各種アドネットワークを活用、収益化。代表作は「AppBottle」「標高ワカール」など。AppStoreにて無料総合ランキング3位獲得。2012年に株式会社アクトキャットに参画、取締役。
• 大学時代は産学官連携アプリ開発プロジェクト「make.app」にてリーダーとして、学生へのプログラミング指導等も実施
• iOS(Objective-C) / Rails3(Ruby) / Codeigniter(PHP) その他、サービス開発に必要なものであればなんでも。
会社概要 会社名 株式会社アクトキャット 設立年 2012年5月10日 代表取締役 角 幸一郎 本社所在地 東京都港区赤坂8丁目9番14号 ローザ赤坂 107号室
サービス紹介
お願いカンパニー for iOS / Android ユーザが悩み、相談、疑問などを投稿、他ユーザが回答するサービス。投稿者に選ばれるとポイントが貰え、景品に交換できるのが特徴。
その他実績 40以上のiOS/Android/Webアプリの企画設計開発運用実績 大手広告代理店等との受託開発、コンサルティング実績
Copyright 2012© Actcat, Inc. All Rights Reserved. 161
お問い合わせ先 下記までお気軽にお問い合わせ下さい
Copyright 2012© Actcat, Inc. All Rights Reserved. 162
担当: 角 幸一郎"Mail: [email protected]"Tel : 03-6434-5905"HP : http://www.actcat.co.jp/
実施を取りやめたスライド群
© 2013 Actcat, Inc. All Rights Reserved 163
ピッチ内容作成と修正ワーク
© 2013 Actcat, Inc. All Rights Reserved 164
ピッチしよう! • エレベーター・ピッチ
• 伝えたいことを30秒、250字で
© 2013 Actcat, Inc. All Rights Reserved 165
なぜピッチ? • アイデアを第三者に共有することで、アイデア
の検証もできます。ビジネス的に秘密裏にしたいわけでなければ、積極的にアイデアは公開してみましょう!
• 今回のでは無理かとは思いますが、協力してくれる仲間や会社が見つかるきっかけになることも多々あります。
© 2013 Actcat, Inc. All Rights Reserved 166
今回のピッチルール • スライドを3枚書いてもらいます – 1枚目はUVP – 2枚目は既に書いたリーンキャンバス – 3枚目以降は描いたUI
• 発表時間 – 1枚目は30秒 – 2枚目、3枚目以降は合わせて2分30秒
• 作成時間 – UVPを書き、2枚目、3枚目以降を必要があれば修正して、出来たら提出ください。10分間です。
– 頂いた順に発表になります。頂いた資料をスキャナーでスキャンして、発表スライドとさせて頂きます
© 2013 Actcat, Inc. All Rights Reserved 167