モックアップ とは？

ワイヤーフレームは線と箱だけで構成された骨格図。色やフォント、画像は含まない。モックアップは実際の見た目に近い完成イメージ。色、フォント、画像、アイコンまで含む。ワイヤーフレームで構造を固めてからモックアップで見た目を詰める、という順番で進めるのが一般的だよ

モックアップは「見た目だけ」で操作できない静的な画面。プロトタイプは「操作できる」動的な試作品。ボタンを押すと画面遷移するとか、スクロールできるとか。Figmaなら1つのツールでモックアップ作成からプロトタイプ化まで一気通貫でできるよ

①レビューの観点を明確にする（情報設計？ビジュアルデザイン？ブランド整合性？）、②実際のデータを入れてみる（名前が長い場合、データが0件の場合）、③レスポンシブ対応（スマホ・タブレット・PC）を確認、④アクセシビリティ（色のコントラスト比）をチェック。「かっこいい」だけでなく「使いやすい」かの視点が大事だよ

まず実装の実現可能性を確認しよう。アニメーションの複雑さ、レスポンシブ時のブレークポイント、データの動的変更時の挙動など、静的なモックアップでは表現しきれない部分をデザイナーに質問する。FigmaのDev Modeを使えばCSS値やスペーシングを直接確認できるから、実装効率が上がるよ