ペルソナシナリオとプロトタイプ２
TRANSCRIPT
UT Startup Gym
ペルソナシナリオとプロトタイプ
飯塚修平
UT Startup Gym
UT#Startup#Gym#とは？
アイデアをカタチにするプログラム
2012/11/17 UT Startup Gym 2
! プロジェクト#! 企画から実装まで#! スタートアップ
UT Startup Gym
スケジュール
2012/11/17 UT Startup Gym 3
Oct,%12 • プログラミング入門
Nov,%12 • プラニング • プロジェクトスタート
Dec,%12 • 開発開始 • 冬季開発合宿
Jan,%13 • ウェブデザイン • 週間報告会
Feb,%13 • jQuery,%中間発表
Mar,%13 • 作業会
Apr,%13 • リリース会
ソーシャルウェブアプリケーション,%API,%bot,%HTML5
Keywords:*
リーンスタートアップ,%ビジネスプラニング,%HTML,%CSS,%PHP,%javascript
チーム結成,%企画,%ディスカッション%git,%フレームワーク,%MySQL,%Apache%
シナリオ,%ペルソナ,%ワイヤフレーム,%%サイトマップ,%DB%スキーム%
ゲーミフィケーション,%仮説検証,%データマイニング,%アクセシビリティ%
レスポンシブデザイン,%プレゼンテーション%
�� �� 講師（敬称略） タイトル 要素 ��� ��飯塚 かんたん �&()'11.�アプリをつくる �!����� ��-4�
���飯塚 かんたん !8,55)3�アプリをつくる "��%��7,/������
;� � ���� <B>B�CIEJFGDJHA?=@� �: �����#��
��� ��$ �堀内様 �$ �ハンズオン勉強会 �$ ���飯塚・石村 スタートアップの心構え ビジネスプラン、リーンスタートアップ � �飯塚 プロダクトデザイン シナリオ、ペルソナ、ワイヤフレーム �� お休み（飯塚�ジャカルタ） ��� ��和田・前原 ウェブサービスの企画のコツ 企画プロセス、ウェブサービス運用� �� プロジェクトキックオフ アンカンファレンス� ���未定 チームでけんかをしないコード管理術 �,5�
��� ハッカソン �� ���石村 ユーザがハマるアプリデザイン ゲーミフィケーション
���飯塚 かんたん・きれい・便利なウェブデザイン !8,55)3��115453&2���)42104,7)��)4,*0���� �
���天野�13�大澤 ウェブから情報を集める (310��92&5+�
�� ��斎藤 アニメーションをつくる -&7&4(3,25��-�6)3:�
��ゲスト ゲストスピーカー � ��� 中間発表
作業会 �� プレゼンテーション
��� リリース会 2012/11/17 UT Startup Gym 4
UT Startup Gym
前回の簡単なおさらい• ウェブサービスを考えるフレームワーク
1. 痛み2. 解決法3. Why Now?4. 市場規模5. Why Us?6. ビジネスモデル7. チーム
• 不確実な状況で仮説検証を繰り返していく。
• リーンスタートアップ
UT Startup Gym
©R¤ÄË��º�»Ê�R¤ÈÏ�Ŀ�]�
� ��°��
�� ¸¥µ¦»ÉÏ�
�� ½Ë©³K¤³Ê��
� ½R¥°£�ÏK¢�±¿»�
�� �R�¯�¬ÄK¦�R¿K�ˡʧÁ�
�� »Í�ÉÀÏ���I����Z.Z ����S��JHJ��� ��������Y�����S�
『Web 工学とビジネスモデル 第9回』天野仁史 @amachang より
UT Startup Gym
ペルソナ• ペルソナ = 代表的なユーザー像
• サイトの機能を再現するのに必要な登場人物数は？
• 細かい性格や言動も考える- 口癖、交友関係、職業病 etc.
• 日常生活とウェブの関わり方は？- 通勤通学中、仕事中、料理中 etc.
• 具体的なほどよい。友だちにモデルがいるといいかも。
『Web 工学とビジネスモデル 第9回』天野仁史 @amachang より
UT Startup Gym
シナリオ• ペルソナとサービスの理想的なインタラクションをストーリーに
する-> システムの振る舞いおよび必要な機能を明確にする！
• 感情の動きと行動を結びつけて記す
• テキストが一般的だが、漫画やビデオなど形態は何でもよい
• 複数人のペルソナのインタラクションを考える-> 伏線の設計が非常に大事
黒須正明. 『マイクロシナリオ手法』メディア教育開発センター (NIME) 研究報告. 2006.
「なぜ、どうやってそのユーザはあなたのサイトに来るの？」
UT Startup Gym
お花サプライズ！の例
UT Startup Gym
お花サプライズ！の例• 登場人物
• お届け係 (presenter)
• 花を購入する友だち (giver)
• 花を受け取る友だち (presentee)
• 様々なシチュエーション
• みんなで祝う編／１対１で祝う編
• 購入キャンセルしたい人編 etc.
UT Startup Gym
お花サプライズ！の例俊一は大学の講義中暇だったので MacBook で Facebook を開いた。ニュースフィードを眺めていると、砂田から以下のようなフォードが流れてきた。さおりの誕生日が近いから花を贈ってみた。 条さおりさんの誕生日にみんなで花を贈ろう! ソーシャルフラワーギフトで... <以下 Discription は要検討>というフィードが流れてきた。- フィードにはさおりの顔写真がついていた。- さおりさんには見えないようにプライバシー設定が施されている。 - 砂田くんは大学は異なるが、教習所で会って仲良くなった。- たまに3人で昼飯を食べたりした間柄。「あ、さおりさんの顔写真が流れてる。どうしたんだろ? え、なんで砂田が花とか贈ってるの?? え、ていうかなんのサービスこれ?」と俊一は疑問に思った。- 一応さおりとは Facebook のアカウントを交換するくらいの関係にはなっている。気になった俊一は、とりあえずフィードのリンクをクリックしてみた。クリックすると、『茨城のクー ルビューティー、条さおりに100本の花束を贈ろう!』と題されたページが目に飛び込んできた。-「面白いサプライズ企画に自分も乗れる!」と感じてもらう- タイトル、説明→自分も乗っていいんだ!- プレゼンティーの顔が見える→〇〇に贈ることが出来るんだ。喜ばせたい。- 期限がある→すぐやんなきゃ。- みんなのメッセージ→みんなもいて、面白そう。自分も乗れる。喜ばせたい。- 花束の本数→花束をあげるという事実→自分のきもちを伝えられる。知ってもらえる。喜ばせたい。
UT Startup Gym
シナリオの妥当性• 現実的に可能であるかどうか、無理がないか、人間の
心理や行動として自然であるか
A 子さんは B 駅へ急いでいる。いつもより 10 分早く家を出たのは、定期券を買うためだ。 急ぎすぎて、ストッキングを伝線させた。構わぬ急げ。髪はすこし乱れたが、いつもの快速 に間にあった。A 子さんは C 駅で降りる。C 駅の構内にある D という店で、ストッキングを 買う。C 駅から徒歩 5 分のオフィスで、始業前にはき替える。---ふーっ。今日も終わった。友人との待ち合わせの E 駅までは、C 駅から 4 駅。E 駅に着いたら、待ち合わせまでに時間 もあるから、駅ビルの F という本屋で、アレとアレを買おう。友人とあったら G へ行こう。 雑誌で見たイタリアンだ。---ふーっ。食った飲んだ。友人と別れたあと、構内の H という 薬屋で胃薬を買う。飲む。帰りの電車で、居眠りをする。B 駅に着いたら、10 時だった。改 札口を出たところにある I というケーキ屋を横目で見ながら、後ろ髪引かれながら、家路へ。 のつもりが、やっぱりチーズケーキを買う。A 子さんは B から I までビューカード。
黒須正明. 『マイクロシナリオ手法』メディア教育開発センター (NIME) 研究報告. 2006.
UT Startup Gym
¤³Ê�K½Ë©³�
• x�yzũ\v\uKǒ\¤³Ê�i`Ń^��ydu�ť\��}¿¤�– g�ay\w»Í�ÉÁåyŊb�kh�K°£�³R|�¡v¢�±|�ĝďaǥ��
– g�a[�qevKğ|�ņUâŀV�ÇR£R|řĹK�ĂzĚbƷm��
『Web 工学とビジネスモデル 第9回』天野仁史 @amachang より
UT Startup Gym
複数人でやることをオススメします！ひとりでやると...- バイアスがかかる- 悩む- やばいくらい悩む
UT Startup Gym
©R¤ÄË��º�»Ê�R¤ÈÏ�Ŀ�]�
� ��°��
�� ¸¥µ¦»ÉÏ�
�� ½Ë©³K¤³Ê��
� ½R¥°£�ÏK¢�±¿»�
�� �R�¯�¬ÄK¦�R¿K�ˡʧÁ�
�� »Í�ÉÀÏ���I����Z.Z ����S��JHJ��� ��������Y�����S�
『Web 工学とビジネスモデル 第9回』天野仁史 @amachang より
UT Startup Gym
サイトマップ• サイト全体のページ構造
ナビゲーションやメニューを考える上で重要！
トップ
カテゴリ1 カテゴリ2 カテゴリ3
商品1 商品2 商品3
1
2
3
UT Startup Gym
お花サプライズ！の例
- ログインが必要な領域は？- ユーザによってどう表示をわける？- 一覧とウィザードどちらが最適？
UT Startup Gym
ページデザイン• シナリオにそってページを作っていく
• シナリオの中で発生すべき感情を、メモとしてそのページに記録しておく
• ペルソナの気持ちになってもう一度そのページを�直して、どういう感情になるか考えてみる
• 分かりやすいサイトを目指す
UT Startup Gym
理想的には• Illustrator や Inkscape で起こすと Good
デザインを考えながら HTML, CSS と戦うのは至難の業。 “再現”作業に全力を割く。ワイヤフレームは情報の優先順位を示すものであって、デザインを示すものではない。
UT Startup Gym
©R¤ÄË��º�»Ê�R¤ÈÏ�Ŀ�]�
� ��°��
�� ¸¥µ¦»ÉÏ�
�� ½Ë©³K¤³Ê��
� ½R¥°£�ÏK¢�±¿»�
�� �R�¯�¬ÄK¦�R¿K�ˡʧÁ�
�� »Í�ÉÀÏ���I����Z.Z ����S��JHJ��� ��������Y�����S�
『Web 工学とビジネスモデル 第9回』天野仁史 @amachang より
UT Startup Gym
アーキテクチャ• サーバ構成、テーブル定義、フレームワークetc.
• 練習と慣れが必要な部分
• ex. たとえば２ちゃんねるのテーブル定義は？
UT Startup Gym
プログラミング• がんばって学んで行きましょう！
UT Startup Gym
ただ、あくまで柔軟に• リーンスタートアップの考え方に立ち返って。• 本当にデータベース作る必要ある？• Google Drive で十分じゃないか？• シナリオの頭の小さなズレが、後半の大きなズレにつ
ながる。
• まず、最初にぶちあたる「価値仮説」を検証できているのか？• ex. ウィッシュリスト制ギフトサービスだったら？
UT Startup Gym
ワーク• 仮説「友だち内で本の貸し借りができるサービスがで
きればいいんじゃないか」
• 検証方法: チームメンバー（大学生３人）の本棚にある本を掲載したウェブサイトをMVPとして製作する。「借りたい」ボタンのクリック率が 20 %を超えたら検証されたとみなす。
• どんなウェブサイトをつくりますか？
• もし、他のアイデアが良ければそれでも可
UT Startup Gym
wrap up• 「借りたい」と思うユーザに最適な要素を提供できているか？
• 本の写真, 本のタイトル, 貸す側の情報
• お手本としてのセブマート (http://yurikokai.com/cebumart/)「海外のモノを安く買いたい」という仮説は検証された。「直接の知り合いでなくても買ってもらえる」という仮説は検証された。（あくまでこのウェブサービスでは）
• ここで得られた「何が売れたのか」という学びがこのサービスの強みになっていく
UT Startup Gym
wrap up• 実際に考え始めるとアイデアが発散する。
• 大学の本の教科書にピボットするかもしれない
• 「あの有名な人」の本が読めるサービスにピボットするかもしれない
• 貸す側は「他人」なのか？「友人」なのか？
• → A/B テスト（コホート分析）で決定していく部分
• 検証方法
• 教科書のクリック率が高かった。
• 知り合いの知り合いの有名人にも本棚を登録してもらったら、クリック率が高かった。
• Facebook 上の本名と顔写真を載せたものと載せていないものでクリック率に差が生じた。
• 大切なことは、その時々でしっかりと仮説を置いてペルソナを設定し、MVPをつくること。
UT Startup Gym
wrap up• やってみると非常に細かいところが気になりだす
• 返却方法、個人情報、輸送方法・・・
• はじめはバックエンドは手作業でもいい
• ひとりひとりメールで対応する
• 着払いで郵送してもらう
• やってみると、先人たちが断念した崖が見えてくる。
• 確実に返してもらうための仕組みづくりが難しい etc.
• 逆に、ここが Why Now? で説明できると強い。
• 電子書籍にしてしまえばその心配がなくなるかもしれない
UT Startup Gym
余談: Skeuomorphism
• Apple 製品のアイコンは「現実のもの」に即している。
2011 年度 東京大学情報理工学部 創造情報学連携講義 講義資料より
UT Startup Gym
余談: Skeuomorphism
• ただ、その傾向も変わりつつある。