Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
ウェブサービスの 企画とデザイン東京大学・オーマ株式会社    飯塚 修平
自己紹介•  飯塚修平 @tushuhei•  東京大学工学系研究科技術経営戦略   学専攻 修士 1 年 23 歳•  オーマ株式会社執行役員•  UT Startup Gym 代表•  Google ウェブマスターインターン
http://ponet.us/
http://spysee.jp/
アイデアをカタチにするプログラムhttp://ut-gym.jp/
今日の内容•  復習: ウェブサービスのつくりかた•  ワーク: ウェブサービスを企画してみよう•  講義: ウェブデザイナーが考えていること
ウェブサービスのつくりかた
• ページランク                    彼らが何をや                    • 行列、ベクトポータル・検索サイト   SNS・ソーシャルメディア                      • ページランク、転  ...
まず•  ウェブサービスつくるのって難しそう・・・•  そもそも、何をやっているの?
彼らが何をやっているのか彼らが何をやっているのか     たとえば• ページランク、転置インデックス• 行列、ベクトル       世の中のあらゆるデータを整理する:	    ページランク、転置インデックス• 行列、ベクトル       ページ...
つまり•  技術的なハードルは低くなっている。•  技術うんぬんより「何をつくるか」が大事。
ウェブサービスの設計                                ビジネス                        プロダクト                                      哲学       ...
ビジネス   プロダクト                    哲学     ペルソナ           哲学      アイデア                   なぜ今か                           シナリオ  ...
ビジネス   プロダクト                          哲学     ペルソナ         アイデア            アイデア                         なぜ今か               ...
ビジネス    プロダクト                      哲学     ペルソナ       なぜ今か          アイデア                     なぜ今か                          ...
ビジネス   プロダクト                          哲学     ペルソナ         市場規模            アイデア                         なぜ今か               ...
ビジネス   プロダクト                    哲学     ペルソナ    ペルソナ・シナリオ      アイデア                   なぜ今か                           シナリオ  ...
お花サプライズ!の例ェブサービスのつくりかた   30
ビジネス   プロダクト                    哲学     ペルソナ        デザイン       アイデア                   なぜ今か                           シナリオ  ...
ビジネス   プロダクト          IA                    哲学     ペルソナ                   アイデア    シナリオ                   なぜ今か    デザイン     ...
PLANACTION           DO         CHECK
ビジネス   プロダクト START    哲学     ペルソナ         アイデア    シナリオ         なぜ今か    デザイン         市場規模     IAでも「哲学」ってなんだろう?「痛み」ってなんだろう?
ウェブサービスを企画してみよう
設計における発想支援の役割     アイデア発散<<<<>>>>>収束                            発想支援!     思考の展開フェーズ                                      案の...
ブレインストーミングのルール•  量を求める•  他人のアイデアに乗っかる•  奇抜なアイデアを歓迎する•  否定をしない
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「絵の才能とか感性とかないし・・・デザインなんてできないよ><」いやいや、デザインは論理的な作業です。
ストップ                            戦争                    平和                     今すぐ                                 ??『インタフェー...
ストップ                            戦争                    平和                     今すぐ                                     J『イン...
グルーピングしたがる脳              ストップ                            戦争                    平和                     今すぐ                 ...
慣れ親しんでいるスタイル            →理解しやすいデザインProfile   Feed   Ad   Profile   Feed   Ad
配色にも理論がある                                                     高明度              補色の関係色彩センスのいらない配色講座 Mariko Yamaguchi http:/...
配色にも理論がある色彩センスのいらない配色講座 Mariko Yamaguchi http://www.slideshare.net/marippe/ss-9003317
つまり•  才能や感性ではない。•  いかに定石を組み合わせて、目標を達成す   るかを論理的に考える作業。
2. Design is Communicationウェブサイトがユーザと実際に会話していると想像すると、見えてくるものがある。
やばいエラーメッセージ
これの送信よろしく	   お願いします。                すみません、送信で                 きませんでした。 え、なんで??                  ・・・	  
エラーメッセージの書き方   •    利用者が何をしたのかを告げる   •    発生した問題を説明する   •    修正方法を指示する   •    能動態を使い、平易な言葉で書く   •    例を示す『インタフェースデザインの心理学 ...
ログインフォームが中心     非常に小さいスキップボタン
オバマさんのことを知りたいんですけど            すみません、それに            はメールアドレスを            教えていただけない               と・・・え、じゃいいや。            あ、...
つまり•  ユーザのウェブサイトの対話を考えると、   また使いたくなるデザインが見えてくる。
3. Design w/ Accessibilityすべての国、すべてのデバイスからアクセスできるコンテンツをつくる。
レスポンシブデザインMobile   Tablet       PC
つまり•  「自分も対象なんだな」「自分も読んでい   いんだな」と思わせるデザイン。•  ウェルカムの気持ちを示す。
今日のまとめ•  ウェブサービスのつくりかた –  ビジネス設計: 痛み、解決策、なぜ今か、市場規模 –  プロダクト設計: ペルソナ、シナリオ、デザイン、IA•  ウェブサービスを企画してみよう –  ブレストにもルールがある•  ウェブデザ...
•  「へー、そうやって作るんだーなるほど」•  「もしかしたら自分にも作れるかも?」と感じてもらえたら幸いです
Contacts講義資料: http://tushuhei.com/121218mg.html        飯塚修平            @tushuhei            http://facebook.com/tushuhei  ...
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
Prochain SlideShare
Chargement dans…5
×
Prochain SlideShare
UT Startup Gym で人生が変わった話
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

26

Partager

Télécharger pour lire hors ligne

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

Télécharger pour lire hors ligne

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

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

  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
  • MuneoOsumi

    Jun. 4, 2018
  • IkkiTamura

    Jul. 23, 2017
  • yutakakomagata

    May. 2, 2016
  • ssuserea08b31

    Mar. 10, 2016
  • masahiromoto9

    May. 8, 2015
  • kuraryo

    Nov. 11, 2014
  • onelineca

    Jul. 27, 2014
  • takahirosatou5686

    Jul. 20, 2014
  • charaku

    Jul. 7, 2014
  • TAKU_YEAH

    Jul. 6, 2014
  • shotalow

    Jul. 6, 2014
  • hiragajyyh

    Jul. 6, 2014
  • geroppa

    Jul. 6, 2014
  • pondlab

    Jul. 6, 2014
  • ssuser734568

    Jul. 5, 2014
  • HirokatsuOgawa

    Jul. 5, 2014
  • daisukekonishi750

    Jul. 5, 2014
  • hirochikat

    Mar. 1, 2014
  • kantaakiyama

    Feb. 1, 2014
  • fujico5522

    Sep. 7, 2013

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

Vues

Nombre de vues

3 538

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

49

Actions

Téléchargements

35

Partages

0

Commentaires

0

Mentions J'aime

26

×