デザインカンプを作ってみよう！①下書き編

前回は、WEBデザインをする時に重要な「デザインカンプ」について谷宜樹がお話ししました。
今回はデザインカンプの作り方について、まずは下書きの段階までを詳しく見ていきます。
手順に沿って、作成するコツなどもお話していきますので、ぜひ一緒に作ってみてくださいね。

■どのような流れで作成するかイメージしてみよう

デザインカンプは、一般的に次のような手順で作成されます。
勉強中の方は、自分にどんな技術が必要になるか考えてみましょう。

①「ワイヤーフレーム」を作る
②参考にするサイトを探す
③デザインカンプの下書き
④ページの幅と高さを決める
⑤下書きを書き写す
⑥大まかな配色を決める
⑦「ガイド線」を引く
⑧全体のバランスを確認

■「ワイヤーフレーム」を作成しよう

WEBページを作る際は、まずレイアウトを含めた「ワイヤーフレーム」という設計図を作成します。
デザインカンプの前に、WEBページの配置を決めておきましょう。
例えば、ロゴやメインとなる画像の位置と大きさ、記事を貼り付ける場所などを図にして表します。
このワイヤーフレームの作成にも細かいルールや方法があるので、また後日、谷宜樹が解説しましょう。
今回は、初めに設計図を作るということが理解できればOKです。

■参考にするサイトはどこで見つける？

ワイヤーフレームができたら、どのようなデザインにしていくか考えます。
一から新しいものを作るのは難しく時間もかかるので、既存のデザインを参考にするのが一般的です。
以前、谷宜樹が紹介したギャラリーサイトなどを利用するのも良いでしょう。
できるだけ豊富なイメージの中から選びたいので、少なくとも5～10個くらいは参考資料を集めておいてください。

■デザインカンプの下書きをしよう

どのようなデザインにするか決まったら、ワイヤーフレームを見ながら下書きしてみましょう。
Photoshopやillustratorで作成するのが一般的です。
ワイヤーフレームに肉付けするように、実際のデザインと同じように作っていきます。
クライアントからの指示がある場合は忘れずに取り入れましょう。

■ページの幅と高さは？

クライアントからの指示に従うのが基本です。
特に指定がない場合は、1000px前後の幅で作ると良いでしょう。
PCでは、1280px×1920pxで作成されているものが一般的です。
解像度にも考慮し、表示させたいデバイスによってどのくらいのサイズが見やすいか考えて作成します。

ワイヤーフレームの作成からページのサイズ感を決まるまでが、デザインカンプの下書きです。
ここまで来たら、次は配色や位置の決定をしていきましょう。
続きはまた次回、谷宜樹が解説します。