パターンライブラリとも呼ばれるスタイルガイドは、Webサイトの成長や、新しいチームメンバーがWebプロジェクトで作業するときに、意図したとおりにデザインを継続できるようにするための優れた方法です。 各スタイルまたはパターンは、Webサイトのデザイン要素のマークアップとスタイルをグループ化したものです。

最新のスタイルガイドは通常、実際のWebページとして表示され、Webサイトまたはアプリケーションデザインのさまざまな要素を示します。 複数の人または複数のチームがWebプロジェクトに取り組んでいる場合、スタイルガイドは、視覚要素がどのように見えるかを推測します。 これは、プロジェクトの一貫性を保つために、全員が同じページにいるようにするための優れた方法です。

チームを軌道に乗せ、コードを乾かします

視覚的なデザインに加えて、スタイルガイドはCSSファイルが制御不能にならないようにするのに役立ちます。 私たちは皆、繰り返しのコードを経験しているので、コードを保守可能に保ち、絶対に必要なものがないように努力しましょう。 チームの全員がすべてのスタイルを1つの場所で確認できる場合、現在存在するスタイルがすぐにわかるため、スタイルシートに重複することはありません。

スタイルガイドは、モジュールやその他の設計要素の設計を含むコレクションとして機能するため、新しい設計要素が確立された標準に適合するかどうかを簡単に確認できます。

Webスタイルガイドには何を入れるべきですか？

私たちが知っているように、ウェブデザインは少しワイルドに動く傾向があります。 良いニュースは、特にスタイルガイドを使用する場合の効果的なWebデザインがあなたのコントロールの範囲内にあるということです。 スタイルガイドは、非常に単純なものから非常に複雑なものまでさまざまです。 私はあなたが始めるためにここにいくつかのアイデアを含めました。

カラーパレット

16進数の色が記載された見本を含めることをお勧めします。 あなたの将来の時間に追われた自己はあなたに感謝します！ 「あの六角色はまた何色？」と何度聞いたのか、聞いたのか思い出せません。 クイックリファレンスを持つことは確かに誰にとっても役に立ちます。

タイポグラフィと階層

説明的な見出しプレースホルダーは、レイアウト内の要素を使用する必要があるコンテキストの種類をチームが理解するのに役立ちます。

スタイルガイドには、推奨されるヘッダー階層も含める必要があります。 h1、h2、h3などはどれですか？ プライマリヘッダー、サブヘッダー、サイドバーウィジェットの見出しなどの説明的な単語も、将来の多くの当て推量を排除します。

たとえば、ブロック引用符など、あまり一般的ではないタイポグラフィ要素を含めることを忘れないでください。 めったに使用されないものも含めて、すべてのテキスト例を指定する必要があります。 ブロッククォートまたは証言に特定のヘッダーとボディスタイルがある場合は、より一般的に使用される要素と同じ詳細でそれらを指定します。

画像

プロジェクトの画像の一般的な扱いを含めます。 画像には境界線や独自の不透明効果が必要ですか？ ホバーインタラクションはありますか？ もしそうなら、あなたのスタイルガイドでそれを入手してください。 複数の治療法がある場合は、それぞれを含め、特定の治療法をいつ使用するかを定義します。

リンク、ナビゲーション、およびフォームスタイル

UXの観点からは、リンク、ナビゲーション、およびフォーム要素は、3つの非常に重要なアヒルを連続して持つ必要があります。 テキストリンク、ボタン、およびナビゲーションスタイルをスタイルガイドに含める必要があることは間違いありません。 ただし、通常、ホバー、訪問済み、およびアクティブなスタイルのインスタンスをそれぞれに含めることを忘れがちです。 それらを文書化して、サイトの細部の一貫性を確保します。

優れたスタイルがフォームと融合する場合、スタイルガイドよりもすべてのWebフォーム要素をアピールするのに最適な方法はありません。 これは、すべてのフォーム要素、機能するもの、機能しないもの、欠落しているものを計画してインベントリを作成するための優れた方法です。

具体的には、フォームスタイルに含める重要なコンポーネントを次に示します。

• 通常の入力フィールドの状態
• フォーカスされた入力フィールドの状態
• ラベルスタイル
• フォームプレースホルダーテキスト
• ユーザーアクティブテキスト
• ユーザーが入力したテキスト
• 送信ボタン
• エラーメッセージ
• チェックボックスのスタイル

スタイルガイドに含めるその他のアイデア

遭遇する可能性のあるすべての要素をリストすることは困難ですが、ここにあなたが有益であると思うかもしれないいくつかの要素があります：

• コールアウトボックス
• 水平リンク
• コメント要素
• カテゴリタグ
• ポップアップモデル

独自のWebスタイルガイドの作成方法

あなたが最初からスタイルガイドを作成するという英雄的な偉業に取り組む幸運な人なら、私はあなたのためにいくつかの役に立つ考慮事項を持っています。

私は個人的に、空白のHTMLファイルから始めて、そこから進むのが好きです。 このスタイルガイドを実際のWebサイトまたはアプリケーションのCSSにリンクします。 そうすれば、変更が両方の場所に反映され、2つのCSSファイルを維持することを心配する必要はありません。

まず、サイトのすべての要素のインベントリを作成してから、それぞれに必要な正確なマークアップをスタイルガイドに追加します。 威圧的に聞こえますか？

最初にページグリッドを評価してから、スタイルガイドにタイポグラフィやカラーパレットなどの重要な要素を入力し、作業を進めながらパターンを追加します。 その他のデザインパターンには、画像、ブロッククォート、サイドバースタイル、ボタン、フォームスタイルなどが含まれます。

私を信じて。 これはよく費やされた時間です。 また、永続的なものはなく、すべてを簡単に調整および拡張できることを忘れないでください。

スピードを求めて、すべてのスタイルを手動で入力するのが苦手な場合は、再利用可能なパターンを簡単に作成して使用できる優れたツールがいくつかあります。

たとえば、JeremyKeithのPatternPrimerは、フォルダー内のすべてのパターンのリストを生成します。 これは、コードスニペットをパターンライブラリに変換するためのシンプルなPHPツールです。 HTMLとしてレンダリングされたパターンが表示されます。

もう1つの優れたオプションは、Kyle NeathのKSSです。これは、スタイルガイドのドキュメント化にも最適なツールです。 これらの生成された自動スタイルは、CSSドキュメントに関連付けられたHTMLスタイルガイドを作成するのに役立つ一連のガイドラインです。 KSSは、CSSプリプロセッサとうまく連携するように設計されており、多くのCSSフレームワークに対応しています。

ご存知のように、ウェブサイトは決して完成しません。 新しい要素が必要な場合は、追加するだけで簡単に生活スタイルガイドを拡張できます。

最初のスタイルガイドは、最終的に作成するページと同じではない場合がありますが、新しいスタイルをテストする絶好の機会であり、複数のブラウザー用に設計する場合に特に役立ちます。

スタイルガイドの例

素晴らしいスタイルガイドの実際の例が欲しいですか？ 了解しました：

アメリカのコード
Mailchimp
Salesforce

デザインに一貫性を持たせることで、スタイルガイドはWebサイトの拡張と将来のWeb拡張を容易にします。 スタイルが追加および変更されると、このドキュメントは、チームに情報を提供し、スタイリンのプロジェクトを披露するための優れた方法です。