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

飯塚修平

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

自己紹介

• 飯塚修平 @tushuhei

• 東京大学工学系研究科技術経営戦略学 修士１年

• オーマ株式会社 執行役員

2

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

最近つくったもの• Imagerous*

http://imagero.us

• お花サプライズ！https://hanasup.jp

• ルー大柴 bot@oshiba_bot

3

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

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

今日の内容

• ウェブサービスってなに？

• ウェブサービスをつくろう

• 成功に近づけるためには

5

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

今日の内容

•ウェブサービスってなに？• ウェブサービスをつくろう

• 成功に近づけるためには

6

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

ポータル・検索サイト

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

ソーシャルメディア・SNS

8

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

E コマース

9

Grannies. Inc

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

リアルと結びつくウェブ

10

PatientsLikeMe

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

架け橋となるモバイル

11

square

nike plus

foursquare 何を買ったのか

どこに行ったのかどう運動したか

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

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

Eコマース

ウェブ リアル

モバイル

ソーシャルメディア

identify

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

難しそう・・・

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

彼らが何をやっているのか

• ページランク、転置インデックス• 行列、ベクトル

• ログイン、フィード配信• テーブル（Excel みたいなイメージ）

• ボタンを押す親指運動

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

つまり

• 技術うんぬんより何を作るかが大事。

• ＋αで技術力が映える。

• Facebook: 優秀なリコメンド機能

• Mobage: 徹底的なレベル調整

16

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

学生のスタートアップ• スタンフォード大学

「一番優秀な学生達は起業し、その次に優秀な学生たちは大企業に勤める」

• 日本の学生スタートアップ

17

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

今日の内容

• ウェブサービスってなに？

• ウェブサービスをつくろう• 成功に近づけるためには

18

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

全体のながれ

• 解決したい問題・痛み

• 解決する方法

• ビジネスモデル

• 設計・開発

19

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

解決したい問題と解決する方法

• 「世界中の情報を整理する」ー Google

• 「オンラインで靴が買えないなんて！」ー Zappos

• 「大学の友だち同士の会話を楽しみたい！」ー Facebook

20

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

解決したい問題と解決する方法

• キーワードから文章を返すサイトをつくるー Google

• 靴を買うことの出来るサイトをつくるー Zappos

• 友だちが近況をアップすることが出来るサイトをつくるー Facebook

21

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

ビジネスモデル

• 広告収入

• フリーミアム

• アイテム課金

• Eコマース

• データ販売

22

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

設計開発って？

23

こういうの？難しそう・・・

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

設計開発もいろいろある

• ペルソナ・シナリオ

• デザイン

• アーキテクチャ

• 開発

24

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

ペルソナ• ペルソナ = 代表的なユーザー像

• 具体的なほどよい。友だちにモデルがいるといいかも。

• 細かい性格や言動も考える- 口癖、交友関係、職業病 etc.

• 日常生活とウェブの関わり方は？- 通勤通学中、仕事中、料理中 etc.

• サイトの機能を再現するのに必要な登場人物数は？

『Web 工学とビジネスモデル 第9回』天野仁史 @amachang より25

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

シナリオ• ペルソナとサービスの理想的なインタラクションをストーリーに

する-> システムの振る舞いおよび必要な機能を明確にする！

• 感情の動きと行動を結びつけて記す

• テキストが一般的だが、漫画やビデオなど形態は何でもよい

• 複数人のペルソナのインタラクションを考える-> 伏線の設計が非常に大事

黒須正明. 『マイクロシナリオ手法』メディア教育開発センター (NIME) 研究報告. 2006.

「なぜ、どうやってそのユーザはあなたのサイトに来るの？」

28

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

お花サプライズ！の例

30

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

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

31

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

ページデザイン• シナリオにそってデザインを作っていく。

• シナリオの中で発生すべき感情を、メモとしてそのページに記録しておく 。

• ペルソナの気持ちになってもう一度そのページを�直して、どういう感情になるか考えてみる。

• 分かりやすいサイトを目指す。

32

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

ページデザイン〇〇に贈ることが

出来るんだ

「自分も参加できるんだな」

花束を集めているんだ

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

ページデザイン

37

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

アーキテクチャ・開発

• データベース設計

• サイトマップ

• フレームワーク

38

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

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

パートナーとの提携

• 問題は「開発」だけじゃない。

• リアルと結びつくウェブサービスは特に関係者が多い。

• お花屋さん

• クレジットカード決済代行会社

• 配送業者などなど・・・

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

リリース前の奔走

• プロマネ「早く出しましょう！」

• 開発者「まだ神が宿っていない」

• 広報「もうプレス打ってもいいですか・・？」

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

胸がときめくと同時に背筋が寒くなるような時間だった。我々は期待に胸を膨らませると同時に、ひどい製品を出荷して悲惨な結果に終わる恐怖を感じていた。

そして・・・何も起きなかった・・・

我々はあまりに見当外れの価値を提案してしまい、製品を使ってみてそれがどれほど悲惨なのか体験してもらうどころか、

ダウンロードさえしてもらえなかったのだ。“The Lean Startup” Eric Ries

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

今日の内容

• ウェブサービスってなに？

• ウェブサービスをつくろう

• 成功に近づけるためには

43

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

自分は自分の周りしか見えない

• 男には男の心理が 女には女の心理がある

• 若者には若者の、老人には老人の心理がある

• 学生には学生の、社会人には社会人の心理がある

• 都会人には都会人の、田舎者には田舎者の心理がある

• ビジネスマンにはビジネスマンの、公務員には公務員の心理がある

• ・・・

44

自分が抱えている「痛み」がみんなが抱えている「痛み」だとは限らない。

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

どうやって見つけるのか？

• ヒアリングは大事。

• ただ、新しいモノを作る場合は、実際にモノを使ってもらわないとわからないことも。

45

ex. お花サプライズ！の「お届け係」ex. IMVU の全 IM 統合計画

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

リーンスタートアップ

• 小さい仮説検証を繰り返す。

• 競合を調べる。

• 判断基準をつくる。

46

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

「みんなオンラインで靴を買いたいと思っているはずだ！」Zappos

✕: 大手靴屋さんと配送業者と提携し、注文翌日に靴を届けられるオンラインシステムを 6 ヶ月かけて構築する。注文は全自動化されており、システムは現行の購入フローに最適化されている。

◯: 近所の靴屋さんで写真を撮らせてもらう。それを 2 日で作ったウェブサイトにアップし、注文が入ったら自分の手で決済、配送を行う。人手が必要になったらバイトを雇う。

47

仮説検証のための最小限のプロダクトを MVP (Minimum Viable Product) と呼ぶ。

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

「オンライン募金の仕組みは間違っている！」Groupon

クラウドファンディングサービスからのスタート。

本業は失敗。しかし「共同購入」の力を知る。

毎日激安商品の情報を更新するブログ “Groupon” を開始。共同購入サービスの礎を築いた。

48

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

やってみよう

•解決したい問題• 解決する方法• MVP (ウェブサービスとは限りません)

49

あなたがつくろうとしているウェブサービスについて

を考えてください。

(参考: 電通インターン 2011 選考課題)