basecamp NAGOYA   2012年9月21日           長谷川恭久
ハ セ   ガ   ワ   ヤ   ス   ヒ   サ長谷川恭久@yhassy
ハ セ   ガ   ワ   ヤ   ス   ヒ   サ長谷川恭久@yhassy
‣ 予測がしやすい利用者環境                   ‣ 共有しているノウハウが多い                   ‣ スクリーンが大きい                   ‣ キーボードとマウスによるインプットby Mar...
‣  利用環境が大幅に異なる‣ まだ新しい分野‣ スクリーンが小さい‣ 指を使ったインタラクション                  by Ed Yourdon
‣ 静的‣ 線ではなく点になりがち‣ 完成品の設計図と見られることも
‣ 見て触れることができる‣ 問題定義や、解決への糸口‣ 全体を見渡して考慮できる‣ デザインプロセスのオープン化
アイデア   文章   カンプ/モック   プロトタイプ   ビデオ抽象的                                        具体的
プレゼン 紙        ツールFlashFlex    HTML
ペーパープロトタイプの  目的
1   アイデアの共有2   簡易ユーザビリティテスト
‣ 様々な人が参加できる‣ 特別な機材がなくても始めることができる‣ 専門知識を必要としない‣ コストがかからない‣ 作った即時に評価ができる‣ 無駄のない資料制作につながる
‣ インタラクションが分かり難い‣ リモートでの共有ができない‣ ビジュアルの影響を評価できない
‣ 白紙・テンプレート紙‣ ウィジェット ・ マグネット‣ Post-it ノート‣ 鉛筆・ペン‣ テープ・のり
http://www.uistencils.com
http://960.gs/
http://konigi.com/tools/graph-paper
http://www.webresourcesdepot.com/wireframe-          magnets-for-easy-prototyping-diy-kit/
http://www.raincreativelab.com/paperbrowser/
http://www.henkwijnholds.com/mbti-sketching-paper-ideation/
http://erikloehfelm.blogspot.jp/2009/05/iphone-ux-sketch-templates.html
http://www.flickr.com/photos/owaters/3846053408/
http://www.creativesoutfitter.com/product/34/dot-grid-book
http://incompetech.com/graphpaper/
by Simon Collison
‣ 見た目ではなく全体の流れ‣ 取捨選択・プライオリティを決める‣ UIとコンテンツのバランス‣ タッチとジェスチャーを活用
‣ 見た目ではなく全体の流れ‣ 取捨選択・プライオリティを決める‣ UIとコンテンツのバランス‣ タッチとジェスチャーを活用
画像          受け取り予測タイトル        欲しいものリスト値段          こんな商品カートに入れる     一緒に購入1-Click購入   製品説明プライム購入      仕様中古品購入       レビュー中身を見...
画像          受け取り予測タイトル        欲しいものリスト値段          こんな商品カートに入れる     一緒に購入1-Click購入   製品説明プライム購入      仕様中古品購入       レビュー中身を見...
‣ 最も重要なタスクは何かを検討‣ タスクを補助する要素を残す‣ 利用シナリオを想定‣ 個々の見た目ではなく利用フローを考慮
‣ 最も重要なタスク‣ タスクを補助する要素‣ 利用シナリオ‣ 利用フローを考慮
‣ インスピレーションの宝庫‣ アウトプットで見つかる改善の糸口‣ ユーザビリティテストにも挑戦‣ 適材適所でペーパープロトタイプ
http://www.youtube.com/prototyprs
長谷川恭久    @yhassymail@yasuhisa.comwww.yasuhisa.com
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
Upcoming SlideShare
Loading in...5
×

プロトタイピングからはじめよう

7,394

Published on

パソコン向けにだけ Web サイトを作っていた頃はあまり必要性を感じられなかったプロトタイピングも、Webへアクセスする方法が増えてきたころから、その必要性も高まりつつあります。パソコン向けに絞ったとしても複雑なインタラクションを絵だけで共有するのが難しくなってきました。余計な書類を減らし、課題が具体的に見えてくるプロトタイプの魅力と活用を紹介。今回はプロトタイプの中でもペーパープロトタイピングにスポットを当てて、メリット・デメリットを解説します。

Published in: Design
0 Comments
46 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,394
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
46
Embeds 0
No embeds

No notes for slide

プロトタイピングからはじめよう

  1. 1. basecamp NAGOYA 2012年9月21日 長谷川恭久
  2. 2. ハ セ ガ ワ ヤ ス ヒ サ長谷川恭久@yhassy
  3. 3. ハ セ ガ ワ ヤ ス ヒ サ長谷川恭久@yhassy
  4. 4. ‣ 予測がしやすい利用者環境 ‣ 共有しているノウハウが多い ‣ スクリーンが大きい ‣ キーボードとマウスによるインプットby Martino Sabia
  5. 5. ‣  利用環境が大幅に異なる‣ まだ新しい分野‣ スクリーンが小さい‣ 指を使ったインタラクション by Ed Yourdon
  6. 6. ‣ 静的‣ 線ではなく点になりがち‣ 完成品の設計図と見られることも
  7. 7. ‣ 見て触れることができる‣ 問題定義や、解決への糸口‣ 全体を見渡して考慮できる‣ デザインプロセスのオープン化
  8. 8. アイデア 文章 カンプ/モック プロトタイプ ビデオ抽象的 具体的
  9. 9. プレゼン 紙 ツールFlashFlex HTML
  10. 10. ペーパープロトタイプの 目的
  11. 11. 1 アイデアの共有2 簡易ユーザビリティテスト
  12. 12. ‣ 様々な人が参加できる‣ 特別な機材がなくても始めることができる‣ 専門知識を必要としない‣ コストがかからない‣ 作った即時に評価ができる‣ 無駄のない資料制作につながる
  13. 13. ‣ インタラクションが分かり難い‣ リモートでの共有ができない‣ ビジュアルの影響を評価できない
  14. 14. ‣ 白紙・テンプレート紙‣ ウィジェット ・ マグネット‣ Post-it ノート‣ 鉛筆・ペン‣ テープ・のり
  15. 15. http://www.uistencils.com
  16. 16. http://960.gs/
  17. 17. http://konigi.com/tools/graph-paper
  18. 18. http://www.webresourcesdepot.com/wireframe- magnets-for-easy-prototyping-diy-kit/
  19. 19. http://www.raincreativelab.com/paperbrowser/
  20. 20. http://www.henkwijnholds.com/mbti-sketching-paper-ideation/
  21. 21. http://erikloehfelm.blogspot.jp/2009/05/iphone-ux-sketch-templates.html
  22. 22. http://www.flickr.com/photos/owaters/3846053408/
  23. 23. http://www.creativesoutfitter.com/product/34/dot-grid-book
  24. 24. http://incompetech.com/graphpaper/
  25. 25. by Simon Collison
  26. 26. ‣ 見た目ではなく全体の流れ‣ 取捨選択・プライオリティを決める‣ UIとコンテンツのバランス‣ タッチとジェスチャーを活用
  27. 27. ‣ 見た目ではなく全体の流れ‣ 取捨選択・プライオリティを決める‣ UIとコンテンツのバランス‣ タッチとジェスチャーを活用
  28. 28. 画像 受け取り予測タイトル 欲しいものリスト値段 こんな商品カートに入れる 一緒に購入1-Click購入 製品説明プライム購入 仕様中古品購入 レビュー中身を見る タグキャンペーン 関連カテゴリ
  29. 29. 画像 受け取り予測タイトル 欲しいものリスト値段 こんな商品カートに入れる 一緒に購入1-Click購入 製品説明プライム購入 仕様中古品購入 レビュー中身を見る タグキャンペーン 関連カテゴリ
  30. 30. ‣ 最も重要なタスクは何かを検討‣ タスクを補助する要素を残す‣ 利用シナリオを想定‣ 個々の見た目ではなく利用フローを考慮
  31. 31. ‣ 最も重要なタスク‣ タスクを補助する要素‣ 利用シナリオ‣ 利用フローを考慮
  32. 32. ‣ インスピレーションの宝庫‣ アウトプットで見つかる改善の糸口‣ ユーザビリティテストにも挑戦‣ 適材適所でペーパープロトタイプ
  33. 33. http://www.youtube.com/prototyprs
  34. 34. 長谷川恭久 @yhassymail@yasuhisa.comwww.yasuhisa.com

×