こんにちは。グッドパッチのUIデザイナーの乗田です。グッドパッチはビジネス課題をデザインで解決するデザインカンパニーとして、これまでさまざまな組織に対してデザインシステムの構築や運用を支援してきました。これらの経験をもとに、本連載ではグッドパッチが大切にしている観点や姿勢を交えながら、「デザインシステムとは何か」「必要性」「はじめかた」「運用方法」などのテーマをお届けします。初回である今回は「デザインシステムとは」について紹介します。
デザインシステムのはじまり
はじめに、デザインシステムとはどのようなものかを調べてみると、ソフトウェアにおける「一貫性を維持するためのもの」や「デザイン指針をドキュメント化したもの」などと表現されていることが多いです。
この取り組みは最近始まったことではなく、以前からさまざまな領域における創作活動のプロセスや設計方針を明らかにし、組織で一貫したデザインを行うための仕組みとして発明されてきました。
ドイツのタイポグラファーであるヤン・チヒョルトは1928年に『DIE NEUE TYPOGRAPHIE』にて、グラフィックにおけるタイポグラフィのありかたを体系的に示し、印刷物のサイズを統一する重要性や、活字のサイズやウエイトを適切に使い分ける手法について明らかにしました。
また、1950年代にスイスのグラフィックデザイナーのヨゼフ・ミューラー=ブロックマンは、グラフィックデザインにおいてテキストや図版をグリッドに則って配置する手法「グリッドシステム」を確立。デザインを届ける対象者が情報を正しく解釈できること、そのためにもデザインが構成的であることを大切にしていた人物でした。
彼らが提唱したグリッドシステムなどの手法はグラフィックデザインのためのものでしたが、今日では多くの手法がインタフェースデザインに取り入れられるほど普及しています。それだけでなく、デザイン手法を「システム」として秩序立てて扱う考えかたも現在のデザインシステムに受け継がれているものです。
建築家のクリスストファー・アレグザンダーは1964年に執筆した『形の合成に関するノート』で、建築や都市を設計する行為そのものを数学的に形式化することを試みています。このアイディアをもとに、建築や都市で繰り返し現れる構造を再利用しやすい形式にまとめる手法「パタン・ランゲージ」を自身の著書『パタン・ランゲージ』で提唱しています。
1976年にはNASAが、グラフィックシステムのマニュアル『NASA Graphics Standards Manual』を発表しました。このマニュアルはグラフィックデザインにおけるタイポグラフィやロゴ、色の扱いかたについて細かに記されており、現在のデザインシステムのように、組織で一貫したデザインを実現する仕組みの原型と言えるものです。
このように、タイポグラフィ、建築、グラフィックなど、デザインを構築するための手法を明文化する取り組みは旧来から行われてきました。これらの手法やデザインに基準を設ける目的、構築にいたるまでのプロセスは現在のデザインシステムと共通しています。
デザインシステムの構造
デザインシステムはおもにデジタルプロダクトのデザインを円滑にするために構築される存在です。その構造は一般的に「デザイン原則」「デザインパターン」を明文化したものと、それらをプロダクトに反映させるためのライブラリなどの「アセット」によって成り立っています。
次の画像は、グッドパッチがデザインシステムの構築や運用を支援する際に頻出する要素をまとめたものです。
原則
「良いデザインとはなにか」「デザインを行う上での姿勢」など、大切にしている考えを明文化したものです。また、デザインシステムの目的やデザインシステム自身をどのように育てるかという方針を示すこともあります。
ブランドガイドライン
色、フォント、ロゴなどブランドを表すためのビジュアルアイデンティティをまとめたものです。企業理念、提供価値、行動規範などブランドを行動によって体現するためのコーポレートアイデンティティも含まれます。
ユーザーインタフェースガイドライン
インタフェースを構成するトークン、コンポーネント、UIパターン、コンテンツなどの設計方針を明文化したものです。インタフェースをどのように構築するかという原則やアクセシビリティ方針も含まれます。
ユーザーインタフェースキット
ユーザーインタフェースガイドラインで明文化した指針に則ったUIを効率的に構築するためのリソースやツールをまとめたものです。デザインファイル内のライブラリや開発時のプラットフォーム、フレームワークに応じたコンポーネントライブラリなどが相当します。
