サイト制作時のデザインやコードの「ぶれ」をなくすスタイルガイドを作成するためのテンプレート -Style Guide Boilerplate

ウェブサイトの制作時で大切なことの一つは、デザインやコードの「ぶれ」をなくすこと。

ウェブサイトを制作する際、プロジェクトに関わる全ての人が参考にできるデザインのスタイルガイドを作成するBootstrapベースのテンプレートを紹介します。

Style Guide Boilerplate Bootstrap Edition
Style Guide Boilerplate -GitHub

スタイルガイドは作成した時の利点が多く、もしまだ未の人は是非チャレンジしてみてください。
また、もう利用している人には、Bootstrapベースで簡単にスタイルガイドが作成できるので試す価値があると思います。

スタイルガイドを導入する利点

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

このスタイルガイドのテンプレートは、以前紹介した「Style Guide Boilerplate」にインスパイアされたもので、Bootstrapをベースにしています。
デモでは、作成したスタイルガイドをオンラインで見ることができます。

デモページ

右上のナビゲーションから要素を一覧でき、各要素の「View Source」で実装する際のコードが表示されます。

以下、主要となる要素をピックアップしてみました。

スタイルガイド、まずはカラースキームの定義から

グリッドとタイポグラフィ

打ち出し

グローバルナビゲーションをはじめ、各種ナビゲーション

各種ボタン

画像の使い方

テーブル

通知パネルなど

フォーム