Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Spath Workshop | 世の中をより良くするアイデアを形に出来るようになる会議 β版 20130420

2,654 views

Published on

いいアイデアを思いついた!でも、作れないし 作ってくれる人が見つからない!というあなたに。

というサブタイトルで開催しましたワークショップのスライド資料です。

下記、イベントについての詳細です。

非プログラマの方向けに、頭のなかで思い付いたITアイデアを、形に落としこむための体験ワークショップです。アイデアの洗練から発注出来る状態(要件定義、UI)の作成までを3時間で体験頂けます。必ず、1つ以上、人に発表しても問題のない、ITを通じてなんらかの課題を解決するようなアイデアをお持ち下さい。時間の半分以上は手を動かして頂くことになります。

[得られるもの]
あなたのアイデアの無駄を省きます
アイデアを具体的なUIと要件定義に落とし込みます
安価に発注出来ます
※最後に五分だけ、Spath Schoolというプログラミングスクールの宣伝が入ります。
Spath Schoolは現在開発中の正式リリース前サービスです。

[目次]
こんにちは
アイデアを実現することの難しさ
MVPとは ~ minimum viable product ~
ムダのない課題解決方法、リーン
リーンキャンバスを描いてみよう
UIを描いてみよう
↑ 90分 → [10分間 : 休憩] → 90分 ↓
ユーザビリティテストの重要性、見せてみよう
アジャイルソフトウェア開発とは
Backlog(タスクリスト)と優先度を書こう
自分で開発 or 人に依頼
リリース、リリース後の運用方法
まとめ
Spath Schoolの宣伝

基本、4名程度のグループ形式での実施を予定しております。
説明会みたいなノリではありません。

[持ち物]
鉛筆、ボールペン、などの筆記用具をお持ち下さい。
PCなどは一切不要です。

Spath Schoolについてはこちらを御覧ください。
http://www.spath.jp/

Published in: Technology
  • Be the first to comment

Spath Workshop | 世の中をより良くするアイデアを形に出来るようになる会議 β版 20130420

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

×