デザインカンプ

デザインカンプとは、Webページの完成イメージを視覚的に示すための見本です。配色や文字、画像、レイアウトなどを、実装前に具体的な形で確認するために使います。

Design Compとも呼ばれ、Web・UIの文脈ではモックアップと重なって使われます。単一の公式定義や技術標準で資料の範囲が決まっている用語ではなく、確認する内容や作り込み方は制作現場によって異なります。

主に確認するのは、画面の見た目と、情報が視覚的にどう整理されるかです。どの情報を目立たせるか、文字や画像をどう配置するかを、文章の指示だけでなく画面の見本で共有します。

• 配色・文字：色の使い方、文字の大きさ、見出しと本文の関係など。
• 画像・余白：使用する画像、配置、情報と情報の間隔など。
• 画面内の構成：メニュー、ボタン、本文などの位置と見え方。

たとえば、同じ文章と画像を使っていても、見出しの大きさや余白を変えると、情報の目立ち方は変わります。完成イメージを確認する資料と、その画面をブラウザー上で動く形にするコーディングは、成果物と実装作業という関係です。

Web・UIでは、デザインカンプとモックアップを同じような視覚見本の意味で使います。UXの調査・コンサルティングを行うNielsen Norman Group（NN/G）は、用語集でモックアップの別称にDesign Compを含め、色や画像などの視覚的な詳細を持つ、静的で完成形に近いUIの見本として説明しています。[1]

組織や資料によって二つの言葉を区別して説明することもありますが、Web制作全体に共通する一律の区分はありません。「カンプは平面、モックアップは必ず動く」といった違いを固定せず、何を確認する資料かを具体的に捉えます。

名称が違うだけで、別の工程・別の成果物が必ず増えるわけではありません。依頼や確認では、見た目を共有するのか、操作も試すのかなど、資料に求める役割をそろえます。

ワイヤーフレームは画面の構造、プロトタイプは案を試すことに重点を置く言葉です。デザインカンプは、その画面がどのように見えるかを具体化する役割として捉えます。

NN/Gのプロトタイプ解説は、静的な試作品を使い、人が利用者の操作への反応を示す方法も扱っています。プロトタイプは、クリックして動く実装だけを指すわけではありません。[2]

実際の資料は、見た目の確認と操作の検証を兼ねることもあります。三つの名前を固定的な制作順序に当てはめるより、構造・視覚表現・試す対象という確認の軸で整理すると、役割の違いを説明できます。