ちいさくはじめるデザインシステム

「だれでも・効率よく・迷わずに。」を実現するデザインシステムの作り方
「デザインシステム」は、デジタルプロダクト開発においてその必要性や役割を言及されることが多い概念で、プロダクトを提供するためのプロダクト、またはインフラとも呼ばれ、日本の企業・組織でも導入が進んでいます。一般的には、「デザインの再現性を高め、一貫した製品体験を効率よく表現すること」を目的に導入される「ドキュメントやリソース群のこと」と説明されます。

プロダクトの重要性が増すにつれ、プロダクトが示す領域も広がり、デザインシステムが取り扱う範囲も広がってきています。見た目のデザインや UI に関するルール・ナレッジだけでなく、ブランドパーソナリティや文章の表現など、ユーザーとのありとあらゆる接点を網羅し体系化する必要が出てきているともいえるでしょう。

しかし、デザインシステムには決まった在り方がなく、組織の数だけ、その目的の数だけ形を変えます。公開されている個別のデザインシステムを見ても、今の自分たちに必要なのか、作れるのか、そして運用できるのか、疑問は尽きないでしょう。

本書は、人事・労務領域の業務アプリケーション SaaS を提供している SmartHR のデザインシステムの立ち上げ前から、現在までの取り組みをケースとして扱いながら、デザインシステムの構想・構築・運用について、一般論を含めて解説します。まずはなにもわからなくても大丈夫。デザインシステムを始める目的と、最初に手をつけるべきコンテンツを考えるところからスタートしましょう。

『ちいさくはじめるデザインシステム』 (大塚亜周、稲葉志奈 編、ビー・エヌ・エヌ、2023 年 3 月 15 日発売) は、人事 / 労務領域の業務アプリケーション SaaS を提供する SmartHR のデザインシステムの立ち上げ前からの取り組みを事例に、デザインシステムの構想 / 構築 / 運用を一般論とあわせて解説する本です。版元の紹介文は「だれでも・効率よく・迷わずに。」を実現するデザインシステムの作り方と掲げ、始める目的と最初に手をつけるべきコンテンツを考えるところから出発すると案内しています。著者は大塚亜周、稲葉志奈、金森 悠、samemaru、圓山伊吹、植田将基、関口 裕、8chari、後藤拓也、小木曽槙一、桝田草一の 11 名で、版元のプロフィールではいずれも SmartHR に入社した UX ライター、プロダクトデザイナー、UX デザイナー、クリエイティブディレクターなどです。

全 5 章の構成、目的の整理からとなりの事例まで

第 1 章「デザインシステムについて考えよう」は、デザインシステムとは何かに続き、プロダクトのためとブランドコミュニケーションのためという 2 つの立場から誰のためのものかを問い、デザイナーだけのものではないという節で閉じます。第 2 章「デザインシステムを作るコツとステップ」は、はじめる 3 つのステップと、デザインをみんなのものにする 3 つのステップの 2 節です。第 3 章で中身の項目を並べ、第 4 章「デザインシステムを続けやすくしよう」で運用を扱い、第 5 章「デザインシステムの正解は 1 つじゃない」は「となりのデザインシステム」の 1 節です。第 2 章の後と第 3 章の節の間には、SmartHR の人々から見た SmartHR Design System と題したコラムが 5 本入り、公開前夜、プロダクトのカラーリング刷新、運営理念の言語化、ライティングガイドライン、組織への浸透を題材にしています。

第 3 章の 20 項目、ブランドの言葉から UI の部品まで

第 3 章「デザインシステムに何をどうまとめる?」は 3-1 イントロダクションから 3-20 アクセシビリティまでの 20 節で、運営理念、パーソナリティ、ロゴ、タイポグラフィ、伝わる文章、アイコン、色、印刷ガイドライン、イラストレーションといったブランドと表現の項目と、デザイン原則、デザイントークン、コンポーネント、文字コンテンツ、デザインパターン、デザインレビュー、ユーザビリティテスト、ブランドコンポーネント、スライド / 資料が並びます。デザインシステム は、一般に UI の部品と見た目の値、使い方の指針を 1 か所にまとめ、複数の画面や製品で同じ判断を繰り返さずに済むようにする仕組みです。中でもデザイントークンは、色や余白、文字の大きさなどの値に名前を付けて管理し、デザインデータと実装コードの両方が同じ名前を参照する方式で、値を 1 か所変えれば全体に反映できます。文字のコントラストや読み上げ環境での伝わり方のような アクセシビリティ の配慮も、個々の画面の判断に任せず共通の部品と規則に織り込めます。版元の紹介文が、見た目や UI のルールだけでなくブランドパーソナリティや文章の表現まで扱う範囲が広がっていると述べるとおり、本書の項目は画面の部品と言葉の両方にまたがります。

運用を続ける仕組みと職種をまたぐ協業

第 4 章は、デザインシステムの運用、外部サービスとツール、デザインシステムのシステム構築、デザインシステムにおける協業、校正支援ツール、デザインデータの 6 節です。著者のプロフィールには、圓山伊吹氏が文章の校正を機械的に検査する textlint の運用に携わると記されており、11 名のうち 4 名が UX ライターとして紹介されています。

デザインシステムをこれから立ち上げる組織に向く本

版元の紹介文は、公開されている個別のデザインシステムを見ても、自分たちに必要なのか、作れるのか、運用できるのかと疑問が尽きない読者に向け、まずはなにもわからなくても大丈夫と呼びかけています。題材は SmartHR という 1 社の業務アプリケーション SaaS の事例です。始めるステップ、ブランドと表現から UI の部品までの 20 の項目、運用と協業の仕組み、となりのデザインシステムの紹介が 1 冊に収まっています。