最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。で、ふと「スタイルガイドとパターンライブラリの違いってなんだっけ？」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。
特にウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。
スタイルガイド関連の他の記事
スタイルガイド
- 企業や組織のブランドイメージを統一するためにまとめられたガイドライン
- ロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義する
- より総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もある
- UIパターンやコンポーネントのデザイン一覧（パターンライブラリ）を含む場合もある
スタイルガイドはこんなイメージですかね？
では、パターンライブラリはというと。。。
パターンライブラリ
- UIパターンやコンポーネントの一覧
- コンポーネントの用途や使用する際の文脈の説明
- コンポーネントのデザインが確認できてHTMLやCSSが参照・コピペできるようになっている
- グリッドの仕組みなど、より技術寄りの情報も含まれる場合もある
- スタイルガイドでは、デザインの理由や背景を詳しく説明するのに対して、パターンライブラリは、デザインの「使い方」を定義することが多い
特にKSS やStyledocco 、Hologram などのツールを使ってCSSに直接追加情報を記述して作成する場合、「スタイルガイド」というより「パターンライブラリ」と読んだ方が適しているものが多い気がします。
パターンライブラリ vs コンポーネントライブラリ
ちなみに、パターンライブラリの他に「コンポーネントライブラリ」という呼び方もありますが、これらは同義で使われているように思います。
スタイルガイドとパターンライブラリの例
Brand Style Guide Examples やStyleguide.io Examples から、ざっくり選んでみました。
ちなみにStyleguide.ioのページにDESIGNLANGUAGEやFRONTENDといったタグ付けがされているのですが、その中でも以下のタグが付いているのがスタイルガイド。
- DESIGNLANGUAGE
- BRANDING
- VOICEANDTONE
逆に以下のタグが付いているのが「パターンライブラリ」と言えそうです。
- FRONTEND
- PATTERNS
- CODE
スタイルガイドの例
パターンライブラリの例
中間
まとめ
この記事を書いていて「もしかして整理する意味ないのか？」と思ってしまったというのが正直なところです。というのも、スタイルガイドやパターンライブラリと呼ばれるものの例を見ていると、両方の要素の組み合わせになっているものが多いんですよね。明確な線引きが見えてこないというか。元も子もなくてすみません。。。
ということで、目的や用途によってケースバイケースで組み込む要素を選択するのが良さそうです。呼び名よりも、そのドキュメントの意図や目的がしっかり定義されていることのほうが重要ですね。スタイルガイドを作ること自体が目的になってしまっても意味ないですからね。
用途や目的をしっかり定義して、それを達成するための要素を組み込んでおきたいですね。
スタイルガイド関連の他の記事
参考サイト
- Brand Style Guide Examples
- Styleguide.io Examples
- What is the Difference Between a Style Guide and Pattern Library
- Here’s Why You Need to Know About Pattern Libraries
- CodePenをパターンライブラリに使った例
スタイルガイド・パターンライブラリ作成ツール
2017年4月4日に公開され、2017年12月25日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。