Web design style guide

Web design style guideもし、得意先から仕様書、スタイルガイドも納品してほしいと言われたら。。。

Semantic studios の記事 User Experience Deliverables (和訳:ユーザーエクスペリエンスデザイン成果物リスト / Noriyo Asano)を読むことで、あらためてIAの成果物の多さに気づきます。今後のこともあるので、記事中にある University of PennsylvaniaのWeb style guideを参考にguideの項目を整理してみました。
参照サイト:
Semantic studios - User Experience Deliverables
IA Spectrum ユーザーエクスペリエンスデザイン成果物リスト
Web Style Guide (University of Pennsylvania)

Web design style guide
1. Introduction
スタイルガイドの役割についての説明

2. Required Elements
必要な共通要素
2-1. Logo
ロゴをクリアに見せるための定義
- Logoの位置
- Logoの要素と取り扱い方
- リンク

3. Color Values
使用しているキーカラー、ベースのカラーパレット
 CMYK / RGB / WEB COLOR 16進数

4. Typography
ブランドトーンを整えるフォントの設定
 アイテム/フォント/サイズ/行間/カラー/CSS Class 
 Titles/Helvetica,sans-serif/12px/#000000/h1

5. Cascading Style Sheet
CSSテンプレートの利用の説明

6. Page Guidelines and Templates
PAGEテンプレートの利用の説明

7. Web Graphics
主要なグラフィック要素の利用説明
- Logo
- 写真
- アイコンや図形
- ツールバー/サイドバーナビゲーション

8. Accessibility
基準を満たしたアクセシビリティガイドラインの表記

9. Best Practices on the Web
製作者向けマニュアル

10. Contents Guidelines
用語の統一などライティングの基準を表記

以上、ご参考までで。

Posted : Round up

About the author
  • コメントを残す