1. ペルソナシナリオと
プロトタイプ
飯塚修平
できるだけプロジェクト毎に固まって
座ってください
UT Startup Gym

2. アイデアもかたまったお！(｀・ω・́)
でも何からやればいいのwww
UT Startup Gym

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

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

5. Google News の例
雄一郎 友達といる時間が一番楽しい
雄一郎さんは、都内の大学の経済学部で学んでいる3年生。
AppleのMacbookProを、家と大学で持ち歩いて使用している。ネット、
PCにはそれなりに詳しい。携帯電話はiPhone4。
普段の生活でのネットの利用はTwitterをiPhone上で見ることが一番多い。
サッカーが好きなので毎日、
PCでも携帯でもサ
ッカーのニュースはよく見ている。半分は友達や研究室のメンバーと夕食を外で済ませ、残りの半分は自炊。
年齢: 21歳 ネットワーク環境/利用状況
職業: 大学生
（３年） PC環境: Apple Macbook Pro
専攻: 経済学部 ネットワーク環境: 光ケーブル、Wifi
趣味 読書、
： サッカー観戦 携帯電話: Soft bank iPhone
よく使用するサイト: Googleホームページ、twitter、
住環境 スポニチサッカーニュース
住宅: ワンルームアパート よく使用するソフト: Word, Excel, Power point,
家族: 一人暮らし
（6畳） ブラウザ: Chrome, IE
住所: 東京都東京都文京区（茗荷谷） ネット利用時間
（PC） 週22時間程度
:
携帯電話利用時間: 週1８時間程度
ライフサイクル
移動手段: 地下鉄、徒歩
サイトを使用したい状況
通学時間: 電車25分, 徒歩8分
今夜、簡単に作れるおかず一品のレシピと材料を知りたい。
買い物 スーパー 4日に１度
：
コンビニ 毎日最低１回
：
2011 年度 東京大学情報理工学部 創造情報学連携講義 講義資料より UT Startup Gym

6. Google News の例
よう子 息子と娘が独り立ちするまでは頑張る
よう子さんは、
高校生の息子と中学生の娘がいる専業主婦。旦那さんは都心のオフィスで会社員として働いている。
家では家族共用のデスクトップ型のWindowsPCを利用している。携帯電話は折りたたみ式で、家族と少しの友人とのメール
と電話を利用。 トはPCからしかアクセスしない。
ネッ
サイトには基本的にはブックマークバーからアクセスする。犬の写真共有サイト）その他は、
（ ブラウザのトップに設定されて
いるYahooでニュースを読むのと、
最近はオンラインでできる簡単なパズルゲームをやるのが好き。
毎日、
朝と夕方には食事の準備をするのが日課。
年齢: 46歳
職業: 専業主婦
趣味 ウォーキング
： ネットワーク環境/利用状況
PC環境: Windows XP, Fujitsu
住環境 ネットワーク環境: 光ケーブル、Wifi
住宅: 一戸建て
（駅から徒歩１２分） 携帯電話: au
家族: 4人 よく使用するサイト: Yahoo、犬のサイト、ゲーム
旦那、 （高１）娘
息子 、（中２） よく使用するソフト: Word
その他: 犬(ミニュチュアダックスフ ブラウザ: IE
ンド) ネット利用時間（PC） 週8時間程度
:
住所: 東京都町田市小山町 携帯電話利用時間: 週４時間程度
ライフサイクル サイトを使用したい状況
移動手段: 車、
自転車、 （軽自動車と運
徒歩 息子が野球の試合でいい成績を収めたのでお祝いにいつもとは
転免許を持っている） 違うちょっと豪華な料理を出してあげたい。
買い物 スーパー 3日に１度
：
コンビニ たまに行く程度
：
2011 年度 東京大学情報理工学部 創造情報学連携講義 講義資料より UT Startup Gym

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

8. Google News の例
• 由里子さんは朝 9 時 10 分前にはオフィスに到着し、業務を開始しなければなり
ません。朝は慌ただしくニュースを見ることが出来なくて困っているのですが、
電車の中は満員、途中で地下に入ってしまうこともあるため、なかなか携帯でも
ニュースを確認することが出来ずに困っています。
• オフィスに到着してPCの前に座ってから漸くニュースを見ることが出来ます。し
かし、ずっとニュースを見ていると同僚から・・・
2011 年度 東京大学情報理工学部 創造情報学連携講義 講義資料より UT Startup Gym

9. お花サプライズ！の例
UT Startup Gym

10. お花サプライズ！の例
• 登場人物
• お届け係 (presenter)
• 花を購入する友だち (giver)
• 花を受け取る友だち (presentee)
• 色々なバージョン
• みんなで祝う編／１対１で祝う編
• 購入キャンセルしたい人編 etc.
UT Startup Gym

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

12. GiftNow の例
• サイトでロールモデルを示す例
UT Startup Gym

13. シナリオの妥当性
• 現実的に可能であるかどうか、無理がないか、人間の
心理や行動として自然であるか
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

14. •
–
–
『Web 工学とビジネスモデル 第9回』天野仁史 @amachang より
UT Startup Gym

15. 複数人でやることをオススメします！
ひとりでやると...
- バイアスがかかる
- 悩む
- やばいくらい悩む
UT Startup Gym

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

17. サイトマップ
• サイト全体のページ構造
ナビゲーションやメニューを考える上で重要！
トップ 1
カテゴリ1 カテゴリ2 カテゴリ3 2
商品1 商品2 商品3 3
UT Startup Gym

18. お花サプライズ！の例
- ログインが必要な領域は？
- ユーザによってどう表示をわける？
- 一覧とウィザードどちらが最適？
UT Startup Gym

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

20. iGoogle でガジェットを追加する例
この画面でやること
デザインの理由
↑ワイヤフレーム
2011 年度 東京大学情報理工学部 創造情報学連携講義 講義資料より UT Startup Gym

21. iGoogle でガジェットを追加する例
この画面でやること
デザインの理由
2011 年度 東京大学情報理工学部 創造情報学連携講義 講義資料より UT Startup Gym

22. iGoogle でガジェットを追加する例
この画面でやること
デザインの理由
2011 年度 東京大学情報理工学部 創造情報学連携講義 講義資料より UT Startup Gym

23. 理想的には
• Illustrator や Inkscape で起こしておくと Good
デザインを考えながら HTML, CSS と戦うのは至難の業。 再現 作業に全力を割く。
UT Startup Gym

24. 余談
• Apple 製品のアイコンは絶対に「現実のもの」に即し
ているらしい。
2011 年度 東京大学情報理工学部 創造情報学連携講義 講義資料より UT Startup Gym