dasaionnaの日記

人から学び、自分を作る。

ワイヤーフレーム デザインカンプの作り方

デザインカンプ制作時のポイントと作成方法
*使うツールの環境設定を整える
*コーディングしやすいようにデザインルール(レイヤー名)を決めながら作る
*誰でもいじれるようわかりやすいデザインファイルを作る
 
デザインルールを決める
*サイト全体の横幅サイズから各ブロックのサイズを決める
*マージン(要素周りの余白)の数値を決める
*フォントの種類やテキストの行間、サイズを決める
*矩形の形状(角丸)などの数値を決める
*色やレイヤースタイルを決める
 
コーダーさんがコーディングしやすいように 次の文章との間は何ピクセル開けるかなどをガイドを引いて作業を行う
 
レイヤースタイルは商用利用可能なレイヤーを配布している方のサイトからダウンロードして使うと何かと便利だったりする。グラデーションオーバーレイとかも商用利用OKな配布サイトからダウンロードするとサクサク制作していける。
webフォントはadobeのtypekitというのがあるので、そこからフォントをダウンロードして使ったりしている。
 
 
わかりやすいデザインファイルを作る
*レイヤーにわかりやすい名前をつけよう(英語の方がおすすめ。レイヤー名がそのままファイル名として使われる場合もあるので英語にしている。btn_buyなど)
*要素別にレイヤーをグループ化しよう(要素というのはhtmlの要素のこと。)
*レイヤーは上から順番に並べよう(ヘッダは一番上で、フッターは一番下でみたいなこと。htmlの並び順と同じになるようにする。)
*使用していないレイヤーは削除しよう
*共通の要素はスマートオブジェクトを使うと便利(ボタンとか)
 
CCの人は他の人とパーツを共有して自分のphotoshopに素材を落とし込んだりも出来る。
作りたいサイトの横幅より大きめのカンバスで作った方がいい。
 
ダウンロードする素材はphotoshop グラデとかスタとかいれるとスタイルが出たりする。
スライスはちょっと前はデザイナーが担当していた。最近はコーダーができるようになってきた。「抽出」を使う。
bracketsというのはadobeが出しているコードエディター。