ウェブサイトの制作に携わる全ての人に役立つスタイルガイドを簡単に作成できる -Style Guide Boilerplate
Post on:2013年7月9日
ウェブサイトのデザインや実装の一貫性を促進するために、制作に携わる全ての人に役立つスタイルガイドを簡単に作成できるテンプレートを紹介します。
現役時代、独自のテンプレートを使ってましたが、こういう便利なものがリリースされる時代なのですね(遠い目
![サイトのキャプチャ](/wp-content/uploads-201302/2013070901-.png)
Style Guide Boilerplate
Style Guide Boilerplate -GitHub
Style Guide Boilerplateの紹介の前に、スタイルガイド未体験の人用にどのように役立てるか簡単に説明します。
- ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。
- モジュール形式の考え方を促進する。
- ページを作成する際にパーツやエレメントで迷わないようにする。
- ウェブサイトを効率的に管理する。
スタイルガイド制作のタイミングとしては、草案を制作中に作りつつ、納品時には定義が全て網羅されている状態がベストではないでしょうか。制作するより、スタイルガイドをつくる方が楽しいという人もいました。
では、Style Guide Boilerplateを紹介します。
ウェブページで使うさまさまなエレメントやレイアウトの定義を明示し、実装方法を提示します。
![サイトのキャプチャ](/wp-content/uploads-201302/2013070903-01.png)
パンくずのスタイルガイド
「View Source」をクリックすると、コードが表示されます。
![サイトのキャプチャ](/wp-content/uploads-201302/2013070903-02.png)
パンくずのスタイルガイド
以下、Style Guide Boilerplateのデモを例に、どのようなスタイルを定義できるか紹介します。
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-01.png)
まずはスタイルガイドの概要からはじまり、カラースキーム、フォント
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-02.png)
ベースとなるスタイルの定義
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-03.png)
画像とキャプション
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-04.png)
ボタンとフォーム(フォームはごく一部のみ掲載)
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-05.png)
h1-h6の見出しのバリエーション
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-06.png)
区切り線とリスト
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-07.png)
動画、音楽、SVGなどのメディア関連
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-08.png)
プログレスバー
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-09.png)
コンテンツブロックのレイアウトパターン
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-10.png)
テキストエレメントのパターン
![サイトのキャプチャ](/wp-content/uploads-201302/2013070902-11.png)
アラートパネルやパンくずなど
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なので、商用サイトでも利用できます。
sponsors