６．デザインカンプ作成

ワイヤーフレームをもとにデザインカンプを作成します。

予算や納期に限りがある場合は、トップページと主要配下ページのみデザインカンプを作成します。

参考サイトのピックアップ

サイト作成の練習時はシンプルな構成の参考サイトをみつけ模倣しましょう。

デザインのルールを決める

表示領域の幅

コンテンツを配置する表示領域の幅を決めます。

サイトによっては「通常の表示領域幅」「狭い表示領域幅」「広い表示領域幅」等、複数の表示領域幅を設定することもあります。

列幅

2カラム構成や3カラム構成の場合は列幅を決めます。

使用する色

• ページ背景色
• 文字色
• キーカラーやポイントカラー等
• ボタンの色
• 使用禁止色

文字

• 書体
• 基本となる文字の大きさ
• 行間

デザインカンプ作成時の注意事項

1. パーツ単位でデザインする
   「共通パーツ」「類似パーツ」は「ベースパーツ」を作成して流用する
   ※XDの場合は「コンポーネント」をうまく使う
2. コーディングできるデザインになっているか
   ※デザインによってコーディング難易度が変わります
   　納期や予算も考慮してデザインを考えましょう
3. コンテンツ量に応じて可変するパーツはデザインが可変しても破綻しないか
4. ホバー時デザインを作成しているか
5. 画像書出しを考慮してグループ化されているか

サイト制作の準備

1. サイトの目的と閲覧者を策定
2. サイト内に必要なコンテンツの確定
3. サイトマップ作成：サイト構成を作成
4. ワイヤーフレーム：レイアウト・パーツ決定
5. ワイヤーフレーム：作成
6. デザインカンプ作成：ページデザイン
7. ディレクトリマップ作成
8. コーディング