カンプ / デザインカンプ
Web サイト制作における「デザインの完成見本」のことです。ワイヤーフレーム(WF / ワイヤーフレーム)で決めた骨組みに対して、配色・装飾・写真・フォント(タイポグラフィ)を適用した最終形であり、主に Figma などのデザインツールで作成され、コーディング(実装)に進む前の最終承認資料となります。略称の「カンプ」は comprehensive layout の略です。
ワイヤーフレームとカンプは、決めるレイヤーが違います。
- WF(ワイヤーフレーム)：サイトの「構造」を決めるもの
- カンプ(デザインカンプ)：サイトの「世界観(見た目)」を決めるもの
Web担当者がレビュー時に見るべき 5 大ポイント
細かな色味の調整はデザイナーの領域です。担当者は社内の意見を取りまとめる「フィルター役」(フィルター役)となり、以下の本質的なポイントをチェックします。
- ブランドの整合性：自社のブランドトーンやコーポレートカラー(ブランドカラー)と合致しているか。
- ペルソナ視点：ターゲット(ペルソナ)の利用シーンで違和感がないか。
- ファーストビュー：PC とスマホ(SP)の両方で、最初に見える画面(ファーストビュー)に必要な情報が収まっているか。
- テキストの画像化：キャッチコピーなどが不必要に画像化されていないか(SEOや音声読み上げの観点で NG となるため、できるだけテキスト実装にする)。
- CV ボタンへの動線：問い合わせや購入のボタン(CV ボタン)が、ユーザーの視線の動きの流れに乗っているか。
よくある落とし穴(注意点)
- カンプを承認してコーディングが進んだ後に、経営層から「イメージと違う」とちゃぶ台返しが来る(カンプ段階で主要ステークホルダーの合意をガチッと固めるのが鉄則です)。
- 社内各所からの意見をすべて反映した結果、統一感のない「キメラのようなデザイン」になってしまう。
- スマホ(SP)の確認を後回しにし、PC 版の見た目だけで承認してしまう(今の時代、スマホファーストが基本です)。
- キャッチコピーを「仮テキスト」のまま承認し、後から本番テキストを入れたら文字数オーバーでデザインが崩れる。
- ファイルの版管理がズサンで、「どれが最新版のカンプか分からない」という状態が発生する。
言葉をよく利用する人
- デザイナー
- Web 担当者(発注側)
- ディレクター
- 広報
- 経営層
会話上での使用例
カンプの承認会議で社内の意見が割れた場面
-
営業
もっと明るい感じにしてほしいなあ。
-
広報
いや、逆に渋いほうが高級感が出ると思う。
-
Web担当者
フィルター役として整理しますね。最終的にはブランドトーンと、直接の競合との位置取りで判断します。お二人の意見はインプットとして頂いて、カンプの最終決定は次回会議で意思決定マップに乗せます。
公開直前にカンプの修正依頼が来た場面
-
経営層
公開直前で悪いんだけど、トップのカンプのメインビジュアル、別案にできないかな。
-
Web担当者
公開直前の要素変更は、一番やらかしやすいところなんです。今回は見送って、公開後のA/Bテスト案件として運用しませんか。判断の経緯はリスクメモに残しておきます。
-
経営層
たしかに直前にいじるのは怖いね。じゃあ公開後に試そう。