デザインカンプの作り方と制作の流れ（ラフ→カンプ→フィックス）

「ラフください」「カンプで出しておいて」「これでフィックスです」
現場に入ると当たり前に飛び交う言葉ですが、最初は何を出せばいいのか分かりませんよね。

この3つは、制作の進み具合を表す呼び名です。ラフ＝配置の下書き、カンプ＝完成見本、フィックス＝確定。順番も決まっています。
この記事では、依頼を受けてから公開までの流れを段階ごとに整理します。どの段階で何を決めて、何を出すのか。ここが分かると、修正の往復がぐっと減りますよ◎

デザイン制作は5つの段階で進む

案件の大小にかかわらず、流れはほぼ同じです。

1. ヒアリングとブリーフ：目的・相手・条件を1枚にまとめる
2. ラフ：配置だけを描いた下書きで方向を決める
3. カンプ：本番と同じ見た目の完成見本を作る
4. フィックス：修正を締めて確定させる
5. 公開・入稿：Webなら公開（ローンチ）、印刷なら入稿

大事なのは、後ろの段階ほど直す手間が大きいことです。ラフの段階なら配置を全部変えても5分で済みます。カンプまで作り込んでから「そもそも縦組みにしたい」となると、丸1日が消えます。
だから前の段階で大きい判断を終わらせて、後ろでは細かい調整だけにします。

デザインブリーフ：作る前に条件をそろえる

デザインブリーフは、作り始める前に条件を書き出した1枚です。依頼書と呼ぶこともあります。ここが空のまま手を動かすと、あとで全部やり直しになります。

最低限そろえるのは6つです。

形を見たいときは、クラウドソーシングのバナー募集ページを1つ開いてみてください。目的・入れる文言・サイズ・期日が並んでいます。あれが依頼する側から見たブリーフです。

ここから、その案件の芯になる方針を1行にします。これがコンセプトです。見た目に落とし込んだものをデザインコンセプトと呼びます。
たとえば「はじめての人の不安を消す」がコンセプトなら、デザインコンセプトは「余白を広く、写真は人の顔、色は2色まで」といった形になります。迷ったときはここに戻ると判断できます💡

ラフ（ラフデザイン）：配置だけを決める下書き

ラフは、要素をどこに置くかだけを描いた下書きです。ラフデザインとも言います。紙とペンで十分。きれいに描く必要はありません。

ラフで決めるのは3つだけです。

• 主役をどこに置くか
• 情報をいくつのまとまりに分けるか
• 目線がどの順に動くか

写真の中身やフォントの種類は、この段階では決めません。写真が入る場所には四角に×印を描いて、仮置きにします。この仮置きをアタリと呼びます。文字も「見出しがここに2行」と線で示すだけで足ります。

ラフは1案で止めないでください。同じ条件で3案描くと、自分の中の一番手が見えます。3案目でようやく、最初の案が思い込みだったと気づくこともよくあります。
時間は1案5分。丁寧に描くほど、捨てにくくなって判断が鈍ります。

カンプ（デザインカンプ）：本番と同じ見た目の完成見本

カンプは、完成品と同じ見た目まで作り込んだ見本です。デザインカンプとも言います。英語のcomprehensive layout（総合的なレイアウト）を縮めた呼び方です。

カンプの役割は、確認をもらうこと。相手はこれを見て公開後の姿を判断します。だから仮の文字やダミー画像を残したまま出すと、そこで話が止まります。

本番と同じにしておく項目はこの4つです。

完成形が想像しにくいときは、Canvaのテンプレートを1つ開いてみてください。写真も文言も入って、そのまま使える見た目になっています。あの状態がカンプです。

Webサイトなら、スマホとパソコンの両方を作ります。今はスマホから見る人の方が多いので、スマホ側から先に組むと迷いません。

ワイヤーフレームとの違いをよく聞かれますが、これは目的が違います。

	ワイヤーフレーム	デザインカンプ
決めるもの	何をどこに置くか（設計図）	どう見えるか
色と写真	入れない	本番と同じものを入れる
順番	先	後

バナー1枚のような小さい仕事では、ラフがワイヤーフレームの役割を兼ねます。

フィックス：修正を締めて確定させる

フィックスは「確定」のことです。カンプに修正を反映して、これ以上直さないと双方が合意した状態を指します。「この内容でフィックスします」と一言もらってから、次の工程へ進みます。

ここを口約束のまま進めると、入稿後や公開後に修正が来ます。印刷なら刷り直しの費用が発生します。
フィックスは必ずメールやチャットの文字で残してください。日付とファイル名を添えると、あとで「どの版のことか」で揉めません。

修正の回数は、最初に決めておくと守れます。「初稿＋修正2回まで、それ以降は追加料金」と見積もりに書いておくだけで、終わりのない往復を止められます。

フィックスのあとは出口です。Webなら公開（ローンチ）、印刷なら印刷所へのデータ入稿。Web用の画像はWebPやPNG、印刷用は実寸と350dpiで書き出します。ここでデータの条件を外すと、確定した見た目のまま出せません。

ミニ実践：バナー1枚をラフ→カンプの2段階で作る

流れは手を動かすと一度で身につきます。40分ほどで終わります。使うのはCanvaと、紙とペンだけです。

1. ブリーフを書く（5分）：架空の案件を1つ決めます。たとえば「近所のパン屋の朝市バナー・1200×628px」。目的・相手・入れる要素・コンセプト1行を紙に書き出します
2. ラフを3案描く（15分）：1案5分。四角い枠を描いて、写真の位置にアタリの×印、文字の位置に線を引くだけ。文字の内容は書きません
3. 1案に絞る(5分)：コンセプトの1行に照らして、いちばん合う案を選びます。好みで選ばないのがコツです
4. カンプを作る（15分）：選んだラフのとおりにCanvaで組みます。文言は本番の文字を入れて、写真も実際に使うものを置きます
5. 見比べる：ラフとカンプを並べて、配置が変わっていないか確認します。大きく変わっていたら、ラフで決めきれていなかった証拠です

2回目からは、ラフの精度が上がります。ラフで迷わなくなると、制作時間は半分になります。

やってしまいがちな失敗

ラフを飛ばしていきなり作り始める

ソフトを開いた瞬間から細部が気になって、配置が決まらないまま時間が過ぎます。
直し方は、紙に5分だけ描くこと。手が遅くなる分、大きい判断に集中できます。

ダミーテキストのままカンプを出す

「あああ」や意味のない英文が入っていると、相手はそこが気になって中身を見てくれません。文字数が変わって、あとから配置も崩れます。
直し方は、仮でも本番に近い文章を入れること。文言が未定なら、想定の文字数で書いておきます。

修正の指示を口頭だけで受ける

「もう少し明るく」「なんか違う」で終わると、次の稿でまた同じ指摘が来ます。
直し方は、指示を文字にして返すこと。「背景の色を1段明るくします」と書いて確認をもらうと、認識のずれが消えます。

フィックス前に入稿してしまう

確認が取れていない状態で印刷所へ送ると、修正が来た時点で刷り直しです。
直し方は、確定の一言をもらってから進めること。急いでいるときほど、ここを飛ばさないでください。

よくある質問

ワイヤーフレームとデザインカンプの違いは何ですか？

決めるものが違います。ワイヤーフレームは「何をどこに置くか」の設計図で、色も写真も入れません。線と四角だけです。
カンプは「どう見えるか」を見せる完成見本で、色・写真・フォントまで本番と同じにします。順番はワイヤーフレームが先、カンプが後です。

「カンプ」とはどういう意味ですか？

英語のcomprehensive layoutを縮めた言葉で、完成見本を指します。
もともとは印刷の現場の言葉でしたが、今はWeb制作でも同じ意味で使います。「デザインカンプ」「カンプ」「完成イメージ」はどれも同じものだと考えて大丈夫です。

Figmaで作るデザインカンプは何が違いますか？

作るものは同じで、渡し方が違います。Figmaならブラウザのリンクを送るだけで相手が見られます。画面の上に直接コメントを書き込めるので、修正のやり取りが1か所に集まります。
実装する人が余白やフォントの数値をそのまま読み取れる点も利点です。Web制作ならFigmaが標準になりつつあります。

デザインカンプはどうやって作りますか？

ラフで決めた配置を、そのままツールに写していきます。Webサイトの案件ならFigma、バナー1枚ならCanvaやPhotoshopで足ります。
手順は、実寸のサイズで新規ファイルを作る→ラフの配置どおりに枠を置く→本番の文言を入れる→写真とロゴを差し込む→色とフォントを決める、の順です。細かい装飾は最後に足してください。

次に学ぶこと

用語をまとめます。

• デザインブリーフ：作る前に条件をまとめた1枚
• コンセプト／デザインコンセプト：案件の芯を1行にしたもの／それを見た目の方針にしたもの
• ラフ（ラフデザイン）：配置だけの下書き。3案描く
• アタリ：写真や文字の仮置き
• カンプ（デザインカンプ）：本番と同じ見た目の完成見本
• フィックス：これ以上直さないと確定した状態
• ローンチ：Webサイトの公開

フィックスの前後でやり取りする修正の言葉は、独特のものが多いです。「トルツメ」「ママ」「テレコ」が出てきたら、校正・入稿の現場用語を見てください。赤字の読み方まで解説しています。

ここまでの知識を作品に変える段階に来たら、デザイン練習の進め方へ。全体の並びはデザイン基礎コースの目次から確認できます。