WEB制作の工程はまず仕様書を作ります。それを元にワイヤーフレームを作成。最後にデザインカンプを作成します。

よくカンプと呼ばれますが、デザインカンプというのはクリエイト系全般で言われるものでWEBに限った話ではありません。元は英語で「Design Comprehensive Layout」から省略してカンプと呼ばれています。

モックアップとも呼ばれるそうですが僕はあまり馴染みがないです。モックは↓のイメージがあります。

デザインカンプとはいわゆる完成見本の事です。このデザインカンプをコーダーにそのまま渡したり、パーツをスライスして渡したりします。

デザインカンプ作りの注意点

HTMLコーディングの際にどうしても画像のスライス作業が発生します。スライスというのは画像の一部分だけを切り抜いて書き出すことです。最近はCSSやウェブフォントで装飾を付けることができるのでスライスする機会は減ってきましたが、全くスライスしないということはありません。

デザインカンプは1枚の絵ではなく、スライス出来るようにアルファ（透過）状態を保ったファイルをコーダーに渡す必要があります。ただし生データ（制作データ）を渡せない事があるので、デザイナー自身がスライスして渡すか、スライスだけ書き出せるように生データを加工して渡したりします。

【注意】
生データを他人やクライアントにそのまま渡すと、データだけもらってお金がもらえないなどの被害があります。生データは極力人に渡さないようにしましょう。どうしても欲しいと言われた時は生データの代金を請求しましょう。

ちゃんとしたデザインカンプを作る場合、それなりのグラフィックアプリが必要

個人でWEBページを作る場合は無料のアプリやWEBアプリで構いません。もしくはデザインとコーダーを兼用する人も自由です。もしデザイナーとコーダーの担当が分かれている場合はお互いにデータ共有できるアプリでデザインカンプを作る必要があります。

代表的なアプリはやはりPhotoshopです。Photoshopならバージョンが異なっていてもファイルが開けますしフォントなどが相手に入っていなくてもファイルを開くことができます。めったにないですが相手がPhotoshopを持っていない場合でもPhotoshopのPSDデータはほとんどのアプリが読み込めるようになっているので最悪スライスが可能です。

カンプは2倍の解像度で作ろう

MACのRetinaディスプレイやスマホのDPIを考えると画面サイズそのままの数値で作ると解像度が足りません。例えばPC画面1280pxでデザインを作り、画像をそのままスライスしてWEBページ化すると画面がぼやけます。画面がぼやける理由は画像の解像度が低いからです。

例えばスマホの横サイズは約320pxです。これは72DPIの時の話になります。実際はその2倍の640px程ないとキレイに画像が表示されません。DPIとは簡単に言えばディスプレイの1インチの中に表示できるドットの数です。パソコンのモニターは72DPIなので320pxで作ればそのままのサイズで表示されます。320px（72DPI）の画像をスマホで表示させると実際は160pxでしか表示できません。そのためスマホやRetinaディスプレイの事を考えると320px（144DPI）で作る必要があります。意味がわからない場合は320pxの画像を作りたい場合は640pxの画像を作ればいいです。

実際はiPhone／Android／タブレットなど各デバイスでDPIと画面サイズが変わるので、細かいことを考えると解像度はかなり面倒な問題です。
安心してください。単純に2倍のサイズで作れば良いのです。デバイスによっては多少足りなかったり大きすぎたりしますが誤差です。

DPIの違いがよくわからないと思うので例として300px（72DPI）の画像と300px（144DPI）の画像を見てみましょう。

スマホの人はタップするかピンチで拡大して見てください。どうでしょうか。結構違いますよね？
※MACのRetinaで見れば差がわかりますがWINだと違いが分かりにくいかも

これは実は144DPIの方は600pxです。600pxの画像を300pxで表示させているからDPIが72DPIの2倍ということです。この144DPIの画像をもし600pxでページ上に表示させたらそれは72DPIです。理解できますか？

もし理解できない場合はこう考えてください、「大きな画像をWEBページ上で小さく表示すれば超キレイ」と。

実際にカンプファイルを2倍サイズで作る必要はない

スライスで画像を書き出す際に2倍で出力すれば良いのでファイル自体は普通のサイズで作って大丈夫です。ただし、そのファイルに配置する画像やアイコンなどはラスタライズせずに2倍以上の解像度を保ったままデザインします。

基本的にグラフィックアプリは読み込んだ画像のサイズを保持したまま作業が可能です。ラスタライズして画像のサイズを見た目通りに確定してしまうと解像度が落ちてしまします。

例えばPhotoshopなら画像を読み込むと下記のようなレイヤーになります。

このレイヤーは拡大縮小を繰り返しても画像は劣化しません。それはいくら編集しても元画像は編集されていないからです。アイコンをダブルクリックすると元の画像そのものを確認することが出来ます。これはスマートオブジェクトと呼ばれる機能です。

グラフィックアプリは基本的にこのような機能が入っているため設置した画像の元の解像度を保持しています。つまり配置する画像そのものは高解像度のものを使えばスライスで書き出す時に2倍サイズで書き出しても劣化なく書き出せます。

よく解らなかったり、元画像の解像度を保持できないアプリを使う場合は素直に作成ファイル自体のサイズを2倍にしてデザインしましょう。

デザインカンプを作れるアプリ紹介

WEBデザインのカンプ作成で重要なのはピクセルで作れることです。ベクター画像、いわゆるIllustrator系は適しません。その理由は座標でグラフィックを作っているため静止画として書き出した時にドットが欠けてモヤッとするからです。

またペイント系もあまりオススメできません。0.5pxなどはみ出てしまわずに300pxなどしっかりとデザインできるアプリが理想です。

無料アプリ

正直GIMP以外に無料で使えるアプリは無いです。個人の範囲でデザインするだけなら何でも良いのですが仕事の事を考えるとGIMPがギリギリのラインです。

有料アプリ

デザインカンプの作り方

作り方と言っても人それぞれですし、デザインセンスが問われるので踏まえておくべきポイントだけ紹介します。

ベクター系のアプリで作ることなかれ

ベクター系とはIllustratorのようにベジェ曲線がメインのアプリですね。ベジェ曲線は座標で描画するので拡大縮小しても劣化しない特徴があります。SVGファイルにすればロゴなんかをキレイにWEBで表示できます。パーツを作る上ではベクター画像は非常に便利なのですがドットが描けません。

サンプルでラスター画像（Photoshop産）とベクター画像（Affinity産）の画像を並べてみますね。

2つの画像の黒枠を見比べてみてください。ベクター画像の方がボヤっとしてませんか？こればベクター画像の線が0.5pxズレてピクセルずれを起こしているからです。

ベクター画像でもピクセルずれを起こさずに作ることは可能です。しかしそれは非常に手間がかかる場合があります。印刷出身のデザイナーの人に多いのですがピクセルずれ対策をせずにデザインをしてしまっています。

静止画は全てドットで出来ており、ちょっとでもピクセルずれを起こすと眠たい画像になってしまいます。大きな画像を縮小させて表示すると目立ちませんが等倍で表示するとボケが目立ちます。

Illustratorなどでデザインをしていると製作中はピクセルずれに気づきにくいんです。確認するモードがありますがわざわざ確認しないんじゃないかな？Photoshopなどのラスター系なら見た目そのままに表示されるので作業中にピクセルずれを確認しやすく対策も楽です。ピクセルずれはコーダーが直したほうが早かったりするのでデザイナーにリテイクを出さないことが多いですが結構無駄な時間を取られます。

サイズや余白を正確に作る

たまにWEBページ化出来ないようなデザインをする人がいます。ある程度はコーダー任せにしてもいいと思いますが揃えるべきところは揃えるべきです。余白やサイズは4の倍数か8の倍数で揃えるとキレイに見えます。

極端に描いてますが、よくあるのが↑のようなデザインです。1つ目と2つ目の画像サイズが違います。それだけならまだしも周囲の余白も異なります。一箇所だけこのように崩れていても問題はありませんが、全体的にこのような作りをしている人がまれにいます。殺意がわきます。今はCSSである程度制御できるようになったので問題ない事がありますが、10年前くらいは1px単位で計算してデザインしていないとこういった横並びが難しかったんですよね。

これも印刷出身のデザイナーの人に多いですね。たぶん感覚で置いてるんだと思います。

1ページずつ作る

各WEBページ毎にデザインカンプを作りましょう。例えばトップページならindexやtop、またはhomeなどにします。サイトマップが作成されているならファイル名＝URL名などにすると分かりやすいです。WordPressならテーマファイル名（single.psdなど）にすると分かりやすいです。

当たり前と思うかもしれませんが稀に1ファイルにレイヤーでページを分けて作る人がいます。スライスの効率が非常に悪いです。

実際に経験があったのですが、40ページくらいをIllustratorの1ファイルにまとめて送ってくる人がいました。こちらでページ毎にファイルを分けたのですがゴミファイルが残してあったりで散々です。それだけで1日が終わりました…。その人も印刷出身のデザイナーでしたね。

画像素材に十分な解像度をもたせて配置する

上の方で触れていますがデザインカンプの中に置いている画像の解像度は余裕を持たせましょう。2倍以上が好ましいです。サンプル画像として置いているアイキャッチ画像は荒くても良いですが、実際に使われるバナー系の画像やボタン等に使われるアイコンは2倍以上の解像度をもたせるようにしましょう。

UI系は別ファイルで作っておくと有り難い

デザインカンプからUIを切り出す事が出来ますが、デザインの工程で解像度にズレが発生してUIの解像度がばらついてしまうことがあります。それを回避するためにもUI系だけ1つのファイルにまとめると非常にコーディングしやすいです。UIの修正が後で発生した場合もUIファイルを修正すればいいのでメンテナンス性も上がります。ちゃんと作ってあればスプライトシートとして流用できるので非常に効率が上がります。

最後に

結局の所デザインカンプは作りてのセンスで良し悪しが決まります。しかし、注意するべき点をちゃんと踏まえてないと良いデザインも何か微妙にダサく感じてしまいます。

あとは慣れです。沢山作っていくうちにスライスしやすい作り方やWEBページっぽいデザインが出来るようになっていきます。