Illustratorにてカンプ作成

• ここをしっかりやると後のコーディングが楽になる
• body分を含めて作成する

※作成する際にはwebサイトとしての体裁や、情報の優先順位などを考えながら作る。

1200pt*1500pt

前準備

• Illustratorにて新規作成
• web 1200pt*1500pt。ピクセルグリッドにチェック。方向：横向き
• 環境設定を確認する
• 単位が全てピクセル。グリッドを今回は100pt、分割10にする
• ルーラーとグリッドを表示する。
• 長方形ツールで960pt*1500の四角形を作成する（container）
• 左上を基準にし、x:120,y0にする。
• ルーラーの基準をcontainerにするために
• containerを黒矢印で選択し、アートボードに変換する
• 960grid systemをDLする
• 960-grid-12-col.aiをテンプレートのチェックを外しファイル配置
• 元が1020から960に配置なのでx:-30,y:0にする。
• ピンクのグリッドを選択して新規レイヤーをつくる
• レイヤーに名前を付け（grid）、その際にテンプレートにチェックを入れる
• gridを下まで下ろし、黒矢印で選択し現在のcontainerレイヤからgridレイヤに移動する。

中身

• 新しくレイヤーを作り名前をheaderにする
• 表示でグリッド、ポイントにスナップにチェックを入れる
• 960*100を長方形ツールで作る
• グレーで色を付け作る
• フォントはメイリオを使う
• 文字のアンチエイリアスをはずす
• フォントサイズは偶数にする
• 以下中身を作りこんでいく

色について

• キーカラーを選択する
• カラーガーイドのハモニールール
• 色の参考候補がでる

画像の切り抜き方法

• アートボード-選択オブジェクトに合わせる
• ファイル-WEB用に保存（アートボードサイズでクリップ）

photoshopで切り抜く場合

• ファイル-書き出し-PSI-72dpi、レイヤー保持

色の参考サイト

• adobe colorCC
• NIPPON COLORS