カンプ作成について

制作

カンプ(comprehensive layout)の目的

  • クライアント側で基本的なメニューやレイアウト等を見た目で確認できる
  • ユーザーの使い勝手(ユーザビリティ)やわかりやすさを決定することができる

カンプは、ユーザーの使い勝手や導線などを重視して作成されるべきです。ただきれいなだけのデザインではなく、目的を達成する為のデザインを制作することが前提となります。
このとき「CSSコーディング」を理解していることにより、より目的を達成しやすいデザイン案にすることが出来ます。

カンプは3案

仕事の中では「カンプ案3点(もしくはラフ3点)」という指定をされることが一般的です。
では、アイデアを「３点」考えればそれでいいのかというと、それだけでは意図を満たしたことにはなりません。

重要なことは、視点を変えることです。
例えば、以下のように視点を変えてみます。
クライアントの視点
自分の視点(オリジナリティ)
今の流行(トレンド)
これを満たすデザインをつくると、必然的に「3点」できることになります。

IllustratorからPhotoshopへのカンプ作成

  1. Illustrator(グレーボックス)のレイヤー保持で、Photoshop形式へ書き出し
  2. オブジェクトの幅にスナップさせて「ガイド作成」
  3. レイヤー管理をしながらブロックごと作成

カンプ制作は「デザイン力」であり、「Photoshopのスキル次第」でもあります


catcafe


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
    <style type="text/css">
    *{
		margin: 0;
		padding: 0;
		}
	body{
		text-align: center;
		background: #ffffff url(body.jpg) repeat-y center top;
		}
	#container{
		width: 830px;
		margin: 0 auto;
		position: relative;
	}
	#header{
		width: 830px;
		height: 380px;
		margin: 0 auto;
		background: #fff url(bg.jpg) no-repeat center bottom;
	}
	#header p.logo{
		position:absolute;
		left: 0;
		top:10px;
	}
	h1{
		color:#000000;
		font-size: 2em;
		line-height:450px;
		font-family:Georgia, "Times New Roman", Times, serif;
	}
    </style>
</head>
<body>
	<div id="container">
    <div id="header">
    <h1>Cat Cafe | Neko no T&#233;</h1>
    <p class="logo"><img src="logo.png" width="200" height="200" alt=""></p>
    </div>
    </div>
</body>
</html>

最初からPhotoshopでガイド引いて作成。グレーボックスでやってみよう。画像pngで。