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

1. ウェブサービスの企画とデザイン東京大学・オーマ株式会社飯塚修平

2. 自己紹介 •  飯塚修平 @tushuhei •  東京大学工学系研究科技術経営戦略学専攻修士 1 年 23 歳 •  オーマ株式会社執行役員 •  UT Startup Gym 代表 •  Google ウェブマスターインターン

3. http://ponet.us/

4. http://spysee.jp/

5. アイデアをカタチにするプログラム http://ut-gym.jp/

8. 今日の内容 •  復習: ウェブサービスのつくりかた •  ワーク: ウェブサービスを企画してみよう •  講義: ウェブデザイナーが考えていること

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

10. • ページランク彼らが何をや • 行列、ベクトポータル・検索サイト SNS・ソーシャルメディア • ページランク、転 • 行列、ベクトルログイン、フ • • テーブル（E • ログイン、フィー • テーブル（Exce • ボタンを押す Eコマースソーシャルゲーム • ボタンを押す親ウェブサービスのつくりかたウェブサービスのつくりかた

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

12. 彼らが何をやっているのか彼らが何をやっているのかたとえば • ページランク、転置インデックス • 行列、ベクトル世の中のあらゆるデータを整理する: ページランク、転置インデックス • 行列、ベクトルページランク、転置インデックス（行列、ベクトル） • ウェブ上のコニュニケーション: • ログイン、フィード配信ログイン、フィード・投稿機能（Excel みたいなもの） • テーブル（Excel みたいなイメージ） • ログイン、フィード配信 • テーブル（Excel みたいなイメージ）承認欲求を満たすゲーム: 親指運動（ランダムな画像） • ボタンを押す親指運動 • ボタンを押す親指運動

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

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

20. お花サプライズ！の例ェブサービスのつくりかた 30

21. ビジネスプロダクト哲学ペルソナデザインアイデアなぜ今かシナリオデザイン市場規模 IA •  シナリオを再現するために必要な要件を洗い出して、ウェブサイトの見た目をつくっていく。 •  ペルソナの気持ちになることがポイント。

23. ビジネスプロダクト IA 哲学ペルソナアイデアシナリオなぜ今かデザイン市場規模 IA •  どんなサイトマップにするのか？ •  どんなデータの構造にするのか？ •  どんなログインのシステムにするのか？

24. PLAN ACTION DO CHECK

25. ビジネスプロダクト START 哲学ペルソナアイデアシナリオなぜ今かデザイン市場規模 IA でも「哲学」ってなんだろう？「痛み」ってなんだろう？

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

27. 設計における発想支援の役割アイデア発散＜＜＜＜＞＞＞＞＞収束発想支援！思考の展開フェーズ案の評価・実現化フェーズ Matrix法 PDM ブレインストーミング FOA マインドマップ KJ法 LCA CAE QFD CAD VA 機能系統図 DSM TRIZ ﾌﾟﾛﾄﾀｲﾋﾟﾝｸﾞ戦略レベル実行レベル（上流）（下流） DFX 要求リストアップ問題の発見プロトタイプ作成成立性検証コンセプト出し現状記述実現化方策の模索市場投入企画構想アーキテクチャ試行錯誤有効性検証市場性検証 34 京大学工学部システム創成学科知能社会システムコース PSI システム工学基礎 October 8, 2009

28. ブレインストーミングのルール •  量を求める •  他人のアイデアに乗っかる •  奇抜なアイデアを歓迎する •  否定をしない

29. Mission 1 •  最近気になったことをできるだけたくさん書いてください。 •  制限時間 15 分

31. Mission 2 •  他の班の発表を聞いた上で、自分の班の特色だと思うトピックを 2∼3 個選んでください。 •  制限時間 5 分

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

33. はじめの一歩を踏み出そう •  だれでもブログはつくれる •  Google スプレッドシートでかんたんにフォームが作れる •  ちょっと勉強すれば Paypal で課金できる •  無理なら、手作業でもいい。

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

36. デザインの上で僕が大切にしていること •  Design ≠ Art •  Design is Communication •  Design w/ Accessibility

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

38. ストップ戦争平和今すぐ？？『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著

39. ストップ戦争平和今すぐ J 『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著

40. グルーピングしたがる脳ストップ戦争平和今すぐ！『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著

41. 慣れ親しんでいるスタイル →理解しやすいデザイン Proﬁle Feed Ad Proﬁle Feed Ad

42. 配色にも理論がある高明度補色の関係色彩センスのいらない配色講座 Mariko Yamaguchi http://www.slideshare.net/marippe/ss-9003317

43. 配色にも理論がある色彩センスのいらない配色講座 Mariko Yamaguchi http://www.slideshare.net/marippe/ss-9003317

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

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

46. やばいエラーメッセージ

47. これの送信よろしくお願いします。すみません、送信できませんでした。え、なんで？？・・・

48. エラーメッセージの書き方 •  利用者が何をしたのかを告げる •  発生した問題を説明する •  修正方法を指示する •  能動態を使い、平易な言葉で書く •  例を示す『インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』Susan Weinschenk 著

49. ログインフォームが中心非常に小さいスキップボタン

50. オバマさんのことを知りたいんですけどすみません、それにはメールアドレスを教えていただけないと・・・え、じゃいいや。あ、ちょっと待って下さい！それなら結構ですから・・・

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

52. 3. Design w/ Accessibility すべての国、すべてのデバイスからアクセスできるコンテンツをつくる。

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

55. つまり •  「自分も対象なんだな」「自分も読んでいいんだな」と思わせるデザイン。 •  ウェルカムの気持ちを示す。

56. 今日のまとめ •  ウェブサービスのつくりかた –  ビジネス設計: 痛み、解決策、なぜ今か、市場規模 –  プロダクト設計: ペルソナ、シナリオ、デザイン、IA •  ウェブサービスを企画してみよう –  ブレストにもルールがある •  ウェブデザイナーが考えていること –  Design ≠ Art –  Design is Communication –  Design w/ Accessibility

57. •  「へー、そうやって作るんだーなるほど」 •  「もしかしたら自分にも作れるかも？」と感じてもらえたら幸いです

58. Contacts 講義資料: http://tushuhei.com/121218mg.html 飯塚修平 @tushuhei http://facebook.com/tushuhei UT Startup Gym @utgym http://facebook.com/utgym

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

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

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(12)

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

Similar to ウェブサービスの企画とデザイン(20)

More from Shuhei Iitsuka

More from Shuhei Iitsuka(20)

Recently uploaded

Recently uploaded(13)

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