スタイルガイドとパターンライブラリの違い

Advertisement

最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。で、ふと「スタイルガイドとパターンライブラリの違いってなんだっけ?」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。

特にウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。

スタイルガイド

  • 企業や組織のブランドイメージを統一するためにまとめられたガイドライン
  • ロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義する
  • より総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もある
  • UIパターンやコンポーネントのデザイン一覧(パターンライブラリ)を含む場合もある

スタイルガイドはこんなイメージですかね?

では、パターンライブラリはというと。。。

パターンライブラリ

  • UIパターンやコンポーネントの一覧
  • コンポーネントの用途や使用する際の文脈の説明
  • コンポーネントのデザインが確認できてHTMLやCSSが参照・コピペできるようになっている
  • グリッドの仕組みなど、より技術寄りの情報も含まれる場合もある
  • スタイルガイドでは、デザインの理由や背景を詳しく説明するのに対して、パターンライブラリは、デザインの「使い方」を定義することが多い

特にKSS Styledocco Hologram などのツールを使ってCSSに直接追加情報を記述して作成する場合、「スタイルガイド」というより「パターンライブラリ」と読んだ方が適しているものが多い気がします。

パターンライブラリ vs コンポーネントライブラリ

ちなみに、パターンライブラリの他に「コンポーネントライブラリ」という呼び方もありますが、これらは同義で使われているように思います。

スタイルガイドとパターンライブラリの例

Brand Style Guide Examples Styleguide.io Examples から、ざっくり選んでみました。

ちなみにStyleguide.ioのページにDESIGNLANGUAGEFRONTENDといったタグ付けがされているのですが、その中でも以下のタグが付いているのがスタイルガイド。

  • DESIGNLANGUAGE
  • BRANDING
  • VOICEANDTONE

逆に以下のタグが付いているのが「パターンライブラリ」と言えそうです。

  • FRONTEND
  • PATTERNS
  • CODE

スタイルガイドの例

パターンライブラリの例

中間

まとめ

この記事を書いていて「もしかして整理する意味ないのか?」と思ってしまったというのが正直なところです。というのも、スタイルガイドやパターンライブラリと呼ばれるものの例を見ていると、両方の要素の組み合わせになっているものが多いんですよね。明確な線引きが見えてこないというか。元も子もなくてすみません。。。

ということで、目的や用途によってケースバイケースで組み込む要素を選択するのが良さそうです。呼び名よりも、そのドキュメントの意図や目的がしっかり定義されていることのほうが重要ですね。スタイルガイドを作ること自体が目的になってしまっても意味ないですからね。

用途や目的をしっかり定義して、それを達成するための要素を組み込んでおきたいですね。

参考サイト

スタイルガイド・パターンライブラリ作成ツール

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。