【もっくあっぷ】
モックアップ とは？
最終更新:
💡 完成時の見た目を具体化する試作画面
製品やUIの外観を具体化した試作品・模型。UIでは主に静的な画面を使い、色・文字・画像・配置など、完成時の見た目を検討する。
📌 このページのポイント
ひよこ ワイヤーフレームとモックアップの違いは？
ペンギン先生 ワイヤーフレームは配置や情報の構造を考える骨組みで、簡単な線や箱で描くことが多いよ。色を一切使えない決まりではない。モックアップは、色や文字、画像などを具体化して、完成時の見た目を検討する画面なんだ。
ひよこ モックアップとプロトタイプは？
ペンギン先生 ひよこ 必ず骨組み、見た目、操作の順に作るの？
ペンギン先生 固定ではないよ。簡単な骨組みから操作を試すプロトタイプを作ることもあるし、モックアップで外観を相談してから実装へ進むこともある。何を確かめたいかに合わせ、必要な詳しさで作って、意見を受けながら直すんだ。
ひよこ モックアップレビューのコツは？
ペンギン先生 配置や見た目など、確認したい点を先に決めよう。長い名前やデータが0件の画面、スマホとPCでの見え方も相談する。色や文字の読みやすさも確認するけど、静的な画面だけで実際の操作性まで検証済みとは考えないでね。
ひよこ エンジニアとして受け取ったら？
ペンギン先生 寸法や余白、色だけでなく、押した後の動作や読み込み中・エラー時の表示、画面幅による変化を確認しよう。静的な1枚から推測で決めず、デザイナーと仕様を相談する。動きはプロトタイプや実装で試し、外観の合意と動作の確認をつなげるんだ。
まとめ：ざっくりこれだけ覚えればOK！
「モックアップ」って出てきたら「完成時の見た目を具体化した試作品」と思えばだいたいOK！
📖 おまけ：英語の意味
「Mock-up」 ＝ 外観を示す模型・試作品
💬 UIでは、完成時の見た目を表す画面を指すよ。ここでは画面のデザインを検討するためのモックアップを説明しているんだ。