デザインカンプを作ってみよう②完成編

前回はデザインカンプの下書き段階までを、谷宜樹が解説しました。
今回は、作成した下書きをもとにデザインカンプを仕上げていきましょう。
クライアントがいる場合は、サイズや配色などの指定がないかあらかじめ確認しておいてください。
勉強中の方は、ワイヤーフレーム通りになっているか見比べ、参考にするサイトから配色のイメージをもらっておくと良いですね。
気になることがあれば、下書きの段階で解決しておくことが大切です。
コーディングできるかどうかも確認したら、次に進みましょう。

■下書きを書き写してみよう

ワイヤーフレームや下書き、参考にするサイトなどを準備して、本番用シートに書き写していきます。
下書きをphotoshopで作成した場合は、書き写す必要はありません。
紙に下書きした場合や別のソフトを使って下書きした場合は、そのままの内容でphotoshopに写しましょう。
画像やアイコンなどの素材が用意してあれば、完成品に使うものと同じものを配置します。

■大まかに配色してみよう

下書きが写せたら、画像やアイコンを配置し、色も大体決めておくとスムーズにデザインできます。
クライアントからの指示がない場合は、参考にするサイトから決めて良いでしょう。
クライアントから指定されている場合でも、デザイナーが別のものを提案することがあります。
クライアントとの打ち合わせによって変更もあり得るので、この段階ではざっくりとしたものでOKです。

■ガイド線を引いてみよう

まずWEBページの幅の中心に、線を1本引いてください。
次に、文字が入力される範囲「コンテナ幅」を決め、ガイド線を引きます。
例えば、WEBページのギリギリまで文字を入力するなら、ページの左右の両端に線を引きましょう。
余白を持たせたい場合は、その幅を考えながら線を引きます。
一般的に、800～1300pxくらいのコンテナ幅が多いでしょう。
この線を目安に、具体的な配置をすることができます。

■バランスを見ながら組み立てよう

ガイド線まで引けたら、ワイヤーフレームを見ながら中身を組み立てていきます。
まずはガイド線を目安に、下書きを書き写したところの位置がズレていないか確認しましょう。
画像の大きさが適切か、イメージ通りの配色になっているかも忘れず確認して下さい。

これでデザインカンプの完成です。
初めて作る場合は、イメージしていたものと違うものになることもあります。
上手くいかない時には、ワイヤーフレームや下書きの段階から見直す必要があるでしょう。
焦らずじっくり準備して取り掛かるのが、谷宜樹のおすすめです。