コーディングの基にもなるデザインカンプ

そもそもデザインカンプとは?

デザインカンプとはホームページデザインの完成見本のことです。デザインカンプの作成前には、各セクションや要素を大まかに配置したワイヤーフレームを作るのが普通です。デザインカンプでは、ワイヤーフレームを基にして実際に画像を配置したり色を着けたりして、実際のホームページデザインの完成形に近づけます。

デザインカンプの役割の一つが、イメージを具現化するというものです。頭の中でなんとなく配色のイメージが決まっていたとしても、実際にホームページに色を着けてみるとイメージとは違うものになってしまうこともあり得ます。

デザインカンプを作成することで、実際のホームページとのイメージのズレを最小限にとどめることができるのです。また、デザインカンプを基にすることで、HTMLやCSSでのコーディングもスムーズに行うことができます。

デザインカンプを作る際のポイント

デザインカンプを実際に作る際には、960pxなどと全体の幅を決めておきます。そして、ガイドと呼ばれる線を引いて、縦と横でそれぞれの要素の位置を揃えることが重要です。

フォント選びも大事なポイントです。明朝体やゴシック体、楷書体などから、ホームページのイメージに合ったフォントを選びます。その際、あまりに多くのフォントを使用してしまうと、ゴチャゴチャとした印象になってしまうため、フォントの種類は2つか3つほどにとどめておいたほうが無難でしょう。

フォントや配色などがなかなか決まらない場合には、参考サイトをお手本にするという方法もあります。インターネット上にはさまざまなホームページのデザインを紹介しているサイトがあります。そんなサイトから自分の気に入ったホームページを選んで参考にするといいでしょう。