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

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

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

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

マウス＋キーボードコントローラージェスチャー＋タッチジェスチャー＋タッチ
一箇所固定
集中力は高め
ゆったり
リラックス
移動中
やや集中している程度
移動中
ゆったり
中解像度
大きい
近い
高解像度
大きい
遠い
高解像度
小さい
近...

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

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

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

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

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

レイアウト
色
操作性感触
導線一貫性
ワイヤーフレーム

レイアウト
色
操作性感触
導線一貫性
後戻りのリスク
一度に解決するのは困難

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

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

で、いつ作るんですか？

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

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

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

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

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

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

ある画面遷移フォーム要素
ビジュアル言語
コンテンツパターン

作りすぎて消耗しそう

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

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

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

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

作り込み方向性を共有

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

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

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

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

CSS/SVG Keynote Principle inVision

CSS/SVG Keynote Principle inVision After Effects

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

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

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

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

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

Yasuhisa Hasegawa