書籍の構成と用語、および著者がこの書籍にまとめたデザインシステムの見識について、著者自身の経験と取材対象となった5社についての紹介です。

このマガジンは、12月21日に全国書店、25日ごろにAamazonで発売になる「Design Systems − デジタルプロダクトのためのデザインシステム実践ガイド（仮）」を編集している私が、個人アカウントでこの本の作りかけの断片を紹介するものです。予約ヨロシクでございます。

− − − − −

1.この本の構成
2.この本で用いる用語
3.この本のベースとなるデザインシステムの見識

1.この本の構成

本書は2つのパートに分かれています。

パート1:基本編
デザインシステムの基礎、つまりパターンと慣習について説明します。デザインパターンは、繰り返したり、再利用できるインターフェースの部分です。機能的で実体のあるパターンもあれば（ボタンやテキストフィールなど）、より叙述的なパターンもあります（アイコン、スタイル、色、タイポグラフィなど）。パターンはつながり合っており、連携してプロダクトのインターフェースの言語を形成します。共通の慣習とは、デザインの原則に従ったり、パターンライブラリを維持することで、こうしたパターンを作成、保存、共有、使用する方法を表します。

パート2:応用編
デザインシステムは一晩で作られるのではなく、プロダクトとともに徐々に進化するものです。しかし、システムが正しい方向に発展し、ある程度コントロールできるようにするには、特定の原則と慣習に従う必要があります。応用編では、デザインシステムを確立、および維持するための実用的な手順とテクニックに焦点を当てます。具体的には、作業の計画、インターフェースインベントリーの作成、パターンライブラリの準備、デザインパターンの作成、ドキュメント化、進化、維持について説明します。

2.この本で用いる用語

本書で使われている用語の定義です。

パターン、デザインパターン
「パターン」という言葉が意味するのは、繰り返したり、再利用可能なインターフェースの部分です（ボタン、テキストフィールド、アイコン、色、タイポグラフィ、繰り返されるユーザーフロー、インタラクティブな動作など）。特定のデザインの問題を解決したり、ユーザーのニーズに応えたり、感情を呼び起こすために適用および転用できます。本書では、行動に関連する機能型パターンと、ブランドや外観に関連する認知型パターンを区別しています。

機能型パターン、モジュール
この用語は、本書では同じ意味で使用されます。ボタン、ヘッダー、フォーム要素、メニューなど、インターフェースの具体的な構成要素を表します。

認知型パターン、スタイル
アイコン、色、タイポグラフィなど、より叙述的で具体性に乏しいパターンです。一般的に、特定の種類の外観にしたり、感情とプロダクトの結びつきを強めたりするのに使われます。

パターン言語、デザイン言語
相互につながった、共有可能な一連のデザインパターンは、プロダクトのインターフェースのデザイン言語を作り出します。パターン言語は、機能型および認知型パターンだけでなく、プラットフォーム特有のパターン（ハンバーガーメニューなど）、領域重視のパターン（eコマースサイト、財務関連ソフトウェア、ソーシャルアプリなど）、説得力のあるUXパターンをはじめとする、特定のプロダクトのインターフェースで調和している多様なタイプのパターンを結びつけます。

デザインシステム、システム
「デザインシステム」という言葉は、デザインコミュニティ内に標準の定義があるわけではなく、さまざまな用途で使用されています。「スタイルガイド」や「パターンライブラリ」と同じような意味で使われることもあります。本書でデザインシステムと言うときは、デジタルプロダクトの目的を果たすために一貫性を持って編成された、一連のつながったパターンと共通の慣習を指します。

パターンライブラリ、スタイルガイド
パターンライブラリとは、デザインパターンおよびその使用のガイドラインを保存、収集、共有するためのツールです。パターンライブラリの作成は、（優れた）デザイン慣習の見本です。伝統的に、スタイルガイドはアイコン、色、タイポグラフィなどのスタイルに焦点を当てていますが、パターンライブラリはより幅広いパターンセットを含みます。

3.この本のベースとなるデザインシステムの見識

この本は、実世界のプロダクトから得た見識をベースとしています。その大半は、ロンドンのオープン教育企業であるFutureLearnで働いた著者自身の経験から導き出されたものです。著者は3年間デザイナーとして働きながら、初期コンセプトから成熟したシステムへとデザインシステムが進化する様子を観察し、またその進化を推進してきました。

著者はまた、Airbnb、Atlassian、Eurostar、Sipgate、TEDという規模の異なる5社についても綿密に調査しました。18ヶ月間にわたり、各社のチームメンバーにインタビューを続けることで、システムの進化にともない彼らが直面している課題を追究しました。以下の会社の方々が、惜しみなくこの本にそれぞれの課題や洞察を共有してくださいました。

Airbnb
Airbnbのデザイン言語システム（DLS）については、ロイ・スタンフィールド（Roy Stanfield｜主任インタラクションデザイナー）が詳しく語ってくれました。DLSの特徴は、その厳格さです。パターンは仕様が定義され、正確に使用されます。また、ルールは厳格に守られています。それを実現するために、数多くの慣習とツールが定められています。パターンの採用、新しいパターンの統合スピード、アートディレクションとエンジニアリングの同期の点で、いくつか課題が残されています。

Atlassian
ユルゲン・スパングル（Jürgen Spangl｜デザイン責任者）、ジェームス・ブライアント（James Bryant｜リードデザイナー）、ケヴィン・コフィー（Kevin Coffey｜デザインマネージャー）が、2016年11月にADG（アトラシアンデザインガイドライン）についての見解を話してくれました。パターンを管理する専門チームが存在する一方、誰もが関与できるオープンソースモデルもあります。社内の全員が関与を許可されているだけでなく、積極的に関与するよう推奨されています。このモデルの課題は、関与する自由を十分に与えながらも、システムがしっかり管理および監督されるようにすることです。

Eurostar
ダン・ジャクソン（Dan Jackson｜ソリューションアーキテクト）は、Eurostarが経験してきたことを率直に語ってくれました。本書の執筆時、同社のチームは最初のパターンライブラリを構築しているところでした。当初はいくつかの課題に直面しました。特に苦労したのは、プロジェクトの優先順位を決めたり、チームの全員に関与を促すことです。1年後には人員が確保され、専門チームが配置されました。現在はこのチームがシステムの構築を先導しています。

Sipgate
トビアス・リッターバッハ（Tobias Ritterbach｜エクスペリエンスオーナー）とマティアス・ヴェーゲナー（Mathias Wegener｜Web開発者）の両者が、これまでの経緯を詳しく語ってくれました。Sipgateのパターンライブラリは2015年に確立されましたが、その1年後、主にプロダクトチーム間のコミュニケーション不足のためにパターンが増えすぎていることが判明しました。つい最近、複数の商品サイトでデザイン言語を統一することを目標に、新しいパターンライブラリが構築されました。

TED 
2016年秋の話し合いで、マイケル・マクワッターズ（Michael McWatters｜UXアーキテクト）、アーロン・ウェインバーグ（Aaron Weyenberg｜UXリード）、ジョー・バートレット（Joe Bartlett｜フロントエンド開発者）が意見を述べてくれました。TED.comをサポートするメンバーのうち、ごく少数のUX実務者とフロントエンド開発者がデザインシステムの取り決めを担っています。チームはパターンについて深い知識を共有し、その知識はシンプルな方法でドキュメント化されています。※11 今のところ、彼らは包括的なパターンライブラリを確立する必要性を感じていません。

− − − − −

次回から、いよいよこの本の内容をかいつまんで紹介していきます。第1章は、「デザインシステム」。不連続に思いつくまま取りあげますので、全貌はぜひ書籍でお確かめください。

お楽しみに。