Webガイドライン作成支援

ガイドラインの種類

• 品質に関する
  ガイドライン

  ・ユーザビリティガイドライン
  ・アクセシビリティガイドライン

• 制作に関する
  ガイドライン

  ・SEOガイドライン
  ・コンテンツモデルガイドライン
  　（情報構造や画面構成上でのルール）
  ・デザインガイドライン
  ・コーディングガイドライン
  ・表記ガイドライン

• 運用管理に関する
  ガイドライン

  ・運用ガイドライン
  ・ 品質チェックシート

コーディングガイドラインの策定（内容例）

表示推奨環境の設定

OSと対象ブラウザを設定することで、動作検証・表示チェックの範囲を明確にします。

コーディングルールの設定

HTML、CSS等の記述ルールの設定や前提条件を明文化し、長期運用時におけるソースコードの品質を維持します。
そのために、設定する機能をもとにDOM構造の実装かつ、将来の拡張性を考慮した余裕のある設計と、デザイン的な影響まで考慮された、各パーツごとに干渉しないようなCSS設計を行います。
また、成果物に対してlint等の機械的チェックによるバリデーションを行なったり、場合によりCSSプリプロセッサやテンプレートエンジンなどの拡張機能なども駆使し、効率的な設計・実装を心がけます。

モジュールパーツの設定

再利用可能なコードブロックの単位をモジュールと定義し、その性質の違いによる細かい分類を行います。
例えば、全体で共通利用可能な基本エレメントをパーツモジュール（見出しやボタン、テキストパターン等）とし、特定の機能を持った要素のまとまりを、ブロックモジュール（画像＋テキストで全体がリンクとなる導線ブロックや表、アコーディオン等）と定義してゆき、それらを一覧化します。
ページの制作時には、これらのモジュールの組み合わせか、必要な場合はヘルパークラスを活用し、独自実装が必要な要素を減らすことで、各ページにおける表示品質の一定化と、運用における制作工数を削減させます。

デザインガイドラインの策定（内容例）

デザインコンセプト

Webサイト全体を通じたデザインのコンセプトを策定・明文化します。これはWebサイトのトーン＆マナーの一貫性といった側面だけでなく、企業全体のブランドイメージをWebサイトでどのように体現していくかという、ビジュアル上の戦略的指針にもなります。

カラー使用ルール

デザインコンセプトに基づいて、Webサイトで扱う主要なカラーを定義します。カラーの組み合わせによって生じる感性的イメージを前項で定義したデザインコンセプトに合致するイメージに整え、整理します。
これは、ブランド（メイン）カラー・サブカラーの定義から、アイコンやテキストカラーといった詳細なパーツまで多岐にわたる場合もあります。

レイアウトルール

Webサイトの基本的なページのレイアウトを定義します。テキストや画像、ボタンといった基本的なパーツがページ内において、どのようなサイズと位置で配置されるかを明確にすることで、運用時のページ更新イメージを理解しやすくできます。
またレスポンシブレイアウトの場合は、PC／タブレット／スマートフォンといった異なるデバイス間でのレイアウトの変化・違いを理解しやすくできます。

各種汎用パーツの設定

固有のパーツで、特に汎用性の高いものをあらかじめ設定・ルール化しておくことで、一からデザイン設計する手間を省き、効率良く運用が行えます。また、パーツが増えることによるデザインの統一性の崩れや煩雑さを防止することができます。

バナー画像やサイズ・容量等の設定

更新性の高いパーツである各種訴求バナーや、詳細ページで使用する製品・サービス等の画像に関して、そのサイズや容量、画像形式を設定することによって、更新時の迷いをなくし品質を維持できるようにします。
必要な場合は、バナー内で使用するフォントの種類やそのサイズ、レイアウトやクリアスペース等も設設することで、デザイン上の最低限の品質が維持できるようにします。

各種Webのガイドラインのご相談・作成は
経験豊富なマイクロウェーブにぜひお任せください。