Home > Webページデザイン > デザインカンプ

Webデザインカンプ

新規作成日 2019-04-07
最終更新日

デザインカンプとは

Webサイト作成の1つとして、デザインカンプの作成があります。デザインカンプとは、「Design Comprehensive Layout」の略で、「デザインの完成見本図」のことです。「カンプ」 や「モックアップ」 とも呼ばれますが、同じものです。グラフィック・ツールなどで作成し、コードで記述する前に、Webサイトのデザインを確認するためのものです。

このデザインカンプを元に、クライアントと製作者の間で、デザインを共有し決定します。

デザインカンプは、Webサイトのパーツの大まかなレイアウトを決めるワイヤフレーム作成の後の工程になります。

ワイヤフレームとは、ヘッダやメニュー、コンテンツ、フッタなど、Webサイトのパーツの大まかなレイアウトを決める作業です。

デザインカンプは、このワイヤフレームに、色をつけ、画像、テキストを挿入し、Webサイトの完成イメージを確認するものです。

デザインカンプを使って、イメージを明確化した後、htmlやcssで、コードとして表現します。

商業的には、デザインカンプの修正は、2回までで、それ以降は、追加料金が必要になる場合が多いです。

デザインカンプの目的

デザインカンプの目的は、Webサイトの目的や狙いに合わせた効果的なデザインを明確化することです。

商品購入や資料請求などのコンバージョン・ポイント、狙うターゲット層といったWebサイトの目的によって、適切なデザインが変化します。

参考サイトを見つける

デザインの参考に、既存のサイトを利用します。

デザインカンプを作成する

おおまかなデザインを手書きで作成し、グラフィック・ツールなどで、デザインを再現し、色やフォント、細かな位置などを決めます。

デザインカンプの状態で、デザイン決定者の意見をデザインに反映させます。

コードでデザインを実現する

デザインカンプを元に、Webサイトをコード化します。