デザインカンプを作るまでの工程はデザイナーさんそれぞれで違うと思うのですが、直近の案件で師匠のやり方を教えていただき、同じように作成してみたところはかどったので、そのやり方をば書きたいと思います。
主な制作フロー
- 対象のサイトについての情報収集
- 構成要素の書き出し、精査
- ワイヤーフレームの作成
- イメージの近い参考サイトやパーツ探し
- 参考パーツで組み立てたカンプもどきを作成
- デザインカンプの作成
うーん文字に起こすと当たり前なことばかりだ…
私は今まで「５」をしておらず、これがあることでとってもイメージがわきやすくカンプの作成がいつもよりスムーズに行えたと思いました。
対象のサイトについての情報収集
情報が０からデザインすることなんてものすごい天才しかできないのでは…
クライアントとユーザーに気に入ってもらえるデザインを作るにはヒントが必要なので、そのヒントを自分で作ってゆく作業です。探偵です。
何を推しているのか、ターゲットの年齢層やロゴの雰囲気から連想してコンセプトを決定していき、サイトのデザインイメージをもわもわと脳内でつくります。
構成要素の書き出し、精査
トップページ、下層ページに何があるかグーグルさんのスプレッドシートとかに書き出して、これはいるかな、これはいらんだろ、というのを精査していきます。
サイト全体の構成要素と、作るページの構成要素を書き出しておけばワイヤー作る時に便利。
ワイヤーフレームの作成
WEBデザインの教本やサイトなどでは、ソフトを使って綺麗なワイヤーを作られていることが多いため、最初は私も製図のように作成していましたが、最近はもっぱら手書きになりました。
ソフトを使ってその通りカンプが進めばよいですが、いざ画像やデザインしたテキストを入れた時に「思ってたんとチガウ…」ってなるので、絶対になるので、ワイヤーの時点で気合いを入れなくてよいと考えています。
下層ページやパーツをデザインする時、イメージをかためるためにメモ帳にぐちゃぐちゃと書いててハッと、これってワイヤーと同じ役割じゃんて思いました。ならワイヤーだって手書きのなぐり書きでいーじゃん！その方が早いじゃーん！と。
参考サイトやパーツ探し＆カンプもどきの作成
イメージの参考になるサイトを見まくる＆参考になるパーツがあったらキャプチャをストックして、イラレのアートボードの枠外にベタベタと貼り付けていきます。悩んだ時にすぐ参考にできる！べんり！
その参考集からパーツを切り出し、ワイヤーどうりにペタペタはっていき、カンプもどきを作成。
パクリになってはいけないのでそのままデザイン盗むなんてことはないですが、参考があるのとないのでは作成スピードが全然違うと思いました。
コンセプトやテイストが固まってるとはいえ、やっぱり目に見えるものがない状態で過去にインプットした情報をアウトプットしていくのは結構無駄な時間使ってしまうまー
カンプの作成
本番！私の作り方としては、大まかな位置を四角でマークアップして、ここにはこれが入るよーというのをざざっとメモがわりに置いていき、全体ができあがったところでパーツを作って配置していきます。
そこからブラッシュアップして洗練、ひたすら洗練…
そんなかんじでございます。
しかし、カンプ作成の時にエリアをマークアップしていくのはもうワイヤーの役目を果たしてるので手書きワイヤーすっとばしてカンプ作成時のアートボード上でやってしまえばいいのかも、とか
ワイヤー組むのとカンプもどき作るのどっちが先の方がスムーズにいくのかとか
はたまたもっとやりやすい方法があるのか、まだまだ自分のやり方は模索中です…
とりあえずカンプもどきつくるとはかどったよの話でした。
↑この本にはWEBデザイナーさんはほとんど載っていませんでしたが、こんなイメージでWEBデザイナーさんのワークフロー本ほしい…
