ウェブサービスの 企画とデザイン

東京大学・オーマ株式会社 飯塚 修平

自己紹介

•  飯塚修平 @tushuhei

•  東京大学工学系研究科技術経営戦略学専攻 修士 1 年 23 歳

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

•  UT Startup Gym 代表

•  Google ウェブマスターインターン

http://ponet.us/

http://spysee.jp/

アイデアをカタチにするプログラム

http://ut-gym.jp/

今日の内容

•  復習: ウェブサービスのつくりかた

•  ワーク: ウェブサービスを企画してみよう

•  講義: ウェブデザイナーが考えていること

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

ポータル・検索サイト SNS・ソーシャルメディア

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

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

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

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

• ボタンを押す親指運動Eコマース ソーシャルゲーム

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

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

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

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

• ボタンを押す親指運動

まず

•  ウェブサービスつくるのって難しそう・・・ •  そもそも、何をやっているの？

世の中のあらゆるデータを整理する:  ページランク、転置インデックス（行列、ベクトル）

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

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

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

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

• ボタンを押す親指運動

ウェブ上のコニュニケーション:  ログイン、フィード・投稿機能（Excel みたいなもの）  

承認欲求を満たすゲーム:  親指運動（ランダムな画像）  

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

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

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

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

• ボタンを押す親指運動

たとえば

つまり

•  技術的なハードルは低くなっている。 •  技術うんぬんより「何をつくるか」が大事。

ビジネス

哲学

アイデア

なぜ今か

市場規模

プロダクト

ペルソナ

シナリオ

デザイン

IA

実行・開発フェーズへ Sequoia Venture Capital – Ideas http://www.sequoiacap.com/ideas 東京大学技術経営戦略学専攻 Web 工学とビジネスモデル 2011 天野仁史氏講演講義資料 『Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ』和田裕介著

ウェブサービスの設計

哲学

サービスの根幹となる思い。 どんな「痛み」を解決するのか、 どんな「欲望」を満たすのか。

ビジネス

哲学

アイデア

なぜ今か

市場規模

プロダクト

ペルソナ

シナリオ

デザイン

IA

「〇〇は楽しい！」  「〇〇なのはおかしい！」  「もっと〇〇したい！」  

アイデア

哲学を実現するための具体的な方法、アイデア。サービスのカテゴリを決定する。

ビジネス

哲学

アイデア

なぜ今か

市場規模

プロダクト

ペルソナ

シナリオ

デザイン

IA

「毎日スマホに〇〇が届く」 「〇〇を共有サイトをつくる」  「〇〇がメールでできるようにする」  

なぜ今か

そのカテゴリの最近のトレンドは？なぜあなたのアイデアが今実現するのか？

ビジネス

哲学

アイデア

なぜ今か

市場規模

プロダクト

ペルソナ

シナリオ

デザイン

IA

ex. カメラを持ち歩いている人は少ないが、スマホの普及で全員がカメラを持ち歩く世界になった→日本中の〇〇を撮って共有するサービスができる

市場規模

サービスで楽しませる・救うことができる人、マーケットの規模は？取り組む価値があるか？

ビジネス

哲学

アイデア

なぜ今か

市場規模

プロダクト

ペルソナ

シナリオ

デザイン

IA

ex. サービスの対象となる30代既婚女性は約600万人。シェア 1% として単価 5,000 円/年だとすると、年商は・・・

ペルソナ・シナリオ

•  ペルソナ＝代表的なユーザ像 •  ペルソナがサービスを使う理想的なシーンをドラマ仕立てで描く

•  テキストでも漫画でも動画でもOK

ビジネス

哲学

アイデア

なぜ今か

市場規模

プロダクト

ペルソナ

シナリオ

デザイン

IA

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

お花サプライズ！の例

30

デザイン

•  シナリオを再現するために必要な要件を洗い出して、ウェブサイトの見た目をつくっていく。

•  ペルソナの気持ちになることがポイント。

ビジネス

哲学

アイデア

なぜ今か

市場規模

プロダクト

ペルソナ

シナリオ

デザイン

IA

IA

•  どんなサイトマップにするのか？ •  どんなデータの構造にするのか？ •  どんなログインのシステムにするのか？

ビジネス

哲学

アイデア

なぜ今か

市場規模

プロダクト

ペルソナ

シナリオ

デザイン

IA

PLAN

DO

CHECK

ACTION

ビジネス

哲学

アイデア

なぜ今か

市場規模

プロダクト

ペルソナ

シナリオ

デザイン

IA

でも「哲学」ってなんだろう？「痛み」ってなんだろう？

START

ウェブサービスを企画してみよう

設計における発想支援の役割 アイデア発散＜＜＜＜＞＞＞＞＞収束 思考の展開フェーズ 案の評価・実現化フェーズ

FOA

DFX

CAE LCA

TRIZ

QFD DSM VA

CAD

ﾌﾟﾛﾄﾀｲﾋﾟﾝｸﾞ

PDM

機能系統図

企画構想 コンセプト出し 要求リストアップ 問題の発見

アーキテクチャ試行錯誤 実現化方策の模索

プロトタイプ作成

有効性検証

成立性検証

市場性検証 市場投入

戦略レベル （上流）

実行レベル （下流）

現状記述

Matrix法

マインドマップ KJ法 ブレインストーミング

発想支援！

October 8, 2009 34 PSI システム工学基礎 東京大学工学部システム創成学科知能社会システムコース システム工学基礎2009講義資料

ブレインストーミングのルール

•  量を求める •  他人のアイデアに乗っかる •  奇抜なアイデアを歓迎する

•  否定をしない

Mission 1 •  最近気になったことをできるだけたくさん書いてください。

•  制限時間 15 分

Mission 2 •  他の班の発表を聞いた上で、自分の班の特色だと思うトピックを 2～3 個選んでください。

•  制限時間 5 分

Mission 3 •  最後に、Mission 2 で選んだトピックをさらに良くするために何ができるか、アイデアを出して下さい。

•  制限時間 15 分

はじめの一歩を踏み出そう

•  だれでもブログはつくれる •  Google スプレッドシートでかんたんにフォームが作れる

•  ちょっと勉強すれば Paypal で課金できる

•  無理なら、手作業でもいい。

ウェブデザイナーが考えていること

デザインの上で僕が大切にしていること

•  Design ≠ Art •  Design is Communication •  Design w/ Accessibility

1. Design ≠ Art 「絵の才能とか感性とかないし・・・ デザインなんてできないよ＞＜」 いやいや、デザインは論理的な作業です。

ストップ 戦争

平和 今すぐ

？？ 『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著

ストップ 戦争

平和 今すぐ

J 『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著

ストップ 戦争

平和 今すぐ

！

グルーピングしたがる脳

『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著

Profile Feed Ad Profile Feed Ad

慣れ親しんでいるスタイル →理解しやすいデザイン

配色にも理論がある

補色の関係 高明度

色彩センスのいらない配色講座 Mariko Yamaguchi http://www.slideshare.net/marippe/ss-9003317

配色にも理論がある

色彩センスのいらない配色講座 Mariko Yamaguchi http://www.slideshare.net/marippe/ss-9003317

•  才能や感性ではない。 •  いかに定石を組み合わせて、目標を達成するかを論理的に考える作業。

つまり

2. Design is Communication

ウェブサイトがユーザと実際に会話していると想像すると、見えてくるものがある。

やばいエラーメッセージ

これの送信よろしく  お願いします。

すみません、送信できませんでした。

え、なんで？？

・・・  

•  利用者が何をしたのかを告げる •  発生した問題を説明する •  修正方法を指示する •  能動態を使い、平易な言葉で書く •  例を示す

エラーメッセージの書き方

『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著

ログインフォームが中心

非常に小さいスキップボタン

オバマさんのことを知りたいんですけど

すみません、それにはメールアドレスを教えていただけない

と・・・

え、じゃいいや。

あ、ちょっと待って下さい！それなら結構ですから・・・  

•  ユーザのウェブサイトの対話を考えると、また使いたくなるデザインが見えてくる。

つまり

3. Design w/ Accessibility

すべての国、すべてのデバイスからアクセスできるコンテンツをつくる。

レスポンシブデザイン Mobile Tablet PC

•  「自分も対象なんだな」「自分も読んでいいんだな」と思わせるデザイン。

•  ウェルカムの気持ちを示す。

つまり

今日のまとめ

•  ウェブサービスのつくりかた –  ビジネス設計: 痛み、解決策、なぜ今か、市場規模

–  プロダクト設計: ペルソナ、シナリオ、デザイン、IA

•  ウェブサービスを企画してみよう –  ブレストにもルールがある

•  ウェブデザイナーが考えていること –  Design ≠ Art

–  Design is Communication

–  Design w/ Accessibility

•  「へー、そうやって作るんだーなるほど」 •  「もしかしたら自分にも作れるかも？」

と感じてもらえたら幸いです

Contacts

@tushuhei

飯塚修平

http://facebook.com/tushuhei

@utgym

UT Startup Gym

http://facebook.com/utgym

講義資料: http://tushuhei.com/121218mg.html