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

著者名：大塚亜周/稲葉志奈/金森悠/samemaru/圓山伊吹/植田将基

ビー・エヌ・エヌ（2023/03発売）

• ISBN：9784802512480

内容説明

「だれでも・効率よく・迷わずに。」を実現するデザインシステムの作り方

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

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

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

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

目次

1　デザインシステムについて考えよう

1-1 デザインシステムとは
1-2 誰のためのデザインシステム？｜プロダクト
1-3 誰のためのデザインシステム？｜ブランドコミュニケーション
1-4 デザイナーだけのものではないデザインシステム

2　デザインシステムを作るコツとステップ

2-1 デザインシステムをはじめる３つのステップ
2-2 デザインをみんなのものにする３つのステップ
#Column SmartHRの人々から見たSmartHR Design System「SmartHR Design System公開前夜」

3　デザインシステムに何をどうまとめる？

3-1 イントロダクション
3-2 運営理念
3-3 パーソナリティ
3-4 ロゴ
3-5 タイポグラフィ
3-6 伝わる文章
3-7 アイコン
#Column SmartHRの人々から見たSmartHR Design System「プロダクトのカラーリング刷新」
3-8 色
3-9 印刷ガイドライン
3-10 イラストレーション
#Column SmartHRの人々から見たSmartHR Design System「運営理念の言語化」
3-11 デザイン原則
3-12 デザイントークン
3-13 コンポーネント
#Column SmartHRの人々から見たSmartHR Design System「ライティングガイドライン」
3-14 文字コンテンツ
#Column SmartHRの人々から見たSmartHR Design System「組織への浸透」
3-15 デザインパターン
3-16 デザインレビュー
3-17 ユーザビリティテスト
3-18 ブランドコンポーネント
3-19 スライド・資料
3-20 アクセシビリティ

4　デザインシステムを続けやすくしよう

4-1 デザインシステムの運用
4-2 外部サービスとツール
4-3 デザインシステムのシステム構築
4-4 デザインシステムにおける協業
4-5 校正支援ツール
4-6 デザインデータ

5　デザインシステムの正解は１つじゃない

5-1 となりのデザインシステム