具体のデザイン | Xデザイン学校マスターコース2024 #8
具体化して初めて見える景色がある。例えば、UIデザインにおいてFigma上で動かないビジュアルを作ったとする。これを実装して実際にスマホで確認してみたところ、「イメージと違った」ということはよくある話だ。
そのため、プロトタイピングを通じて具体化することで、解像度が高くなったとき特有の良さや課題を発見することができる（加えて、プロトタイプがあることでユーザ評価が可能になるといったメリットもある）。実体験として、スキューバダイビングアプリのプロトタイプを作成した際、「操作がしづらすぎて使えたものではない」と感じ、そこから大幅に改善したことがあった。
この具体化には、さまざまな粒度が存在する。先ほどFigmaを例に挙げたが、「動かないビジュアル」が悪いわけではない。それは「インタラクション」という視点を持たない粒度であるものの、それ自体はある程度具体化されていると言える。
粒度で分けると、以下のように二分できる。
簡易プロトタイプの手法一覧
ワイヤーフレーム：基本的なレイアウトや構造を線画ベースで表現する手法。
ストーリーボード：ユーザーの行動や体験を時系列で視覚的に示す手法。
ペーパープロトタイピング：紙やカードを使ってインターフェースやフローを試作する手法。
ペーパーモックアップ：紙を切り貼りして具体的なデザインや形状を試作する手法。
ブランクモデルプロトタイピング：中身やデザインを省き、形状だけを試すプロトタイプ。
ビデオプロトタイピング：動画を用いて製品の動作やフローをシミュレーションする手法。
オズの魔法使いプロトタイピング：裏で人間が操作し、完成品のように見せる手法。
詳細プロトタイプの手法一覧
デジタルプロトタイピング：FigmaやAdobe XDなどのツールを使ってインタラクティブなプロトタイプを作成する手法。
ビデオプロトタイピング：実際の製品やシステムの動作を再現した動画を作成する手法。
オズの魔法使いプロトタイピング：ユーザーには完成品のように見せつつ、人が裏で操作する手法。
コード化されたプロトタイピング：動作するコードを書いてプロトタイプを実現する手法。
ラピッドプロトタイピング：短期間でプロトタイプを反復的に作成し、検証を進める手法。
ディティールモックアップ：高い再現性を持つ詳細なモックアップを作成する手法。
ストーリーボードは、ユーザーの行動を具体的に説明し、そこで利用されるUIを整理することができるため、時間軸やターゲット（ペルソナ）、シナリオをブラッシュアップするのに役立つ。また、Figma（他のツールでも構わないが）のプロトタイプ機能を活用してUIモックを作成すれば、インタラクションや実デバイス視点での改善が可能となる。
サービスブループリントは、業務フローを含めたビジネス視点の解像度を高めることができる。業務フローの漏れは発生しやすいので、大事なフレームラークである。そして、ビジネスオリガミやCVCA（Customer Value Chain Analysis）は、ステークホルダー同士の価値やモノのやりとりを具体化し、解像度を高めるのに有効だ。
このように、具体性を高めるデザインを行うことで、気付かなかったプロダクトの良さや課題を可視化し、より良いサービスの提供につなげることができると考える。