Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
あたかもプロのようにプロトタイプを活用する方法
Next

48

Share

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

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

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  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. プレゼン 紙 ツール Flash Flex 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. 長谷川恭久 @yhassy mail@yasuhisa.com www.yasuhisa.com
  • daisuketashion

    Jun. 1, 2019
  • cometmiki

    May. 13, 2016
  • kazuki49

    Mar. 1, 2016
  • HiroshiShiobara

    Jun. 16, 2014
  • spielbs

    Nov. 7, 2013
  • makitoda9

    Jan. 23, 2013
  • umhr

    Jan. 19, 2013
  • ssusere19001

    Jan. 12, 2013
  • makiobiz

    Dec. 27, 2012
  • TakaMont

    Dec. 4, 2012
  • sisimaru

    Nov. 20, 2012
  • kogawa

    Oct. 29, 2012
  • msykito

    Oct. 9, 2012
  • ftomiz

    Oct. 4, 2012
  • torumiki

    Oct. 3, 2012
  • daisukeosada

    Oct. 3, 2012
  • tsuyoshimiyakawa

    Oct. 3, 2012
  • tomoyukikashiro

    Oct. 1, 2012
  • kinoakimitsu

    Oct. 1, 2012
  • future79

    Oct. 1, 2012

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

Views

Total views

9,796

On Slideshare

0

From embeds

0

Number of embeds

4,938

Actions

Downloads

0

Shares

0

Comments

0

Likes

48

×