読書メモ：「Design Systems - デジタルプロダクトのためのデザインシステム実践ガイド」

元上司でボーンデジタル編集者のおかもとさんから、新刊「Design Systems - デジタルプロダクトのためのデザインシステム実践ガイド」(*)をご恵贈いただいた。

Webデザイナーは、「モジュール型でパターン主導のデザイン」を取り入れ始めている。というのは肌感でもわかるところ。利用者視点でみても、パターン化されていて使い勝手がいいWebサイトが多くなっていると思うし、Webデザイナーの周辺で働く身としても、デザインガイドライン、パターンランゲージ、パターンライブラリ、スタイルガイドといった言葉はよく見聞きするようになった。

これにはちゃんとした理由があって、近年のWebはユーザーの画面・デバイス・地域の別を問わず、より多くの人々に、さまざまな環境から利用できる提供の仕方を求められているから。

提供する情報・機能だって、日々の連絡、情報収集や意見交換、調べ物や記録、買い物、役所手続き、ラジオや映画など、もはや日常生活に不可欠なインフラだから、「こういう条件を満たさないと使えません」なんて言っている場合ではない。

紙のチラシやパンフレットの置き換えとして“静的なページ”をデザインする移行期は、とうに終わりを告げたのだ。

というわけで、いろんな人・環境・利用シーンにあわせて自在に組みかえられるよう、再利用可能な細かいモジュールに分割して、パターンを利用し、柔軟＆迅速にプロダクト・機能・インターフェースを構築する必要が出てきた。

そのパターンには2つあって、この本では「機能パターン」と「認知パターン」に分けて解説している。

●機能パターン
行動に関連するもの。インターフェースを構成する具体的な要素のこと。ボタン、ヘッダー、フォーム要素、メニューなど、実体のあるインターフェースの部品モジュール。これが一貫したデザインで作られていないと、使う側は大変な困難を強いられる。

●認知パターン
ブランドや外観に関連するもの。プロダクトの個性を視覚的に表現するエモーショナルな外観のこと。口調、タイポグラフィ、色の選択、アイコンのスタイル、余白、レイアウト、形状、インタラクション、アニメーション、サウンドなど。こっちはこっちで、抽象的ではあるものの、無意識的にユーザーが大いなる影響を受けているもの。

機能パターンは名詞や動詞に似ていて、認知パターンは形容詞に近い。あるいは、前者は常にHTMLベースで実装し、後者の多くはCSSプロパティで実装するという分け方も、わかりやすい説明だ。

2つのパターンは、連携してプロダクトのインターフェースを作っており、その大元締め「デザインの原則」に基づいて展開されるもの。

この本では前半で、「プロダクトの目的とエートス(価値)の明確化→デザイン原則の定義→原則からパターンへの落とし込み（機能パターンと認知パターンの定義）→チームでの言語の共有」といった流れで、基礎編を構成している。

じゃあ後半は…というと「応用編」は、監訳者の佐藤伸哉さんが前書きで「デザインシステムとは、単にデザインガイドラインを作ることではなく、むしろ組織論や運用論です」と記している、ここかなと。

デザインシステムを組織で確立・維持していく上では、作って納品して終わりでは済まされない。サイトを公開した当初はデザインの一貫性があったが、時間経過とともに崩れていってしまって今や見るにたえない状況…といった話はよく聞くけれど。

一旦公開した後、品質維持できるかどうかは相手次第というのではなく、最初から「長持ちする」ように作るの含めて作り手の手腕ととらえて、「長く一貫性を保てて、それでいて拡張性があるデジタルプロダクトをどう構築するか」という高みを目指すのに良書ではないかと思った。

対象読者は、「デザインシステム思考を組織の文化に組み入れることを目指している、小中規模のプロダクトチーム」、特にお薦めしたいのは「ビジュアルおよびインタラクションデザイナー、UX実務者、フロントエンド開発者」とのこと。ご興味ある方は、ぜひお手にとってみてください。って、まだ読み始めなんだけど…、ご紹介まで。

おかもとさんがnoteに「Design Systems日本語版の作りかけ断片集」を公開しているので、ご興味ある方は、こちらもどうぞ。

*:著者はアラ・コルマトヴァ氏。原著は「Design Sytem - A practical guide to creating design languages for digital products」（Smashing Magazine刊）