1章 デザインシステム 内容紹介（3）
1章「デザインシステム」の一部紹介、つづけます。デザインシステムの話と混同されがちなスタイルガイドやパターンライブラリ、その限界についてなど。
このマガジンは、12月21日に全国書店、25日ごろにAamazonで発売になる「Design Systems − デジタルプロダクトのためのデザインシステム実践ガイド（仮）」を編集している私が、個人アカウントでこの本の作りかけの断片を紹介するものです。予約ヨロシクでございます。
1章「デザインシステム」
「デザインシステム」という言葉は、標準の定義があるわけではなく、さまざまな用途で使用されています。この章では、デザインシステムとは何か、そして何がデザインシステムを構成しているのかを明確にします。
1.デザインパターン
2.共有言語
3.パターンライブラリとその限界 ※この記事で一部を紹介しています
4.効果的なデザインシステムを構築するには
5.例：10分レシピサイト
− − − − −
3.パターンライブラリとその限界
デザインシステムを構成するのはパターンだけではありません。これらのパターンを作成、捕捉、共有、進化させるためのテクニックと慣習も含まれます。パターンライブラリは、デザインパターンおよびその使用方法についての原則やガイドラインを収集、格納、共有するためのツールです。
パターンライブラリがWeb上でよく見られるようになったのは比較的最近のことですが、デザインパターンをさまざまな形で明文化して共有しようという考え方は、ずっと以前から存在していました。
ベネチアで1570 年に刊行されたパッラーディオ（Palladio）の『建築四書』（原題：I quattro libri dell'architettura）は、建築に最も大きい影響を与えた重要な本のひとつです。また、システムを明文化した最古の例でもあります。
パッラーディオはグレコローマン建築にインスピレーションを得て、建物をデザインおよび構築するためのルールと語彙を提示しました。原則とパターンについても語っており、その仕組みをイラストつきで詳しく説明しています（図は、らせん階段について。「直線階段よりも上りにくいが占有スペースが小さいため、制約の厳しいところに適している」と記しています）。
現代のグラフィックデザインでも、初期のタイポグラフィやグリッドシステムからバウハウスのデザイン原則まで、システムは長きにわたって明文化されてきました。
この数十年、企業は自らのビジュアルアイデンティティをブランドマニュアルという形で明文化してきましたが、中でも有名なのは1975 年発行の『NASA Graphics Standards Manual』です（図は、レイアウトガイドライン）。
Webでは、パターンライブラリはブランドアイデンティティドキュメントの拡張として始まりました。ロゴ処理、企業価値、ブランドスタイルに焦点が当てられ、タイポグラフィやカラーパレットなどが含まれていました。
これがスタイルガイドとパターンライブラリの違いです。スタイルガイドは、伝統的に色やタイポグラフィなどのスタイルに主眼を置いています。パターンライブラリはスタイルに加えて、機能型パターンとデザインの原則も含みます。
その後、インターフェースモジュールやその用途のガイドラインもともなうようになりました。Yahoo!のパターンライブラリは、初めて明文化されたインターフェースパターンのひとつでした。
Yahoo!ほど人員が豊富でない企業は、たいていパターンライブラリにPDFやWikiを使用していました。この静的なライブラリでは、最新の状態を保つのが容易ではありません。現在、多くのデザイナーと開発者が、動的で「生きた」パターンライブラリとして、デザインパターンとその構築に必要な実際のコードを収めたいと熱望しています。
生きたスタイルガイドまたはパターンライブラリには、参照ドキュメント以上の意味があります。実際に機能するパターンを、デジタルプロダクトのインターフェースの作成に使用できるからです（図は、MailChimpのパターンライブラリ。Web上にある生きたパターンライブラリの最も重要な初期の例です）。
▷パターンライブラリの限界
パターンライブラリは、デザインシステムの代用になると考えられることがあります。しかし、非常に包括的で生きたパターンライブラリであっても、システムそのものと同一ではありません。パターンライブラリは、デザインシステムの効果を高めるためのツールしかありません。
パターンライブラリは、デザインの一貫性を保証するものではありません。ちょっとした不整合を修正したり、基本コードを堅牢にするのには役立ちますが、ライブラリ単体ではユーザーエクスペリエンスにほとんど影響しません。パターンライブラリは、不適切なデザインを修正しません。パターンが不適切にデザインされたり、誤って使用されたり、連携して機能しない場合もあります。TEDでUXアーキテクトを務めるマイケル・マクワッターズはインタビューで、「Squarespaceのテンプレートでさえ、まとまりのないデザイン思考によって台無しになることがある」と話しています。
【訳注】
Squarespaceはたくさんの優秀なデザイナーや開発者をかかえ、高品質で考え抜かれたテンプレートを数多く提供しています。そのテンプレートも、なぜそのようなページ構成になっているか理解せず、提供されているモジュールを間違った形で適応してしまうと、本来テンプレートが実現するはずだった正しいユーザーエクスペリエンスがお粗末なものになってしまいます。
そして逆に、包括的なパターンライブラリがなくても、一貫したユーザーエクスペリエンスを提供するプロダクトは作成できます（第6章のTEDのデザインシステムの例で説明します）。
生きたパターンライブラリは、優れたコラボレーションにつながります。しかし、少人数のメンバーしかパターンライブラリを使用していなかったり、チーム間のコミュニケーション不足によって大量のパターンが分断された状況に陥ることがあります。最新の状態を維持できれば、パターンライブラリは共有言語の用語集となります。それでも、解釈のずれが起きないわけではありません。解釈に関する共通理解が、パターンライブラリの成否を分ける鍵となります。
一方で、創造性に欠け、平凡な見た目のWebサイトを、パターンライブラリのせいにされることがあります。しかし、やはりパターンライブラリはその背後にあるデザインシステムを反映しています。システムに柔軟性が乏しく制約が多い場合には、パターンライブラリでもその柔軟性の欠如が目立つでしょう。制約にしばられず創造的にさまざまなことを試せるシステムでは、優れたパターンライブラリがその試みを柔軟にサポートしてくれます。
現在では自動化ツールとスタイルガイドジェネレータがあるため、以前よりもずっと迅速にコンポーネントのライブラリをセットアップできるようになりました。しかし、パターンと慣習を統合した一貫したデザインシステムという基盤がなければ、その影響力は限定的です。パターンライブラリが強固なデザイン言語の基礎をサポートする場合に、それは強力なデザイン、そしてコラボレーションツールになります。そうでなければパターンライブラリは、Webページ上の単なるモジュールの寄せ集めでしかありません。
− − − − −
noteの機能では表現しにくい画像のキャプションや、発言の引用や脚注などは省略しています。あくまで、書籍の概要としてイメージしてもらえれば幸いです。全貌はぜひ書籍でお確かめください。
では、次回をお楽しみに。
この記事が気に入ったらサポートをしてみませんか？