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

2,960 views

Published on

20121218 明治学院大学での講義資料です

Published in: Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,960
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
35
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

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

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

×