私的デザインカンプの作り方。

最初に。
あくまでも、私のやり方なので必ずしもこれが正しいわけではありません。
(今では絶滅危惧種なFw使いですしね…)
色々試して自分のやりやすい方法を見つけてね。

1.必要と思われる要素を全てリストアップする
どんなページが必要か(例えばフォームなら入力、確認、完了までの3ページ)
考えられる全ての要素を書き出して、
サイトの全体的なボリュームを把握します。

2.サイトマップ(遷移図)を作る
実際にどのようにページが遷移するか
ユーザーの動線(導線)を考えながらサイトマップを作ります。

3.ワイヤーフレームを作る
ここでやっとFwを起動して作業を開始します。
と言ってもここではまだ全体のおおまかなレイアウトを決めるだけで
デザインはまだしません。
それぞれの要素に見たてた四角を並べていく感じ。
前確かLoLのサイト作るって話したときにざっくり手書きでラフ書いてたようなのを
fwに置き換えてるだけみたいなイメージ。
テキスト要素も決まってるなら適当にとりあえず並べて
全体の幅がどのくらい、マージンは何ピクで統一みたいな基本的な部分を決めていきます。
だいたい決まったらワイヤーにそってガイドを引いておきます。

4.色見本を作る
デザインを作るにあたって使う色を選びます。
絵の具で絵を描くときにパレットに絵の具出すのに近いかな。
メインカラーと、キーカラー、サブの色など大体大まかに4色ぐらい決めたら
色見本用のレイヤーを作ってそこに正方形で並べておきます。
そうしておくとあとからピッカーで拾えるので便利！
基本的にここで選んだ色、またはその派生色以外は使いません。
(作るサイトのイメージによってはたくさん色を使うこともあるけど)

5.いよいよデザイン開始！
とりあえずサイトがどんなイメージなのかを考えて
使うモチーフの形や塗りの型式等を決めながらデザインしていきます。
あとは、デザインの神様が降臨するのをひたすら待つのみ！ｗ

★デザインデータ制作のコツ
・要素グループ毎にレイヤー(グループ)で分ける
→ナビゲーション、ヘッダー、フッター等、要素グループ毎に分けておくと
　ページを量産するときに楽！
　背景とかメインの要素、テキストなんかもそれぞれ個別のグループにすると
　必要な要素だけ選択したいときとかに便利です。
・レイヤー名は極力つける(Ps使うなら特に)
→作業を進めていくとどうしてもいらない要素や
　とりあえず作っておいただけって要素が出てきたりして
　結構レイヤーが煩雑になりがちです。
　分かりやすく名前をつけておくと後からの作業がスムーズです。
・いらない要素は極力消す
→データ重たくなっちゃうからね…こまめに消そうね…(反省)
・整列はあまり使わない
→整列で要素を揃えると、線がボヤけたり滲んだりすることがあるので
　多用しないことをお勧めします。

Categories: WEB。, デザイン。