ご恵贈いただきました。ありがとうございます。
デザインシステムとは
デザインシステムとはなんだろう？ 大まかに言い切ってしまうと、「複数人で作業するときに、デザインの統一性を保つための仕組み」だ。
それが不十分だとどうなるか。
僕自身の失敗談をひとつ。
あるウェブサイトのデザイン方針として「暖かみ」を掲げたことがある。しばらくして、ウェブサイトのデザインは、いたるところで、オレンジ色や淡い黄色であふれかえった。これは僕の意図と異なっていた。
「暖かみ」にも種類がある。方針としたかった「暖かみ」は、暖かみであっても「硬い暖かみ」だった。「柔らかい暖かみ」ではなかった。「硬い暖かみ」とは、たとえば薄いグレーの基調の上に、ほんのワンポイント、強い赤があるような、鋭さのある暖かみのことだ。「柔らかい」とは軸が異なっている。
このケースは、デザインシステムの、本書でいう「共有言語」の不足。仕組みをしっかりと整えておけば、僕の意図する「硬い暖かみ」のデザインにそろっていただろう。
本書では、デザインシステムの構築を「(1) デザイン原則」「(2) 機能パターン」「(3) 認知パターン」「(4) 共有言語」という切り口で解説する。「(1) デザイン原則」はデザインの基本指針、「(4) 共有言語」はチーム内で意識統一された用語だ。本書の特徴的なところは、パターンランゲージやスタイルガイドを「(2) 機能パターン」と「(3) 認知パターン」に分解している点だ。
「機能パターン」と「認知パターン」
機能パターンとは、ウェブサイトなりデジタルプロダクトなり、デザインの対象の核となる機能にもとずいた要素を指す。任意のユーザー行動をできるようにしたり、うながしたりする目的をもつ。
たとえば、トレーディングおよびマーケット分析ソフトウェアを使用するには、タスクバー、データフィールドとグリッド、表、データ視覚化ツールに慣れる必要があります。オンライン学習サイトでは、記事、ビデオ、ディスカッションスレッド、進捗インジケーター、インタラクティブアクティビティがよく使用されます。ECサイトの場合は、商品表示、絞り込み機能、ショッピングカート、支払い機能などが一般的です。
P.16
認知パターンとは、そのウェブサイトなりデジタルプロダクトを、ユーザーにどのように認知されるのか、シンプルで実用的なものか、華やかで洗練されたものか、真面目か、遊び心のあるものか、そういった印象づける要素を指す。
認知パターンの例には、トーン、タイポグラフィ、カラーパレット、レイアウト、イラスト、アイコンスタイル、形状、テクスチャ、間隔、画像、インタラクション、アニメーションに加え、これらの要素をインターフェースで組み合わせて使用する多様な方法が含まれます。
P.72
同じような機能パターンをもつデジタルプロダクトであっても、認知パターンが異なれば、印象は変わる。この2層に分解したことで、機能を提供するデザインと、感情を提供するデザインがきれいに分かれ、議論しやすくなっている。
デザインと組織論
また、デザインは組織に影響される。
もうひとつの重要な側面は、チームカルチャーです。チームが作成するデザインシステムには、必ずチームカルチャーが反映されています。コンウェイの法則では次のように述べられています。
「システムをデザインする組織は（中略）その組織のコミュニケーション構造をコピーしたシステムを生みだしてしまう」
P.144-145
デザインシステムとは、単にガイドラインを作ることではなく、むしろ組織論や運用論です。
P.3
そのために、本書では、P.147ページ以降、本書の後半をまるまるつかって、組織へのデザインシステムの導入について、具体的に書いている。たとえば「上司やより上位のステークホルダーの支援を得るには」「どこから始めるか」といった具合だ。
スタイルガイド（パターンライブラリ）をつくるときの「チームの士気」のマネジメントについて、次のようなあるあるエピソードも掲載している。
Webサイト上とパターンライブラリでモジュールでモジュールのコードを一致させる必要があり、全てりモジュールをリファクタリングしなくてはなりませんでした。モジュールをリファクタリングした後、1つずつパターンライブラリに追加していきました。この時間のかかる面倒な作業に、チームはやる気を失い始めました。
P.159
複数人でのデザインを統一するためには、デザインがコントロールできる状態になってなければいけない。コントロールするためには、デザインする人の問題にまで踏み込んでいかざるを得ない。
デザインをコントロール可能な状態にする、それがデザインシステム
デザインシステムとはなにか。冒頭に僕が挙げた説明は、次のように言い換えることができる。
デザインをコントロール可能な状態にする。それがデザインシステム。
それにはガイドライン的なアプローチもあれば、組織論のアプローチもある。
「Design Systems―デジタルプロダクトのためのデザインシステム実践ガイド」は、そのノウハウを詳解した本だ。
