【Web制作用語】ワイヤーフレーム・デザインカンプ・モックアップとは？
こんにちは！
今回はWebデザインをおこなう際や制作を依頼する際に耳にする「ワイヤーフレーム」「デザインカンプ」「モックアップ」といった用語の意味や役割の違いをWebデザインのフローと共にご紹介します。
Webデザインのフロー
↓
スケッチ（ラフ）
↓
ワイヤーフレーム
↓
デザインカンプ（モックアップ）
↓
プロトタイプ
↓
上記のような流れで制作し、デザイン納品やコーディングに移るという流れが一般的です。Webデザインの場では基本的に「デザインカンプ」と「モックアップ」は同様の意味で使われます。要件定義中に作成したスケッチを用いる場合やデザインカンプとプロトタイプを同時に作成する場合、いずれかの工程が省略される場合などもあります。
各工程の意味や役割は次の通りです。
スケッチ
デザインフローで最初におこなうアイディアを描きだす工程です。テキストではなく実際に描きだして構想します。この段階では細かいデザインはせず、あくまでアイディア出し・アイディア整理の工程です。
ワイヤーフレーム
ワイヤーフレームは、Webページのレイアウトを決める設計図です。発注者と制作者、複数人で制作する場合の制作者同士のイメージを統一し、制作フローをスムーズにする役割をもちます。配色や形、フォントなどのデザイン要素は含めず、「何をどこに配置するか」という情報のみで構成されます。
デザインカンプ／モックアップ
「デザインカンプ」は、実装に移る前に発注者や制作者間で確認する「デザイン案」を指し、「モックアップ」は実物大に作成した静的な「模型」を指します。つまり、Webデザインの場においては「デザインカンプ」と「モックアップ」は大体同じ意味をもち、大抵共通のものを指す用語です。
ワイヤーフレームに色やフォント、画像などすべてのデザイン要素を加え、「見た目」の部分は完成品と同じように作成します。デザインカンプ（モックアップ）を参考にコーディング（マークアップ）がおこなわれます。
プロトタイプ
プロトタイプは、モックアップに動的な機能を加え、実際の操作や挙動を確認する「試作品」を指します。
さいごに
今回はweb制作のデザインフローにおける用語の意味や役割の違いをまとめました。
QEEEマガジンでは各工程に利用できるおすすめのツールやツールの選び方もご紹介しています。ご興味のある方は以下のリンクからご覧いただければ幸いです。
関連するQEEEマガジン
最後までお読みいただきありがとうございます！😊