1. ウェブサービスの
つくりかた
飯塚修平

2. 自己紹介
• 飯塚修平 @tushuhei
• 東京大学工学系研究科
技術経営戦略学 修士１年
• オーマ株式会社 執行役員
ウェブサービスのつくりかた 2

3. 最近つくったもの
• Imagerous*
http://imagero.us
• お花サプライズ！
https://hanasup.jp
• ルー大柴 bot
@oshiba_bot
ウェブサービスのつくりかた 3

4. ウェブサービスのつくりかた 4

5. 今日の内容
• ウェブサービスってなに？
• ウェブサービスをつくろう
• 成功に近づけるためには
ウェブサービスのつくりかた 5

6. 今日の内容
• ウェブサービスってなに？
• ウェブサービスをつくろう
• 成功に近づけるためには
ウェブサービスのつくりかた 6

7. ポータル・検索サイト
ウェブサービスのつくりかた 7

8. ソーシャルメディア・SNS
ウェブサービスのつくりかた 8

9. E コマース
Grannies. Inc
ウェブサービスのつくりかた 9

10. リアルと結びつくウェブ
PatientsLikeMe
ウェブサービスのつくりかた 10

11. 架け橋となるモバイル square
foursquare 何を買ったのか
nike plus
どこに行ったのか
どう運動したか
ウェブサービスのつくりかた 11

12. ウェブサービスのつくりかた 12

13. Eコマース
モバイル
ソーシャル identify
メディア
ウェブ リアル
ウェブサービスのつくりかた 13

14. 難しそう・・・
ウェブサービスのつくりかた 14

15. 彼らが何をやっているのか
• ページランク、転置インデックス
• 行列、ベクトル
• ログイン、フィード配信
• テーブル（Excel みたいなイメージ）
• ボタンを押す親指運動
ウェブサービスのつくりかた 15

16. つまり
• 技術うんぬんより何を作るかが大事。
• ＋αで技術力が映える。
• Facebook: 優秀なリコメンド機能
• Mobage: 徹底的なレベル調整
ウェブサービスのつくりかた 16

17. 学生のスタートアップ
• スタンフォード大学
「一番優秀な学生達は起業し、その次に優秀
な学生たちは大企業に勤める」
• 日本の学生スタートアップ
ウェブサービスのつくりかた 17

18. 今日の内容
• ウェブサービスってなに？
• ウェブサービスをつくろう
• 成功に近づけるためには
ウェブサービスのつくりかた 18

19. 全体のながれ
• 解決したい問題・痛み
• 解決する方法
• ビジネスモデル
• 設計・開発
ウェブサービスのつくりかた 19

20. 解決したい問題と
解決する方法
• 「世界中の情報を整理する」ー Google
• 「オンラインで靴が買えないなんて！」
ー Zappos
• 「大学の友だち同士の会話を楽しみたい！」
ー Facebook
ウェブサービスのつくりかた 20

21. 解決したい問題と
解決する方法
• キーワードから文章を返すサイトをつくる
ー Google
• 靴を買うことの出来るサイトをつくる
ー Zappos
• 友だちが近況をアップすることが出来るサイ
トをつくるー Facebook
ウェブサービスのつくりかた 21

22. ビジネスモデル
• 広告収入
• フリーミアム
• アイテム課金
• Eコマース
• データ販売
ウェブサービスのつくりかた 22

23. 設計開発って？
こういうの？難しそう・・・
ウェブサービスのつくりかた 23

24. 設計開発もいろいろある
• ペルソナ・シナリオ
• デザイン
• アーキテクチャ
• 開発
ウェブサービスのつくりかた 24

25. ペルソナ
• ペルソナ = 代表的なユーザー像
• 具体的なほどよい。友だちにモデルがいるといいかも。
• 細かい性格や言動も考える
- 口癖、交友関係、職業病 etc.
• 日常生活とウェブの関わり方は？
- 通勤通学中、仕事中、料理中 etc.
• サイトの機能を再現するのに必要な登場人物数は？
『Web 工学とビジネスモデル 第9回』天野仁史 @amachang より
ウェブサービスのつくりかた 25

26. シナリオ
• ペルソナとサービスの理想的なインタラクションをストーリーに
する-> システムの振る舞いおよび必要な機能を明確にする！
• 感情の動きと行動を結びつけて記す
• テキストが一般的だが、漫画やビデオなど形態は何でもよい
• 複数人のペルソナのインタラクションを考える
-> 伏線の設計が非常に大事
「なぜ、どうやってそのユーザは
あなたのサイトに来るの？」
黒須正明. 『マイクロシナリオ手法』メディア教育開発センター (NIME) 研究報告. 2006.
ウェブサービスのつくりかた 28

27. お花サプライズ！の例
ウェブサービスのつくりかた 30

28. お花サプライズ！の例
俊一は大学の講義中暇だったので MacBook で Facebook を開いた。ニュースフィードを眺めていると、砂田から
以下のようなフォードが流れてきた。
さおりの誕生日が近いから花を贈ってみた。 条さおりさんの誕生日にみんなで花を贈ろう! ソーシャルフラワーギフ
トで... <以下 Discription は要検討>
というフィードが流れてきた。
- フィードにはさおりの顔写真がついていた。
- さおりさんには見えないようにプライバシー設定が施されている。
- 砂田くんは大学は異なるが、教習所で会って仲良くなった。
- たまに3人で昼飯を食べたりした間柄。
「あ、さおりさんの顔写真が流れてる。どうしたんだろ? え、なんで砂田が花とか贈ってるの?? え、ていうかなん
のサービスこれ?」と俊一は疑問に思った。
- 一応さおりとは Facebook のアカウントを交換するくらいの関係にはなっている。
気になった俊一は、とりあえずフィードのリンクをクリックしてみた。クリックすると、『茨城のクー ルビューティ
ー、条さおりに100本の花束を贈ろう!』と題されたページが目に飛び込んできた。
-「面白いサプライズ企画に自分も乗れる!」と感じてもらう
- タイトル、説明→自分も乗っていいんだ!
- プレゼンティーの顔が見える→〇〇に贈ることが出来るんだ。喜ばせたい。
- 期限がある→すぐやんなきゃ。
- みんなのメッセージ→みんなもいて、面白そう。自分も乗れる。喜ばせたい。
- 花束の本数→花束をあげるという事実→自分のきもちを伝えられる。知ってもらえる。喜ばせたい。
ウェブサービスのつくりかた 31

29. ページデザイン
• シナリオにそってデザインを作っていく。
• シナリオの中で発生すべき感情を、メモとし
てそのページに記録しておく 。
• ペルソナの気持ちになってもう一度そのペー
ジを 直して、どういう感情になるか考えて
みる。
• 分かりやすいサイトを目指す。
ウェブサービスのつくりかた 32

30. ページデザイン
〇〇に贈ることが
出来るんだ
花束を集めて
いるんだ
「自分も参加
できるんだな」
ウェブサービスのつくりかた 33

31. ページデザイン
ウェブサービスのつくりかた 37

32. アーキテクチャ・開発
• データベース設計
• サイトマップ
• フレームワーク
ウェブサービスのつくりかた 38

33. ウェブサービスのつくりかた 39

34. パートナーとの提携
• 問題は「開発」だけじゃない。
• リアルと結びつくウェブサービスは特に関係
者が多い。
• お花屋さん
• クレジットカード決済代行会社
• 配送業者などなど・・・
ウェブサービスのつくりかた 40

35. リリース前の奔走
• プロマネ「早く出しましょう！」
• 開発者「まだ神が宿っていない」
• 広報「もうプレス打ってもいいですか・・？」
ウェブサービスのつくりかた 41

36. 胸がときめくと同時に背筋が寒くなるような時間だった。
我々は期待に胸を膨らませると同時に、ひどい製品を出荷して
悲惨な結果に終わる恐怖を感じていた。
そして・・・何も起きなかった・・・
我々はあまりに見当外れの価値を提案してしまい、
製品を使ってみてそれがどれほど悲惨なのか体験してもらうどころか、
ダウンロードさえしてもらえなかったのだ。
The Lean Startup Eric Ries
ウェブサービスのつくりかた 42

37. 今日の内容
• ウェブサービスってなに？
• ウェブサービスをつくろう
• 成功に近づけるためには
ウェブサービスのつくりかた 43

38. 自分は自分の周りしか見えない
• 男には男の心理が 女には女の心理がある
• 若者には若者の、老人には老人の心理がある
• 学生には学生の、社会人には社会人の心理がある
• 都会人には都会人の、田舎者には田舎者の心理がある
• ビジネスマンにはビジネスマンの、公務員には公務員の心理がある
• ・・・
自分が抱えている「痛み」が
みんなが抱えている「痛み」だとは限らない。
ウェブサービスのつくりかた 44

39. どうやって見つけるのか？
• ヒアリングは大事。
• ただ、新しいモノを作る場合は、実際にモノ
を使ってもらわないとわからないことも。
ex. お花サプライズ！の「お届け係」
ex. IMVU の全 IM 統合計画
ウェブサービスのつくりかた 45

40. リーンスタートアップ
• 小さい仮説検証を繰り返す。
• 競合を調べる。
• 判断基準をつくる。
ウェブサービスのつくりかた 46

41. 「みんなオンラインで靴を買いたいと
思っているはずだ！」Zappos
✕: 大手靴屋さんと配送業者と提携し、注文翌日に靴を届け
られるオンラインシステムを 6 ヶ月かけて構築する。注文
は全自動化されており、システムは現行の購入フローに最適
化されている。
⃝: 近所の靴屋さんで写真を撮らせてもらう。それを 2 日で
作ったウェブサイトにアップし、注文が入ったら自分の手で
決済、配送を行う。人手が必要になったらバイトを雇う。
仮説検証のための最小限のプロダクトを
MVP (Minimum Viable Product) と呼ぶ。
ウェブサービスのつくりかた 47

42. 「オンライン募金の仕組みは間違って
いる！」Groupon
クラウドファンディングサービスからのスタート。
本業は失敗。しかし「共同購入」の力を知る。
毎日激安商品の情報を更新するブログ Groupon を開始。
共同購入サービスの礎を築いた。
ウェブサービスのつくりかた 48

43. やってみよう
あなたがつくろうとしているウェブサービスについて
• 解決したい問題
• 解決する方法
• MVP (ウェブサービスとは限りません)
を考えてください。
(参考: 電通インターン 2011 選考課題)
ウェブサービスのつくりかた 49