Download as PDF, PPTX
More Related Content
![[ESM_CM セミナー]小さく作って大いに役立つスマートフォンアプリ(CYCLONE)公開用](https://cdn.slidesharecdn.com/ss_thumbnails/withesmsmartphoneapplicationandcyclonecodename1000-111207215903-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
ウェブサービスの企画とデザイン
- 1.
- 2. 自己紹介 • 飯塚修平 @tushuhei • 東京大学工学系研究科技術経営戦略 学専攻 修士 1 年 23 歳 • オーマ株式会社執行役員 • UT Startup Gym 代表 • Google ウェブマスターインターン
- 3.
- 4.
- 5.
- 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.
- 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 • 最後に、Mission2 で選んだトピックをさ らに良くするために何ができるか、アイデ アを出して下さい。 • 制限時間 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. 慣れ親しんでいるスタイル →理解しやすいデザイン Profile Feed Ad Profile Feed Ad
- 42. 配色にも理論がある 高明度 補色の関係 色彩センスのいらない配色講座 Mariko Yamaguchi http://www.slideshare.net/marippe/ss-9003317
- 43. 配色にも理論がある 色彩センスのいらない配色講座 Mariko Yamaguchihttp://www.slideshare.net/marippe/ss-9003317
- 44. つまり • 才能や感性ではない。 • いかに定石を組み合わせて、目標を達成す るかを論理的に考える作業。
- 45. 2. Design isCommunication ウェブサイトがユーザと実際に会話していると 想像すると、見えてくるものがある。
- 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