【もっくあっぷ】

モックアップ とは?

💡 動かない「見た目だけの試作品」
📌 このページのポイント
デザイン工程の段階 ワイヤーフレーム 構造・レイアウト のみ(白黒) モックアップ ヘッダー ボタン 見た目を忠実に再現 色・フォント・画像入り プロトタイプ クリック 実際に操作可能 画面遷移・アニメ モックアップ = 「見た目の完成イメージ」を共有するための静的デザイン Figma, Sketch, Adobe XD などで作成し、関係者のフィードバックを得る
モックアップのイメージ
ひよこ ひよこ

ワイヤーフレームとモックアップの違いは?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

モックアップとプロトタイプは?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

モックアップレビューのコツは?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

おもしろい!エンジニアとしてモックアップをもらったらどうする?

ペンギン先生 ペンギン先生

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

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「モックアップ」って出てきたら「見た目だけ再現した試作品」と思えればだいたいOK!
📖 おまけ:英語の意味
「Mock-up」 = 模型・実物大模型
💬 Mock(模造の)+ Up。建築や工業デザインでも使われる「実物大の模型」だよ
← 用語集にもどる