企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。

Primerの使い方

スクリーンショットを多めで紹介します。まずはグリッド。

ヘッダー。h1〜6まで対応。

テキスト。若干小さめ？

インラインテキストの装飾。

ボタン。ここはGitHubっぽいですね。

ボタングループ。こういうのもGitHubで使われていますよね。

フォーム。シンプルです。

フォームグループ。縦に並べる時に使えます。

メニュー。アイコンはオプションです。

タブ。こちらもアイコンを追加できます。

アラート。これもGitHubでよく見る表示ですね。

アイコン付きアラート。実にGitHubっぽい。

子要素付きアイコン。このデザインは意外と珍しいかも。チェック付きとかできますね。

ラベル。これはIssueでよく見かけます。

ツールチップ表示。こういうユーザビリティを高めるところには特にこだわりが必要ですね。

文字の切り取り表示。マウスオーバーで全体を表示します。

カウンター。未読数などの表示に使えます。

テキストカラー。GitHubらしい色合いになっています。

幅の調整が自在なテーブル組。

PrimerがあることでGitHubと連携するようなサービスであったり、開発者向けのサービスを作る際にはベースにすると同じような雰囲気で作れるのではないでしょうか。GitHubとしてもHTMLやスタイルシートに関する情熱を共有したいという思いがあるようです。

PrimerはSCSSを使っており、Gruntfileを使ってコンパイルする仕組みが用意されています。Sassでないところは好みが分かれるところかも知れませんね。

PrimerはHTML5/JavaScript/スタイルシート製のオープンソース・ソフトウェア（MIT License）です。

Home · Primer primer/primer