ウェブサイトの制作に携わる全ての人に役立つスタイルガイドを簡単に作成できる -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なので、商用サイトでも利用できます。

top of page

©2017 coliss