Your SlideShare is downloading. ×
0
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
プロトタイピングからはじめよう
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

7,323

Published on

パソコン向けにだけ Web …

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

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×