More Related Content
Similar to ウェブサービスの企画とデザイン (20)
More from Shuhei Iitsuka (20)
ウェブサービスの企画とデザイン
- 2. 自己紹介
• 飯塚修平 @tushuhei
• 東京大学工学系研究科技術経営戦略
学専攻 修士 1 年 23 歳
• オーマ株式会社執行役員
• UT Startup Gym 代表
• Google ウェブマスターインターン
- 10. • ページランク
彼らが何をや
• 行列、ベクト
ポータル・検索サイト SNS・ソーシャルメディア
• ページランク、転
• 行列、ベクトル
ログイン、フ
•
• テーブル(E
• ログイン、フィー
• テーブル(Exce
• ボタンを押す
Eコマース ソーシャルゲーム
• ボタンを押す親
ウェブサービスのつくりかた
ウェブサービスのつくりかた
- 12. 彼らが何をやっているのか
彼らが何をやっているのか
たとえば
• ページランク、転置インデックス
• 行列、ベクトル
世の中のあらゆるデータを整理する:
ページランク、転置インデックス
• 行列、ベクトル
ページランク、転置インデックス(行列、ベクトル)
•
ウェブ上のコニュニケーション:
• ログイン、フィード配信
ログイン、フィード・投稿機能(Excel みたいなもの)
• テーブル(Excel みたいなイメージ)
•
ログイン、フィード配信
• テーブル(Excel みたいなイメージ)
承認欲求を満たすゲーム:
親指運動(ランダムな画像)
• ボタンを押す親指運動
• ボタンを押す親指運動
- 14. ウェブサービスの設計
ビジネス プロダクト
哲学 ペルソナ
アイデア シナリオ
なぜ今か デザイン
市場規模 IA
実行・開発フェーズへ
Sequoia Venture Capital – Ideas http://www.sequoiacap.com/ideas
東京大学技術経営戦略学専攻 Web 工学とビジネスモデル 2011 天野仁史氏講演講義資料
『Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ』和田裕介著
- 15. ビジネス プロダクト
哲学 ペルソナ
哲学 アイデア
なぜ今か
シナリオ
デザイン
市場規模 IA
サービスの根幹となる思い。
どんな「痛み」を解決するのか、
どんな「欲望」を満たすのか。
「〇〇は楽しい!」
「〇〇なのはおかしい!」
「もっと〇〇したい!」
- 16. ビジネス プロダクト
哲学 ペルソナ
アイデア アイデア
なぜ今か
シナリオ
デザイン
市場規模 IA
哲学を実現するための具体的な方法、アイ
デア。サービスのカテゴリを決定する。
「毎日スマホに〇〇が届く」
「〇〇を共有サイトをつくる」
「〇〇がメールでできるようにする」
- 17. ビジネス プロダクト
哲学 ペルソナ
なぜ今か アイデア
なぜ今か
シナリオ
デザイン
市場規模 IA
そのカテゴリの最近のトレンドは?なぜあ
なたのアイデアが今実現するのか?
ex. カメラを持ち歩いている人は少ないが、ス
マホの普及で全員がカメラを持ち歩く世界に
なった→日本中の〇〇を撮って共有するサー
ビスができる
- 18. ビジネス プロダクト
哲学 ペルソナ
市場規模 アイデア
なぜ今か
シナリオ
デザイン
市場規模 IA
サービスで楽しませる・救うことができる
人、マーケットの規模は?取り組む価値が
あるか?
ex. サービスの対象となる30代既婚女性は約
600万人。シェア 1% として単価 5,000 円/
年だとすると、年商は・・・
- 19. ビジネス プロダクト
哲学 ペルソナ
ペルソナ・シナリオ アイデア
なぜ今か
シナリオ
デザイン
市場規模 IA
• ペルソナ=代表的なユーザ像
• ペルソナがサービスを使う理想的なシーン
をドラマ仕立てで描く
• テキストでも漫画でも動画でもOK
- 21. ビジネス プロダクト
哲学 ペルソナ
デザイン アイデア
なぜ今か
シナリオ
デザイン
市場規模 IA
• シナリオを再現するために必要な要件を
洗い出して、ウェブサイトの見た目をつ
くっていく。
• ペルソナの気持ちになることがポイント。
- 23. ビジネス プロダクト
IA
哲学 ペルソナ
アイデア シナリオ
なぜ今か デザイン
市場規模 IA
• どんなサイトマップにするのか?
• どんなデータの構造にするのか?
• どんなログインのシステムにするのか?
- 25. ビジネス プロダクト
START 哲学 ペルソナ
アイデア シナリオ
なぜ今か デザイン
市場規模 IA
でも「哲学」ってなんだろう?「痛み」ってなんだろう?
- 27. 設計における発想支援の役割
アイデア発散<<<<>>>>>収束
発想支援!
思考の展開フェーズ 案の評価・実現化フェーズ
Matrix法
PDM
ブレインストーミング FOA
マインドマップ KJ法 LCA CAE
QFD
CAD
VA 機能系統図 DSM
TRIZ プロトタイピング
戦略レベル 実行レベル
(上流) (下流)
DFX
要求リストアップ 問題の発見 プロトタイプ作成 成立性検証
コンセプト出し 現状記述 実現化方策の模索 市場投入
企画構想 アーキテクチャ試行錯誤 有効性検証 市場性検証
34
京大学工学部システム創成学科知能社会システムコース
PSI システム工学基礎 October 8, 2009
- 37. 1. Design ≠ Art
「絵の才能とか感性とかないし・・・
デザインなんてできないよ><」
いやいや、デザインは論理的な作業です。
- 38. ストップ 戦争
平和 今すぐ
??
『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著
- 39. ストップ 戦争
平和 今すぐ
J
『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著
- 40. グルーピングしたがる脳
ストップ 戦争
平和 今すぐ
!
『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著
- 42. 配色にも理論がある
高明度 補色の関係
色彩センスのいらない配色講座 Mariko Yamaguchi http://www.slideshare.net/marippe/ss-9003317
- 45. 2. Design is Communication
ウェブサイトがユーザと実際に会話していると
想像すると、見えてくるものがある。
- 48. エラーメッセージの書き方
• 利用者が何をしたのかを告げる
• 発生した問題を説明する
• 修正方法を指示する
• 能動態を使い、平易な言葉で書く
• 例を示す
『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著
- 50. オバマさんのことを
知りたいんですけど
すみません、それに
はメールアドレスを
教えていただけない
と・・・
え、じゃいいや。
あ、ちょっと待って
下さい!それなら結
構ですから・・・
- 52. 3. Design w/ Accessibility
すべての国、すべてのデバイスからアクセスで
きるコンテンツをつくる。
- 56. 今日のまとめ
• ウェブサービスのつくりかた
– ビジネス設計: 痛み、解決策、なぜ今か、市場規模
– プロダクト設計: ペルソナ、シナリオ、デザイン、IA
• ウェブサービスを企画してみよう
– ブレストにもルールがある
• ウェブデザイナーが考えていること
– Design ≠ Art
– Design is Communication
– Design w/ Accessibility