ウェブサイトの制作に携わる全ての人に役立つスタイルガイドを簡単に作成できる -Style Guide Boilerplate

ウェブサイトのデザインや実装の一貫性を促進するために、制作に携わる全ての人に役立つスタイルガイドを簡単に作成できるテンプレートを紹介します。

現役時代、独自のテンプレートを使ってましたが、こういう便利なものがリリースされる時代なのですね（遠い目

Style Guide Boilerplate
Style Guide Boilerplate -GitHub

Style Guide Boilerplateの紹介の前に、スタイルガイド未体験の人用にどのように役立てるか簡単に説明します。

• ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。
• モジュール形式の考え方を促進する。
• ページを作成する際にパーツやエレメントで迷わないようにする。
• ウェブサイトを効率的に管理する。

スタイルガイド制作のタイミングとしては、草案を制作中に作りつつ、納品時には定義が全て網羅されている状態がベストではないでしょうか。制作するより、スタイルガイドをつくる方が楽しいという人もいました。

では、Style Guide Boilerplateを紹介します。
ウェブページで使うさまさまなエレメントやレイアウトの定義を明示し、実装方法を提示します。

パンくずのスタイルガイド

「View Source」をクリックすると、コードが表示されます。

パンくずのスタイルガイド

以下、Style Guide Boilerplateのデモを例に、どのようなスタイルを定義できるか紹介します。

• デモページ

まずはスタイルガイドの概要からはじまり、カラースキーム、フォント

ベースとなるスタイルの定義

画像とキャプション

ボタンとフォーム（フォームはごく一部のみ掲載）

h1-h6の見出しのバリエーション

区切り線とリスト

動画、音楽、SVGなどのメディア関連

プログレスバー

コンテンツブロックのレイアウトパターン

テキストエレメントのパターン

アラートパネルやパンくずなど

Style Guide Boilerplateの対応ブラウザは下記の通りです。

• Chrome
• Firefox
• Safari
• Opera
• IE6+
• Stock Android Browser (4.0+)
• Chrome for Android
• Firefox for Android
• Opera Mini
• Opera Mobile
• Safari for iOS
• Chrome for iOS

ライセンスはMIT Licenseなので、商用サイトでも利用できます。