http://www.yasuhisa.com/could/article/wcan-prototype-design/ プロトタイプはスマートフォン向けの Web サイトやアプリケーションの制作では欠かせないツール。しかし、聞いたことがあるけど使っていない、使いどころが分からないという理由で活用できていない人も少なくありません。また、国内外、切り口が異なるプロトタイプツールが無数にあることから、どれを選べば良いのか分かり難いです。 現存のワークフローを変えなければプロトタイプは活用できないのでしょうか？無数に登場するほどプロトタイプツールが溢れているのはなぜでしょうか？プロトタイプツールの見分けどころはあるのでしょうか？そもそもプロトタイプは本当に必要なのでしょうか？そんな疑問に答えながら、プロトタイプの使い所を紹介します。

7. タイムラインには、コンテンツと投稿したユーザーのアイコンがセットに
なったカードのような UI が縦に並んでいます。そこにあるユーザーアイ
コンをタップすると、シュッとユーザーアイコンがアニメーションして、
拡大した状態でプロフィール画面が表示されます。

13. 画面遷移 情報構成 見た目 アニメーション

18. なぜいま
Webサイトやアプリで必要なの？

21. マウス＋キーボード コントローラー ジェスチャー＋タッチ ジェスチャー＋タッチ
一箇所固定
集中力は高め
ゆったり
リラックス
移動中
やや集中している程度
移動中
ゆったり
中解像度
大きい
近い
高解像度
大きい
遠い
高解像度
小さい
近い
高解像度
中くらい
近い
インプット
姿勢
ディスプレイ
パソコン テレビ スマホ タブレット

25. ハードウェア OS・バージョン 利用するアプリ
利用頻度や場所 アクセスの仕方 経験・知識

28. 誰もがマウスとキーボード使って操作をする
絵を見れば、だいたいその通りにレンダリングされる
誰もがだいたい同じスクリーンで観覧している
どのような操作ができるかも比較的予測がしやすい

29. ジェスチャーやタッチの感覚が異なる
アプリ、Web、OS、ハードウェア
レスポンシブWebデザインの知識差
見ただけで操作や動きの判断が難しい

30. レイアウト
タイポグラフィ
色
トーン＆マナー
情報の優先度 情報構造
操作性 感触
導線 一貫性

31. 情報の優先度は
いかがでしょうか？
ちょっと
ロゴ小さくない？

32. レイアウト
タイポグラフィ
色
トーン＆マナー
情報の優先度 情報構造
操作性 感触
導線 一貫性

33. レイアウト
タイポグラフィ
色
トーン＆マナー
情報の優先度 情報構造
操作性 感触
導線 一貫性
ワイヤーフレーム

34. レイアウト
タイポグラフィ
色
トーン＆マナー
情報の優先度 情報構造
操作性 感触
導線 一貫性
後戻りのリスク
一度に解決するのは困難

35. ワイヤーフレーム
情報設計・優先度
ムードボード
トーン＆マナー
スタイルガイド
ビジュアルの一貫性

36. 見た目だけでは判断できない
デザインの課題を分解する
後戻りのコストを減らす

37. 見た目だけでは判断できない
デザインの課題を分解する
後戻りのコストを減らす

38. で、いつ作るんですか？

39. で、いつ作るんですか？必要であればいつでも作る

42. で、そんなに作る意味あるの？

43. で、そんなに作る意味あるの？作る目的を明確にする

44. 探索 見た目
実装

45. 探索
早期にフィードバックを得るため
アイデアの方向性を示す
ペーパープロトタイプ
テンプレート

46. 見た目
具体的な使用感や見た目の検証
使用者との関わりを考える
スタイルガイド
画面遷移
モックアップ
アニメーション

47. 実装
コスト・パフォーマンスの検証
完成品に近い使用感を再現
HTMLフレームワーク
CMS

49. ある画面遷移 フォーム要素
タイポグラフィ
ビジュアル言語
コンテンツパターン

50. 作りすぎて消耗しそう

51. 作りすぎて消耗しそう作るのに時間をかけない

52. 作りすぎて消耗しそう作るのに時間をかけない早く作る手段を選ぶ

53. 作りすぎて消耗しそう作るのに時間をかけない早く作る手段を選ぶ
早く作れる方法 伝わりやすさ

54. アイデア共有？
リモートで共有？

55. 作り込み 方向性を共有

56. ・こんなに時間かけたのに
・だったら早く言ってよ
・自分が否定されたみたい
・ここに気付いていなかった
・やり直しがしやすい
・少しずつ進めて確かめよう

58. でも、⃝⃝では早く作れない

59. でも、⃝⃝では早く作れない作る道具は柔軟に変える

60. オールインワンのパーフェクトツールは存在しない

61. CSS/SVG

62. CSS/SVG

63. CSS/SVG Keynote

64. CSS/SVG Keynote Principle

65. CSS/SVG Keynote Principle

66. CSS/SVG Keynote Principle inVision

67. CSS/SVG Keynote Principle inVision

68. CSS/SVG Keynote Principle inVision After Effects

69. CSS/SVG Keynote Principle inVision After Effects

70. CSS/SVG Keynote Principle inVision After Effects
Webブラウザで検証 スピード・共有重視 実機でのテスト含 画面遷移 UI要素の動き

71. 目的は何か？ 誰と共有するか？

73. 作る道具は柔軟に変える
作る目的を明確にする
作るのに時間をかけない
必要であればいつでも作る

75. デザインプロセスのオープン化

76. mail@yasuhisa.com
@yhassy