Webスタイルガイド用のユーザードキュメントの書き方

スタイルガイドは、ブランドの視覚的要素の使用規則をまとめたものです。 それらは一般に、多くの人々によって作成されたコンテンツにわたって一貫したイメージを保ちたいと思う組織によって使用されます。 Webスタイルガイドは、オンラインコンテンツがさまざまなスキルレベルのユーザーによって作成および編集される場合に特に重要です。 組織に関連付けられているWebページに特定の規則を設定することで、すべてのページが確実に一貫性のあるアイデンティティを推進するのに役立ちます。 スタイルガイドのユーザードキュメントを書くときは、明快で簡潔な言葉を使い、Webデザインのスキルレベルが最も低いユーザーに向けて書いてください。

1。

各タイプのページのWebレイアウトおよびスタイルの全体的な説明とともに資料を開きます。 特定のページカテゴリは組織によって異なりますが、ランディングページ、タイトルページ、ホームページ、サブカテゴリページ、画像のみのページ、およびテキストのみのページを検討してください。 構造図を使用して情報の複雑な階層を説明し、各レイアウトの例を示すグラフィックを含めます。

2。

ロゴをさまざまな種類のWebページで使用する方法を説明します。 ユーザーにロゴの配置場所を知らせ、サイズの上限と下限をリストします。 複数のロゴレイアウトとカラーバリエーションがある場合は、それらが使用される可能性のある場所をリストします。 たとえば、タイトルに組織の完全なタイトルを使用するページでは、ロゴマークのみを使用することが許可される場合があります。 ユーザーが正しいバージョンを簡単に保存できるように、ロゴファイルを寸法とともにドキュメントに含めてください。 許可されていない編集を防ぐために、ロゴの色、形、サイズ、またはレイアウトを変更しないようにユーザーに警告する文でテキストを閉じます。

3。

組織のすべてのWebページで使用する必要がある特定のフォントを一覧表示します。 見出し、副見出し、タイトル、本文、キャプション、引用符のフォントを含めます。 各カテゴリについて、フォント名、サイズ、およびそれが太字、斜体、下線付き、または大文字かどうかを示します。

4。

Webの例外については、組織のオフラインスタイルガイドに書いてください。 テキストリンクを表示する方法や、ページの最後に外部の情報源を含めるかどうかなど、印刷物に問題のない要素を含めます。 あなたのグループがより非公式のオンラインスタイルを持っている場合、Webコピーを書くときにトーンを達成する方法をユーザーに説明してください。

5。

ユーザーがページをデザインするときに使用できる色を教えます。 テキスト、写真のアウトライン、ヘッダー、ナビゲーションバー、およびページ区切りの各種類の色を一覧表示します。 一貫性を保つために、特定のRGBカラーコードを付けてください。 色はブランドイメージを表現するための強力な方法であることをユーザーに説明し、全体的なユーザーエクスペリエンスを維持するために記載されている色のみを使用するようにユーザーに警告します。

6。

組織のWebページに写真の使用に関する規則をレイアウトします。 すべてのページに特定のデザインがある場合は、ユーザーが写真を配置できる場所を説明します。 さまざまな用途に必要なピクセルサイズを一覧表示します。たとえば、テキスト内写真、ヘッダー写真、サイドバー写真などです。 Webサイトを読みやすくするために、特定の画像解像度を指定します - Webの場合、72 dpiが標準です。 速度を最適化するためにWebサイトに配置する前に、画像をトリミング、サイズ変更、および編集するようユーザーに指示します。

7。

各タイプのページにある必要があるステートメントまたはデザイン要素を説明することによってドキュメントを閉じます。 機会均等雇用明細書や著作権表示などの項目を含め、ページ上の正確な配置をユーザーに知らせます。 ページに表示する必要があるグラフィックまたは画像がある場合は、配置要件をリストし、すぐにダウンロードできるようにファイルを指定してください。