• Save
プロトタイピングからはじめよう
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 7,553 views
Uploaded on

パソコン向けにだけ Web......

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,553
On Slideshare
3,555
From Embeds
3,998
Number of Embeds
15

Actions

Shares
Downloads
0
Comments
0
Likes
46

Embeds 3,998

http://www.yasuhisa.com 3,575
http://toybox-design.net 155
http://www.freerss.net 72
http://www.komaztz.com 66
http://s.deeeki.com 58
http://freerss.net 30
http://reader.freerss.net 22
https://twitter.com 8
https://si0.twimg.com 3
http://rss.ameba.jp 3
http://pinterest.com 2
http://webcache.googleusercontent.com 1
http://translate.googleusercontent.com 1
http://feeds.feedburner.com 1
http://www.google.co.jp 1

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