2017年12月25日シェアする:Advertisement最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。「スタイルガイドとパターンライブラリの違いってなんだっけ?」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。ウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。スタイルガイド関連の他の記事スタイルガイドジェネレーターの「Fractal」がかなり良さそうスタイルガイドジェネレーター「Fractal」のデモを作ってみたFractalを使ったスタイルガイドの作成(中級編)。このジェネレーターかなりいいですよスタイルガイド企業や組織のブランドイメージを統一するためにまとめられたガイドラインロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義するより総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もあるUIパターンやコンポーネントのデザイン一覧(パターンライブラリ)を含む場合もあるスタイルガイドはこんなイメージですかね?では、パターンライブラリはというと。ツールを使ってCSSに直接追加情報を記述して作成する場合、「スタイルガイド」というより「パターンライブラリ」と読んだ方が適しているものが多い気がします。コンポーネントライブラリちなみに、パターンライブラリの他に「コンポーネントライブラリ」という呼び方もありますが、これらは同義で使われているように思います。ちなみにStyleguide.ioのページにDESIGNLANGUAGEやFRONTENDといったタグ付けがされているのですが、その中でも以下のタグが付いているのがスタイルガイド。DESIGNLANGUAGEBRANDINGVOICEANDTONE逆に以下のタグが付いているのが「パターンライブラリ」と言えそうです。Styleguideまとめこの記事を書いていて「もしかして整理する意味ないのか?」と思ってしまったというのが正直なところです。いうのも、スタイルガイドやパターンライブラリと呼ばれるものの例を見ていると、両方の要素の組み合わせになっているものが多いんですよね。明確な線引きが見えてこないというか。元も子もなくてすみません。いうことで、目的や用途によってケースバイケースで組み込む要素を選択するのが良さそうです。呼び名よりも、そのドキュメントの意図や目的がしっかり定義されていることのほうが重要ですね。スタイルガイドを作ること自体が目的になってしまっても意味ないですからね。用途や目的をしっかり定義して、それを達成するための要素を組み込んでおきたいですね。スタイルガイド関連の他の記事スタイルガイドジェネレーターの「Fractal」がかなり良さそうスタイルガイドジェネレーター「Fractal」のデモを作ってみたFractalを使ったスタイルガイドの作成(中級編)。LabKSSStyledoccoHologramFrontify2017年4月4日に公開され、2017年12月25日に更新された記事です。author「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。ウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。関連する記事スタイルガイドジェネレーター「Fractal」のデモを作ってみたスタイルガイドジェネレーターの「Fractal」がかなり良さそうFractalを使ったスタイルガイドの作成(中級編)。