Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド

著者 : アラ・コルマトヴァ 株式会社Bスプラウト

• ボーンデジタル (2018年12月25日発売)

作品紹介・あらすじ

Webが急速に変化して複雑化するなか、静的ページの観点から考えるのは不可能になってきました。制作者の
多くは、よりシステマチックな方法でデザインにアプローチし始めています。

すべてのデザインシステムが同じように効果的であるわけではなく、一貫したユーザーエクスペリエンスをも
たらすシステムもあれば、寄せ集めのわかりにくいデザインを作り出すシステムもあります。チームの関与を
奨励するシステムもあれば、軽視されるシステムもあります。時間とともに進化して、まとまりや機能を増し
ていくシステムもあれば、肥大化して扱いにくくなるシステムもあります。

本書は、うまく機能して長持ちするデザインシステムについて、著者自身の経験とデザインシステムの調査と
考察を行いました。規模やデザインシステムへのアプローチが異なるさまざまな企業を例に挙げながら、どの
ような要素があれば効果的なシステムとなり、チームが優れたデジタルプロダクトを作成できるようになるか
を探っていきます。

原書のDesign Sytem - A practical guide to creating design languages for digital productsは2017年にドイ
ツ Smashing Magazineから刊行され、高い評価とレビューを得ています。

この書籍は、上記書籍の日本語版として、ビジュアルおよびインタラクションデザイナー、UX実務者、フロン
トエンド開発者（HTML、CSS、JavaScript実装者）を読者像に制作しました。

基本編と応用編から構成され、基本編ではデザインパターン（再利用できるインターフェースの部分）の作成、
保存、共有、使用する方法について解説。応用編では、デザインシステムを確立、および維持するための実用的
な手順とテクニックを解説します。

監訳者は、Web黎明期よりユーザーエクスペリエンスのスペシャリストとして、海外のデジタルエージェンシー
の日本での活動支援や大手企業のデジタル事業戦略のアドバイス、プロダクト開発のデザイン支援などを行う佐
藤伸哉さんです。Razorfish勤務時代は、原書のレビュワーであるカレン・マクグイレインの部下でもあり、デ
ザインシステム導入の実情について精通しています。

感想・レビュー・書評

[Naruki Chigiraさんの感想 · 2022年11月19日]

デザインシステムについて考え方や全体像を掴む為にはよい本だと思ったが、デザイナーではないので本職の方がどう思うのかは分からない。

電子書籍に最適化されていて、多くの事例がリンクとして設置されている。名前を聞いたことのあるサービスの章に関連するコンテンツがすぐに参照できる構造になっていてよい。
ただし死んでいるリンクもあり、あと数年経つと更にいくつかは参照できなくなっている感がある。

[田中久太郎さんの感想 · 2022年3月3日]

デザインチームの勉強会で読了。デザイン系の訳書を読むのってちょっとわかりづらいかも。

[楽描人カエルン #グラレコ写経さんの感想 · 2021年7月6日]

　主にWeb、アプリをチームで作る人たちが共同作業を行う際に基盤とすべき「デザインシステム」について述べたものである。
　UX/UI分野についてはビジネスの主戦場ということもあって書籍も講座の類もたくさんある。一方、学会・業界などが明確になっていないこともあり、たくさんの流派があるという印象がある。
　この書籍もとある流派の共同作業のマニュアルのような体である。定番となっているものが取り上げられていることもあり参考図書としては良いと思われる。
　Airbnb、TEDなどのサイトデザイン等を分析して提示するなどしているので実用的でもある。

[Zwarte Beertjeさんの感想 · 2020年10月20日]

基本的には、まあそうだよなということが書いてある。改めて明文化するとこのような当たり前のことばかりになってしまうのだろう。
とはいえ、Web/UIのデザインシステムについてここまで全体を俯瞰してまとめられている資料は今までなかったと思うので価値はあると思う。Web/UIに関わるデザイナーであれば読んだ方が役に立つはず。

[cooboo2011さんの感想 · 2020年7月20日]

日本語でデザインシステムについて書かれた本は少ないので貴重です。
翻訳調で読みづらい箇所があるのと章の間の対談はなくて良いかな。

[matchyyさんの感想 · 2019年5月12日]

https://note.mu/matchyy/n/n96fea723edf7

（以下抜粋。○：完全抜粋、●：簡略抜粋）
○原則は、多すぎないことも大切です。人間の記憶力には限界があり、一度に5つ以上はなかなか覚えられません。デザイン原則を使ってもらおうとするなら、3～5点に抑えたほうがよいでしょう。本書に関連したインタビューの中で、TED、Atlassian、Airbnbのチームにデザイン原則をたずねたところ、皆、即答でした。一瞬のためらいもなく、まごつく人も、ブランドマニュアルで原則を調べようとする人もいませんでした。誰もが原則をよく覚えていたのは、シンプルで、わかりやすく、便利であるうえ、数が少なかったからです。（P.47）
●ブランドに取り込みたい特徴を入れた「意図的にデザインされたペルソナ」を作ると良いと述べています。（中略）人物像から始めるにしても、場所から始めるにしても、ゴールはブランドを最もよく表す特徴と、避けるべき特徴をいくつか（ウォルターの推奨は5～7個）特定することです。たとえばMailChimpの特徴には、「楽しいけれど子どもっぽくない」、「面白いけどふざけていない」、「パワフルだけどややこしくない」、「流行の最先端であるけれど、なじみがある」、「カジュアルだけど、だらしなくない」などがあります。（P.78）
●モジュール型アプローチは、長期的には順応性と拡張性が高く、コスト効率に優れます。ただし作成に時間がかかる、汎用性が高い分個性が欠ける、モジュール同士の連携で優れた会苦ペリエンスを提供できない時がある。（P.137）
○FutureLearnで私が参加していたチームでは、数か月の間、「Retention（持続利用）」を指標にしていました。コース開始後、より多くの人にそのコースを学習を継続してもらうことを主要な目的としていました。継続のためのデザインは困難でした。継続がユーザーにとってどれほど有益なものかも明確ではありませんでした。この指標が「Engagement（エンゲージメント）」であったとしたら、異なるデザインが生まれていたかもしれません。さらには、この指標がWebサイトに費やす時間ではなく、学習の品質と満足度に置いていたとしたら、おそらくまた違ったデザインになっていたでしょう。（FutureLearnでは30分で必要なことを学べたユーザーもいましたが、これは成功とみなされませんでした）。（P.169）

著者プロフィール

UXおよびインタラクションデザイナーとして、幅広いプロダクトおよび企業向けのWebサイト制作に9年間携わ
る。最近では、オープン教育プラットフォームのFutureLearnでシニアプロダクトデザイナーを務めた。特に関
心を抱いているのは、デザインシステム、言語、コラボレーション。ここ2年間は、こうしたテーマの研究と調
査に多くの時間をつぎ込み、記事、ワークショップ、プロジェクトを通じて自らの見識を紹介している。また、
「A List Apart」のようなデザイン関連サイトに寄稿したり、世界各地のカンファレンスで講演している。現在
は英国のグリーンエネルギーのスタートアップ企業Blubのデザイン＆UXの責任者を務めている。

「2018年 『Design Systems』 で使われていた紹介文から引用しています。」