📚

【読書】つくって、みなおす、デザインシステム

2025/01/13に公開

はじめに

本記事では、デザインシステムの基本的な概念、導入によって得られる効果、そして導入時のコストや難しさについて簡単にまとめています。

本書はデザイナー目線で書かれていますが、基本的なことから丁寧に解説されているためデザイナーでなくても読みやすかったです。

デザインシステムって何?

デザインシステムはデザインの一貫性を確保し、効率的なデザインプロセスを促進するものです。
最近では、構築したデザインシステムを公開している企業や団体もあります。

デザインシステムの効果

  1. 一貫したデザインにより、ユーザーに直感的で予測可能な体験を提供する
  2. デザインや開発の効率を向上させる
  3. デザインに対する共通認識をメンバー同士で持つことができる

デザインシステムは5つの構成要素からなる

  1. デザインコンセプト
  2. スタイルガイド
  3. コンポーネントライブラリ
  4. アセットとリソース

どんな時にデザインシステムが必要か

デザインシステム導入によるメリットは多くありますが、プロジェクトの規模や特性によって、デザインシステムが工数に見合った効果を発揮できるかはどうかは変わります。
ここではデザインシステム導入の難しさと、デザインシステムが必要な時の条件はどんなものがあるかを説明します。

導入する際の難しさ

初期コストがかかる

初めて導入する際は、デザインガイドラインの作成やコンポーネント整備、運用フローの確立などに時間や労力などのコストがかかります。これらのコストはデザインの一貫性の確保や業務効率の向上に繋がるため長期的に見ればコスト削減となりますが、導入時の工程やプロジェクトの規模感によって検討する必要があります。

継続的なメンテナンスが必要

デザインシステムは作成して終わりではありません。ユーザーのニーズは時間とともに変化するためデザインは修正されます。プロダクトが修正された際にデザインシステムのドキュメントも合わせて修正しなければ、実際のプロダクトとの乖離が生じ、それが積み重なるとデザインシステムは形骸化してしまいます。

柔軟性が失われる可能性

デザインの判断基準をガイドライン化すると、一貫性や効率性の担保につながりますが、逆にルールに縛られ過ぎてしまいます。それが新しいアイディアや斬新なデザインなどを導入する際の制約や障害になってしまう可能性があります。

どんな時に導入すべき?

プロジェクトの規模が大きい

多くの画面や機能がある大規模なプロダクトや、さまざまなデバイスに対応する必要があるプロダクトでは各担当者がページやデバイスごとに異なるデザインで作成してしまうことがよくあります。
デザインシステムを導入することで一貫性のあるデザインにすることが可能です。

チームの人数が多い

プロダクトに関わるデザイナーの人数が増えたり、エンジニアやPMなど複数の職種の人間が関わるようになると、デザインルールに対する認識のすり合わせやルールの統一に多くの時間がかかります。
デザインシステムはチームの共通のルールとして機能するため、属人化を防ぎ、効率的にコミュニケーションをする手助けになります。

プロジェクトの更新頻度が高い

更新される頻度が高いプロジェクトでは、しばしば新しい要素やデザインの追加が必要になることがあります。その中で異なるデザイナーやエンジニアが更新を繰り返すと、担当者ごとに独自のルールが作成されてしまいます。
デザインシステムを導入していると、更新する際に一から新しいデザインを作る必要がなく、既存コンポーネントを流用したり、統一さえれたデザインルールによって設計ができるため、誰が担当しても更新にかかる手間を削減できます。

最後に

「デザインシステム」はデザイナーだけでなく、エンジニア(特にフロントエンド)にもその導入による恩恵を強く感じられると思いました。
記事には書いてませんが、本書の後半では、デザインシステムの導入のためにするべきことやその設計、Figmaの有効な使い方についても詳述されているので、今後はそれについてもまとめてみたいと思います。

Discussion