サイト制作時のデザインやコードの「ぶれ」をなくすスタイルガイドを作成するためのテンプレート -Style Guide Boilerplate
Post on:2014年6月2日
ウェブサイトの制作時で大切なことの一つは、デザインやコードの「ぶれ」をなくすこと。
ウェブサイトを制作する際、プロジェクトに関わる全ての人が参考にできるデザインのスタイルガイドを作成するBootstrapベースのテンプレートを紹介します。
![サイトのキャプチャ](/wp-content/uploads-201402/2014060202.png)
Style Guide Boilerplate Bootstrap Edition
Style Guide Boilerplate -GitHub
スタイルガイドは作成した時の利点が多く、もしまだ未の人は是非チャレンジしてみてください。
また、もう利用している人には、Bootstrapベースで簡単にスタイルガイドが作成できるので試す価値があると思います。
スタイルガイドを導入する利点
- ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。
- モジュール形式の考え方を促進する。
- ページを作成する際にパーツやエレメントで迷わないようにする。
- ウェブサイトを効率的に管理する。
このスタイルガイドのテンプレートは、以前紹介した「Style Guide Boilerplate」にインスパイアされたもので、Bootstrapをベースにしています。
デモでは、作成したスタイルガイドをオンラインで見ることができます。
![デモのキャプチャ](/wp-content/uploads-201402/2014060203.png)
右上のナビゲーションから要素を一覧でき、各要素の「View Source」で実装する際のコードが表示されます。
以下、主要となる要素をピックアップしてみました。
![デモのキャプチャ](/wp-content/uploads-201402/2014060204-01.png)
スタイルガイド、まずはカラースキームの定義から
![デモのキャプチャ](/wp-content/uploads-201402/2014060204-02.png)
グリッドとタイポグラフィ
![デモのキャプチャ](/wp-content/uploads-201402/2014060204-03.png)
打ち出し
![デモのキャプチャ](/wp-content/uploads-201402/2014060204-04.png)
グローバルナビゲーションをはじめ、各種ナビゲーション
![デモのキャプチャ](/wp-content/uploads-201402/2014060204-05.png)
各種ボタン
![デモのキャプチャ](/wp-content/uploads-201402/2014060204-06.png)
画像の使い方
![デモのキャプチャ](/wp-content/uploads-201402/2014060204-07.png)
テーブル
![デモのキャプチャ](/wp-content/uploads-201402/2014060204-08.png)
通知パネルなど
![デモのキャプチャ](/wp-content/uploads-201402/2014060204-09.png)
フォーム
sponsors