• カラーコード
• フォントの種類
• サイズ
• 領域のピクセル数

これはhtmlコーダーや品質チェック担当が必要であり、納品後に必要になることはほとんどない。

なぜ、そのデザインに至ったのか？

すべてのビジュアル要素には、

• リサーチ結果
• 業界標準
• 議論の結果
• 直感に基づく提案

がある。

スタイルガイドは制作の集大成であり、最終的にはサイトが完成するまでに至る意図や意思決定をもれなく記述するのが理想。

スタイルのガイドライン構成

サイト構築の流れに合わせればそのデザインに至った理由、背景をカバーできる。

ブランド戦略

• ターゲット
• ブランドメッセージ

ビジュアルデザイン

• 配色
• フォント
• 写真
• イラスト・アイコン

コンテンツ・IA

コンセプト

Webサイトとユーザーの位置付けを可視化

分類・タクソノミー

機能とコンテンツをどう分類するか定義（その分類に至る根拠、分類の細かさ、同じ階層の最大項目数など今後のメンテの留意点）
エクセルを使うと便利。またサイトマップとの併用も可能

トーン・マナー

表記ゆれ防止

UI

ユーザビリティ・アクセシビリティ指針

チェックリストを作成（対応は必須か推奨か明記）

ナビゲーション

分類の定義、幅（項目数）と深さ（階層）
ナビゲーションを画面上でどうデザインするか定義

フォーム

• ラベルの表記方法
• 例の表示方法
• 入力チェックの定義
• エラー時の対応方法
• ボタンの使い方

ウィンドウ

• ウィンドウの遷移方法
• ポップアップの扱い
• 別ウィンドウの使い方

レイアウト

モジュール化

ページデザイン

• ページテンプレート
• モジュール