ウェブサイト制作やDTP制作をしていると「ワイヤーフレーム」「モックアップ」「デザインカンプ」「プロトタイプ」「スタイルガイド」などの用語を正確に理解し使いこなすことが求められます。
これらはよく似た概念で、その定義が曖昧な側面もあります。
違いを明確に理解し、プロとして使い分けができるようにしておきましょう。

以下に、それぞれの用語の概要と用途を解説します。

ワイヤーフレーム

ワイヤーフレームはウェブページやアプリの構造を単純な面と線で表現した図になります。
機能やコンテンツの配置を視覚化し、初期の設計段階で全体のレイアウトやナビゲーションを確認できます。

色や具体的なデザインは含まれず、大抵はモノクロで作成し、プロジェクトの初期段階でページのレイアウトや配置する要素の位置を明確に示し、メンバーやクライアントと方向性を共有するのに役立ちます。

モックアップ

UIコンポーネントが実際のページに配置されたデザインです。

インタラクションの動きやアニメーションはこの段階では実装されていませんが、ユーザーが見て体感する要素が反映されているため、ビジュアルと機能の確認に役立ちます。

モックアップからさらに開発を進めると、実際の動き、アニメーションやインタラクティブな要素を実装したプロトタイプの開発に至ります。

ページ遷移やボタンの動作など、ユーザビリティテストや機能検証を行う際に使用されます。

デザインカンプ

デザインカンプは実際のデザインを忠実に再現した静止画で、デザインの「完成サンプル」のことを指します。
主にDTP制作・印刷業界において必須で、カラー、フォント、画像など細部まで含め、完成イメージをクライアントやチームで確認しやすくなります。

英語の「comprehensive layout（コンプリヘンシブ・レイアウト）」に由来し、印刷業界では「カンプ」と略されて用いられることが多いです。

スタイルガイド

プロジェクトの一貫性を保つために必要なデザイン要素のルールをまとめたガイドライン集です。
カラーコード、フォントサイズ、UIコンポーネントのスタイルなどが記載されており、チームのメンバー、およびエンジニアとデザイナー間の共通認識を保つための基盤となります。

特にウェブサイト制作においてはCSSのスタイルガイド作成は、クオリティの高いサイトを構築するための必須要素と言えます。
特に大規模なプロジェクトや複数チーム間でのコラボレーションに有効です。

用語早見表

用語 特徴 用途 詳細度
ワイヤーフレーム 構造や情報配置を示す線画的な図 初期設計段階で構造を確認 低
モックアップ UI要素を具体的に配置したデザイン デザインレビュー、フィードバック 中～高
プロトタイプ インタラクションが可能な動的なモデル ユーザビリティテスト、機能検証 高
デザインカンプ 実際のデザインを忠実に再現した静止画 ビジュアル確認、デザインの合意形成 高
スタイルガイド デザインの一貫性を保つためのガイドライン デザインの統一性を維持、開発効率向上 中～高

この記事を参考に、用語を正確に使い分け、より効率的な制作とクコミュニケーションの円滑化を目指しましょう。