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.
タイムラインには、コンテンツと投稿したユーザーのアイコンがセットに なったカードのような UI が縦に並んでいます。そこにあるユーザーアイ コンをタップすると、シュッとユーザーアイコンがアニメーションして、 拡大した状態でプロフィール画面が表示...
画面遷移 情報構成 見た目 アニメーション
なぜいま Webサイトやアプリで必要なの？
マウス＋キーボード コントローラー ジェスチャー＋タッチ ジェスチャー＋タッチ 一箇所固定 集中力は高め ゆったり リラックス 移動中 やや集中している程度 移動中 ゆったり 中解像度 大きい 近い 高解像度 大きい 遠い 高解像度 小さい 近...
ハードウェア    OS・バージョン   利用するアプリ 利用頻度や場所   アクセスの仕方    経験・知識
誰もがマウスとキーボード使って操作をする 絵を見れば、だいたいその通りにレンダリングされる 誰もがだいたい同じスクリーンで観覧している どのような操作ができるかも比較的予測がしやすい
ジェスチャーやタッチの感覚が異なる アプリ、Web、OS、ハードウェア レスポンシブWebデザインの知識差 見ただけで操作や動きの判断が難しい
レイアウト タイポグラフィ 色 トーン＆マナー 情報の優先度 情報構造 操作性 感触 導線 一貫性
情報の優先度は いかがでしょうか？ ちょっと ロゴ小さくない？
レイアウト タイポグラフィ 色 トーン＆マナー 情報の優先度 情報構造 操作性 感触 導線 一貫性
レイアウト タイポグラフィ 色 トーン＆マナー 情報の優先度 情報構造 操作性 感触 導線 一貫性 ワイヤーフレーム
レイアウト タイポグラフィ 色 トーン＆マナー 情報の優先度 情報構造 操作性 感触 導線 一貫性 後戻りのリスク 一度に解決するのは困難
ワイヤーフレーム 情報設計・優先度 ムードボード トーン＆マナー スタイルガイド ビジュアルの一貫性
見た目だけでは判断できない デザインの課題を分解する 後戻りのコストを減らす
見た目だけでは判断できない デザインの課題を分解する 後戻りのコストを減らす
で、いつ作るんですか？
で、いつ作るんですか？必要であればいつでも作る
で、そんなに作る意味あるの？
で、そんなに作る意味あるの？作る目的を明確にする
探索 見た目 実装
探索 早期にフィードバックを得るため アイデアの方向性を示す ペーパープロトタイプ テンプレート
見た目 具体的な使用感や見た目の検証 使用者との関わりを考える スタイルガイド 画面遷移 モックアップ アニメーション
実装 コスト・パフォーマンスの検証 完成品に近い使用感を再現 HTMLフレームワーク CMS
ある画面遷移 フォーム要素 タイポグラフィ ビジュアル言語 コンテンツパターン
作りすぎて消耗しそう
作りすぎて消耗しそう作るのに時間をかけない
作りすぎて消耗しそう作るのに時間をかけない早く作る手段を選ぶ
作りすぎて消耗しそう作るのに時間をかけない早く作る手段を選ぶ 早く作れる方法 伝わりやすさ
アイデア共有？ リモートで共有？
作り込み 方向性を共有
・こんなに時間かけたのに ・だったら早く言ってよ ・自分が否定されたみたい ・ここに気付いていなかった ・やり直しがしやすい ・少しずつ進めて確かめよう
でも、⃝⃝では早く作れない
でも、⃝⃝では早く作れない作る道具は柔軟に変える
オールインワンのパーフェクトツールは存在しない
CSS/SVG
CSS/SVG
CSS/SVG Keynote
CSS/SVG Keynote Principle
CSS/SVG Keynote Principle
CSS/SVG Keynote Principle inVision
CSS/SVG Keynote Principle inVision
CSS/SVG Keynote Principle inVision After Effects
CSS/SVG Keynote Principle inVision After Effects
CSS/SVG Keynote Principle inVision After Effects Webブラウザで検証 スピード・共有重視 実機でのテスト含 画面遷移 UI要素の動き
目的は何か？ 誰と共有するか？
作る道具は柔軟に変える 作る目的を明確にする 作るのに時間をかけない 必要であればいつでも作る
デザインプロセスのオープン化
mail@yasuhisa.com @yhassy
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
Upcoming SlideShare
Loading in …5
×

あたかもプロのようにプロトタイプを活用する方法

10,719 views

Published on

http://www.yasuhisa.com/could/article/wcan-prototype-design/

プロトタイプはスマートフォン向けの Web サイトやアプリケーションの制作では欠かせないツール。しかし、聞いたことがあるけど使っていない、使いどころが分からないという理由で活用できていない人も少なくありません。また、国内外、切り口が異なるプロトタイプツールが無数にあることから、どれを選べば良いのか分かり難いです。

現存のワークフローを変えなければプロトタイプは活用できないのでしょうか？無数に登場するほどプロトタイプツールが溢れているのはなぜでしょうか？プロトタイプツールの見分けどころはあるのでしょうか？そもそもプロトタイプは本当に必要なのでしょうか？そんな疑問に答えながら、プロトタイプの使い所を紹介します。

Published in: Design
no profile picture user
  • 1 Cup Size 3 Weeks! Wow, all I can say is Wow. I can't believe how much this has helped me. I thought it wouldn't help that much, but by eating your foods and doing your exercises, I found my chest had grown from a 34a to a 34b in just over 3 weeks! Feels More Like A Woman. ➽➽ https://t.cn/A6Li7BTH
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More
Show More

あたかもプロのようにプロトタイプを活用する方法

  1. 1. タイムラインには、コンテンツと投稿したユーザーのアイコンがセットに なったカードのような UI が縦に並んでいます。そこにあるユーザーアイ コンをタップすると、シュッとユーザーアイコンがアニメーションして、 拡大した状態でプロフィール画面が表示されます。
  2. 2. 画面遷移 情報構成 見た目 アニメーション
  3. 3. なぜいま Webサイトやアプリで必要なの？
  4. 4. マウス＋キーボード コントローラー ジェスチャー＋タッチ ジェスチャー＋タッチ 一箇所固定 集中力は高め ゆったり リラックス 移動中 やや集中している程度 移動中 ゆったり 中解像度 大きい 近い 高解像度 大きい 遠い 高解像度 小さい 近い 高解像度 中くらい 近い インプット 姿勢 ディスプレイ パソコン テレビ スマホ タブレット
  5. 5. ハードウェア    OS・バージョン   利用するアプリ 利用頻度や場所   アクセスの仕方    経験・知識
  6. 6. 誰もがマウスとキーボード使って操作をする 絵を見れば、だいたいその通りにレンダリングされる 誰もがだいたい同じスクリーンで観覧している どのような操作ができるかも比較的予測がしやすい
  7. 7. ジェスチャーやタッチの感覚が異なる アプリ、Web、OS、ハードウェア レスポンシブWebデザインの知識差 見ただけで操作や動きの判断が難しい
  8. 8. レイアウト タイポグラフィ 色 トーン＆マナー 情報の優先度 情報構造 操作性 感触 導線 一貫性
  9. 9. 情報の優先度は いかがでしょうか？ ちょっと ロゴ小さくない？
  10. 10. レイアウト タイポグラフィ 色 トーン＆マナー 情報の優先度 情報構造 操作性 感触 導線 一貫性
  11. 11. レイアウト タイポグラフィ 色 トーン＆マナー 情報の優先度 情報構造 操作性 感触 導線 一貫性 ワイヤーフレーム
  12. 12. レイアウト タイポグラフィ 色 トーン＆マナー 情報の優先度 情報構造 操作性 感触 導線 一貫性 後戻りのリスク 一度に解決するのは困難
  13. 13. ワイヤーフレーム 情報設計・優先度 ムードボード トーン＆マナー スタイルガイド ビジュアルの一貫性
  14. 14. 見た目だけでは判断できない デザインの課題を分解する 後戻りのコストを減らす
  15. 15. 見た目だけでは判断できない デザインの課題を分解する 後戻りのコストを減らす
  16. 16. で、いつ作るんですか？
  17. 17. で、いつ作るんですか？必要であればいつでも作る
  18. 18. で、そんなに作る意味あるの？
  19. 19. で、そんなに作る意味あるの？作る目的を明確にする
  20. 20. 探索 見た目 実装
  21. 21. 探索 早期にフィードバックを得るため アイデアの方向性を示す ペーパープロトタイプ テンプレート
  22. 22. 見た目 具体的な使用感や見た目の検証 使用者との関わりを考える スタイルガイド 画面遷移 モックアップ アニメーション
  23. 23. 実装 コスト・パフォーマンスの検証 完成品に近い使用感を再現 HTMLフレームワーク CMS
  24. 24. ある画面遷移 フォーム要素 タイポグラフィ ビジュアル言語 コンテンツパターン
  25. 25. 作りすぎて消耗しそう
  26. 26. 作りすぎて消耗しそう作るのに時間をかけない
  27. 27. 作りすぎて消耗しそう作るのに時間をかけない早く作る手段を選ぶ
  28. 28. 作りすぎて消耗しそう作るのに時間をかけない早く作る手段を選ぶ 早く作れる方法 伝わりやすさ
  29. 29. アイデア共有？ リモートで共有？
  30. 30. 作り込み 方向性を共有
  31. 31. ・こんなに時間かけたのに ・だったら早く言ってよ ・自分が否定されたみたい ・ここに気付いていなかった ・やり直しがしやすい ・少しずつ進めて確かめよう
  32. 32. でも、⃝⃝では早く作れない
  33. 33. でも、⃝⃝では早く作れない作る道具は柔軟に変える
  34. 34. オールインワンのパーフェクトツールは存在しない
  35. 35. CSS/SVG
  36. 36. CSS/SVG
  37. 37. CSS/SVG Keynote
  38. 38. CSS/SVG Keynote Principle
  39. 39. CSS/SVG Keynote Principle
  40. 40. CSS/SVG Keynote Principle inVision
  41. 41. CSS/SVG Keynote Principle inVision
  42. 42. CSS/SVG Keynote Principle inVision After Effects
  43. 43. CSS/SVG Keynote Principle inVision After Effects
  44. 44. CSS/SVG Keynote Principle inVision After Effects Webブラウザで検証 スピード・共有重視 実機でのテスト含 画面遷移 UI要素の動き
  45. 45. 目的は何か？ 誰と共有するか？
  46. 46. 作る道具は柔軟に変える 作る目的を明確にする 作るのに時間をかけない 必要であればいつでも作る
  47. 47. デザインプロセスのオープン化
  48. 48. mail@yasuhisa.com @yhassy

×