目次
- はじめに
- デザインシステムとは？
- なぜデザインシステムが必要なのか？
- デザインシステムの構成要素
- デザインシステムの導入プロセス
- デザインシステム導入のメリット
- デザインシステム導入のデメリットと対処法
- 国内外のデザインシステムの事例
- Google – Material Design
- Apple – Human Interface Guidelines
- IBM – Carbon Design System
- デジタル庁
- メルカリ – Design System Web
- LINE – LINE Design System
- サイバーエージェント Ameba – Spindle
- SmartHR-SmartHR Design System
- ラクスル-kamii
- 楽天-ReX
- Cookpad-apron
- 英単語アプリmikan- mikan Design System
- note DESIGN
- kaonavi- kaonavi Brand Deck
- Wantedly- Wantedly UI Components Wantedly UI Components
- 一休- IKYU Design Guideline
- Francfranc- Francfranc Design System
- Starbucks- Starbucks React Pattern Library
- デザインシステムについてのまとめ
はじめに
スマホアプリやオンラインサービスといったデジタルプロダクト開発において、デザインは非常に重要な要素の一つです。そして高品質なデザインを維持しながら効率的に開発を進めるためには、デザインシステムの導入が必要になるでしょう。
本記事では、UIデザイナー、UXデザイナー、エンジニア、ディレクター、プロダクトマネージャー (PdM) などのデジタルプロダクトに関わる人が理解しておくべき、デザインシステムとその役割、必要性、構成要素、導入プロセス、メリットとデメリットについて解説します。また、国内と海外のデザインシステムの事例についても紹介していきます。
デザインシステムとは？
デザインシステムとは、Webサービスやアプリなどのデジタルプロダクト開発におけるデザインのルールやガイドライン、コンポーネントなどを統一した体系的な仕組みのことを指します。デジタルプロダクトについてはこちらの記事をご参照ください。デザインシステムとは、エンジニアやUI/UXデザイナーが一貫性のあるデザインを効率的に作成・維持できるような指針・戦略と言ってもいいでしょう。また、優れたデザインシステムを構築することによって、ブランドイメージ、顧客満足度、リテンション率 (ユーザー保持率) の維持、ユーザーインターフェイス（UI）、ユーザーエクスペリエンス（UX）を向上させる役割も期待できます。
デザインシステムの重要性は、デジタルプロダクトが急速に進化し、多様化している現代においてますます高まっています。実際、多くの企業や組織がデザインシステムを導入し、デザインや開発の効率性を向上させ、顧客満足度を高めることを目指しています。
なぜデザインシステムが必要なのか？
デザインシステムの必要性について、Webサービスやアプリなどのデジタルプロダクトの改善や運用において、具体的な観点からその重要性を掘り下げてみましょう。
デザインの一貫性
デザインシステムはデザインの一貫性を確保するための最も重要なツールの一つです。デザインの一貫性とは、サービスやアプリ全体を通じて各要素の意味が統一されていることです。これはユーザーが製品やサービスを使いやすく、理解しやすくするために欠かせないものです。当然のことではありますが、デザインが一貫していないと、ユーザーは時に戸惑ったり、サービスやアプリを使うのに必要な労力が増えてしまいます。もしくはサービスの退会や離脱にもつながるでしょう。これはユーザー体験を損なうだけでなく、ブランドイメージにもマイナスの影響を与えてしまいかねません。デザインシステムを活用し、一貫した心地良いユーザー体験を提供することで、ユーザーの満足度とサービスへの定着を高めることができるでしょう。
サービス開発の効率アップ
デザインシステムは、開発チームが効率的良くプロジェクトを進めることにも役立つでしょう。各ページで繰り返し利用可能なコンポーネントを予め用意しておけば、新しい機能やページを追加する際に、都度一からデザインをする必要がなくなります。これにより、開発時間を短縮して、プロトタイピングを素早く立ち上げたり、サービスやアプリの改善を早いサイクルで繰り返していくことが可能になるでしょう。
また、一般的にデザインシステムがあれば製品やサービスが拡張していったとしても、ページや機能の追加がしやすくなるなど、保守・運用のメリットも大きいです。
チーム内コミュニケーション
デザインシステムを用いることでUI/UXデザイナー、エンジニア、ディレクター、プロジェクトマネージャー、プロダクトマネージャーなど、異なる役割を持つチームメンバー間のコミュニケーションを円滑にすることができるでしょう。事前に仕組みづくりをしっかり行うことで、ミスや誤解を減らし、プロジェクト進行の効率や最終的なクオリティの向上に寄与することができるでしょう。
メンバーの学習コストの削減
デザインシステムを整備することで、チーム内での共通認識、デザインルール、進行プロセスをスムーズにしてくれます。そのため、デザインシステムの導入によって、プロジェクトに新たに参加するUI/UXデザイナーやエンジニアは、現在のデザインや機能といったルールを短い時間で理解することができるでしょう。
デザイン言語 (Design Language) の共通化
デザインシステムにより、デザインの基本要素（カラーリング、文字サイズ、マージンの取り方、ボタンやアイコンの体裁など）や、それらがどのように組み合わさってUIコンポーネントやパターンを形成すべきかについての共通の理解が生まれるでしょう。このことをデザイン言語 (Design Language) の共通化と呼ぶことができます。視覚的に整理されたコンポーネントがあれば、言語と同じ様に明確なルールと認識できますので、制作チーム内に共通認識を浸透させることができます。
再利用可能なコンポーネント
デザインシステムには、再利用可能なUIコンポーネントやパターンが含まれています。これらのコンポーネントやパターンを組み合わせることで新しいページの作成が容易になることでしょう。制作チームのメンバーは、これらのコンポーネントの意図や意味を理解することで、コンポーネントを使った新しいページのデザインを容易に作成することができます。
ガイドラインとドキュメント
デザインシステム一式には、デザインの原則、実装のルールなどを含むガイドラインやドキュメントが含まれます。これらのガイドラインを通じて、チームメンバーがデザインの意図を理解し、ガイドラインに沿ってこれまでのデザインを継承した新しいページを作成することができます。
上記によって、新たなチームメンバーや機能改修における制作時間を短縮し、デザインの一貫性を保ち、生産性を向上させることができるでしょう。これらがまさにデザインシステムが必要とされる理由であります。
デザインシステムの構成要素
デザインシステムの主要な構成要素であるデザイン原則、スタイルガイド、そしてコンポーネントライブラリについて詳しく説明します。
デザイン原則
デザイン原則は、デザインシステムの基礎となる価値観や指針を示すものです。チーム全体が共有するビジョンや目標を明確にする役割を持ち、どの様なデザインであるべきかの基準になります。デザイン原則は幅広い業務に対応するために少し抽象的であることもありますが、そのメッセージに込められたニュアンスを理解し、体現していくデザインが求められます。
例えば、「ユーザー中心」、「シンプルさ」、「ユーザーに発見や示唆を与える」などがデザイン原則として設定されることがあります。これらの原則は、デザインの決定を行う際の評価基準となり、デザインがその目的を達成するための道筋を示します。
スタイルガイド
スタイルガイドは、デザインの視覚的な側面を定義します。これには色、タイポグラフィ、グリッドシステム、スペーシング、アイコン、イメージの使用方法などが含まれます。スタイルガイドはデザインの一貫性を保つための基本的なガイドラインです。様々なデザイン要素の使用方法に一貫性が生み出されることで、ユーザーに対してプロダクトやサービスに対する理解を深めさせ、信頼感を与えることができるでしょう。
コンポーネントライブラリ
コンポーネントライブラリは、各ページで繰り返し使用されるUIコンポーネントを集めたものです。ボタン、フォームフィールド、ナビゲーションメニューなど、各コンポーネントは汎用性を考慮しつつ、サービスの目的や機能を果たすよう設計されています。
コンポーネントライブラリは、デザインと開発の効率性を向上させます。繰り返し利用可能なコンポーネントを使用することで、UI/UXデザイナーやエンジニアは新しいページや機能を迅速に作成することができます。また、これらのコンポーネントは、その使用方法と実装の詳細が明記されています。これにより、コンポーネントの一貫した使用と、それが期待通りに機能することが保証されます。さらに、再利用可能なコンポーネントを使用することで、新たなデザインや実装が必要な場合の時間と人員リソースを節約できます。
デザインシステムの構成要素は、それぞれが異なる目的と役割を持っており、それらが組み合わさることで全体としてのデザインシステムが形成されます。デザイン原則は、デザインの方向性と目標を定義します。スタイルガイドは、一貫した視覚的スタイルを確保します。コンポーネントライブラリは、再利用可能なUI要素を提供し、デザインと開発の効率性を向上させます。
これらの要素は、デザインシステムが提供する一貫性、効率性、スケーラビリティを具現化します。それぞれが組織全体で共有され、適用されることで、デザインの一貫性と品質が向上し、開発の効率性とスピードが大幅に改善されます。
デザインシステムは、それが適用される組織やプロジェクトの規模、ニーズ、人員リソースに応じて最適なガイドラインになっていくべきものです。一時的な指針ではなく、長期的な方針であり、組織のデザインや開発への姿勢を表現するものであり、ガイドラインを踏襲していくことでユーザー体験の質を向上させることができるでしょう。
デザインシステムの導入プロセス
デザインシステムを導入するためのプロセスは、組織の規模、ニーズ、人員リソースにより異なりますが、一般的に以下のステップで進行します。
ニーズの把握と目標設定
最初に、デザインシステムの導入によって達成したい目標を明確にします。これは、デザインと開発の効率性の向上、デザインの一貫性と品質の確保、学習コストの削減など、具体的なビジネスの目標が含まれていると理想的です。また、デザインシステムが解決するべき具体的な問題や課題を設定しておくことも良いでしょう。現時点だけでなく、サービスが成長していった将来においても通じる様なコンセプトを含めておきましょう。
どういったチームで取り組むか
デザインシステムの開発と管理は、UI/UXデザイナー、エンジニア、プロダクトマネージャーなど、様々な役割のメンバーを含むチームの共同作業です。チームメンバーの役割と責任を明確にしておきましょう。
現状の把握
既存のデザインと開発フロー、開発ツール、すでに存在しているコンポーネントを把握しましょう。また重要な価値観である、デザイン原則を設定しましょう。自社のデジタルプロダクトがどういったものでありたいかについて、このステップでしっかりと定義しておくことが重要です。
ガイドラインやドキュメントの整備とメンバーへの浸透
デザインシステムの使用ガイドラインとドキュメンテーションを作成し、チームメンバーへの浸透を行います。デザインシステムの必要性や適切な使用方法について、しっかりと理解をしてもらうことが重要です。
デザインシステムの導入
デザインシステムをデジタルプロダクトに導入し、既存のワークフローや仕事を行う順序に組み入れていきます。新しいUIコンポーネント、既存のデザインとコードの更新、新しいツールの導入などが発生した際に、どの様にデザインシステムを更新すべきかも決めておきましょう。
改善の繰り返し
デザインシステムの導入後も、利用ユーザーからの使用感などのフィードバックを集め、デザインシステムの改善を続けましょう。新しいUIコンポーネントの追加、機能の追加、コードの修正方法、ガイドライン・ドキュメントの更新などが対象になります。
デザインシステムの導入は、単発的なプロジェクトではなく、長期的にデジタルプロダクトを成長させるためのプロセスと考えることができます。デザインシステムは、組織の体制、実装する技術のトレンド、最適なデザインなどに合わせて進化し続けます。そのため、デザインシステムの導入と管理は、組織全体でコミットし持続的に運用することが重要です。
デザインシステムの導入は、チームでの協働とコミュニケーションを強化し、デザインや開発のクオリティや効率性を向上させ、より良いデジタルプロダクトと高いユーザー体験を実現できるでしょう。
デザインシステム導入のメリット
デザインシステムの導入がもたらすメリットは数多くありますが、主に以下が挙げられます。
デザインの一貫性
デザインシステムは、一貫性のあるユーザー体験を提供するための基盤を提供します。チーム全体で一貫したデザイン原則、スタイルガイド、UIコンポーネントを共有することで、デジタルプロダクトのデザイントーンを維持できたり、統一されたブランド体験を提供できるでしょう。
効率性と生産性の向上
再利用可能なUIコンポーネントとガイドラインの整備によって、デザインと開発のプロセスはより効率的になります。新しいデザインをゼロから作成する必要がなく、UI/UXデザイナーやエンジニアは時間や労力を節約できます。これにより、チームはより複雑な問題解決や新機能開発により集中することができます。
学習コストの削減
デザインシステムは、新たにチームに参加したメンバーや他のチームとのコラボレーションにおける学習コストを減らすことができるでしょう。デザインシステムが提供するドキュメンテーションとガイドラインは、デザインと開発のベストプラクティスを共有し、新しいメンバーが既存のワークフローとスタンダードに素早く適応できる様になるでしょう。
品質の向上
デザインシステムの導入は、デザインとシステム開発の品質を向上させます。再利用可能なコンポーネントは改善が繰り返されており、それを使用することでユーザーによるエラーや離脱を減らすことができるでしょう。また、デザインの一貫性はユーザー体験の質を向上させ、ユーザーの満足度とブランドの価値を高めることができるでしょう。
拡張性
デザインシステムは新たな要素を追加させより充実させていくものであるため、拡張が可能ですし、新たな要素や変更を取り入れることができます。これにより、組織は既存のデザインに一貫性を保ちながら新しいプロダクトや機能を迅速にアップデートすることができるでしょう。
コミュニケーションの改善
デザインシステムは、UI/UXデザイナー、エンジニア、プロダクトマネージャーなどの間でのコミュニケーションを改善します。共通の言語と理解を共有することで、チーム間の誤解や不一致を減らし、よりスムーズで効率的な協業が可能になるでしょう。
チーム内へのブランディング効果
デザインシステムは、チームへの帰属意識と誇りを醸成します。明確なガイドラインに沿ってチームワークを発揮し仕事に取り組むことで、メンバーは自分たちの仕事が組織全体のビジョンと目標に貢献できることを感じるでしょう。
これらのメリットは、デザインシステムの導入と維持に投資する価値を明確に示しています。デザインシステムは、デザインと開発のプラクティスを強化し、チームのパフォーマンスを向上させ、最終的にはより優れたプロダクトとユーザー体験を生み出します。
デザインシステム導入のデメリットと対処法
デザインシステムを導入する際には、いくつかの潜在的なデメリットや課題に注意する必要があります。しかし、これらの問題は適切な計画と対策によって克服できます。
人員リソースと初期の労力が必要
デザインシステムの初期開発と維持は、時間、労力、人員リソースを必要とします。これは、特に小規模の会社やチーム、人員リソースに制約のある組織にとっては、負担となる可能性があります。
これに対処するためには、デザインシステムへの投資の意味を理解し、長期的な利益を見据えることが重要です。また、デザインシステムを小規模なところから始めて段階的に発展させたり、初期段階で最も重要な要素から始めるなどの方法も有効です。
デザインシステムの浸透と新規メンバーへの理解促進
デザインシステムを導入すると、チームのワークフローなどの変更が必要になるため、メンバーによって導入のための温度差が生じる可能性があります。
対処法: デザインシステム活用の目標とメリットを明確に伝え、チームメンバーのフィードバックと参加を促すことが重要です。また、導入するための意義の説明や頻繁なコミュニケーションをもって、チームメンバーがデザインシステムを理解し使用することを支援します。
維持とアップデート
デザインシステムは一度決定されたら固定されてしまうのではなく、組織のニーズ、技術やデザインのトレンド、ユーザーの志向の変化などに合わせて更新と改善を続ける必要があります。デザインシステムの維持とアップデートが必要となるでしょう。
これに対しての対処法は、デザインシステムの維持と管理が必要であるということを組織全体で認識し、その重要性を理解してアップデートの手間を惜しまないことが必要でしょう。また、ユーザーからのフィードバックや解析データなどを活用して、デザインシステムの効果を把握し、必要な改善を続けることが重要です。
デザインのマンネリ化
デザインシステムを導入することで、各スクリーンのデザイントーンやUIを統一できることは前述の通りです。ただ、これはサービスやアプリ全体のデザインのメリハリが少なくなってしまうことと表裏一体です。各コンポーネントを繰り返し使うことで、他スクリーンとの変化が少なくなり、ユーザーにとってどのスクリーンを見ているかの注意力が低下してしまう可能性もあります。またあるべきスクリーンで必要な訴求ができないと、サービス全体の魅力低下にもつながりかねません。
こういったデメリットの対策としては、
- 主要なスクリーンではデザインシステムに捉われずオリジナルのデザインをすることを許容する
- 必要なコンポーネントの追加に対してもある程度の柔軟な姿勢を持つ
- 定期的に全体を見渡して、突出したコンポーネントが汎用的なコンポーネントで置き換えられないかを検討する
といったプロセスが必要でしょう。デザインの一貫性と、オリジナリティのバランスをうまく保つことが求められると考えられます。
上記の様なデメリットや課題はありますが、デザインシステムはデザインと開発の一貫性、効率性、品質を向上させ、最終的にはより優れたプロダクトとユーザー体験が提供できるはずです。小規模なところから始めたりと適切に導入していくことで、デザインシステムの実現は可能となり、その長期的なメリットは、初期投資を回収できるでしょう。
国内外のデザインシステムの事例
デザインシステムは数多くの組織に採用され、そのメリットを実証しています。以下に、国内外の代表的なデザインシステムの事例をいくつか紹介します。
Google – Material Design
Material Designは、Googleが開発した統一的で包括的なデザインシステムです。物理世界とそのテクスチャ、光、影を模倣するこのシステムは、Googleのさまざまなプロダクトやサービスに一貫性をもたらしました。また、その詳細なガイドラインとリソースは、他のUI/UXデザイナーやエンジニアにも利用可能で、多くのアプリやウェブサイトで採用されています。
Apple – Human Interface Guidelines
Appleの「Human Interface Guidelines」は、iOS、macOS、watchOS、tvOSの各プラットフォームのデザインシステムを提供します。一貫性、直感性、美しさに重点を置いたこのガイドラインは、Appleのプロダクトのユーザー体験の質を高めるだけでなく、外部のエンジニアにも高品質なアプリを作成するための基準を教えてくれます。
IBM – Carbon Design System
IBMの「Carbon Design System」は、デジタルプロダクトのデザインと開発を効率化するためのオープンソースのデザインシステムです。再利用可能なコンポーネント、デザインパターン、ガイドラインを提供し、IBMのブランドと製品に一貫性と使いやすさをもたらしています。
デジタル庁
日本国政府のデジタル庁でも、様々なオンラインサービス設計におけるデザインシステムを公開しています。デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。誰でも構築中のデザインシステムのデザインデータを閲覧することができます。
デザイン庁Figmaのコミュニティでは、実際に使えるコンポーネントデザインやイラストなども公開されています。ボタンも様々なステータスが用意されているなど、デザインとシステム構築がスムーズに連携できる様に工夫された設計です。
メルカリ – Design System Web
メルカリ独自のデザインシステム「Design System Web」。このデザインシステムは、メルカリのためのプロジェクトという方向性を改め、メルカリグループ全体、ひいてはマーケットアプリ全体で使うことを想定したDesign Systemを構築するという目的を持っています。
LINE – LINE Design System
LINEは、自社の多様なサービスと製品に一貫性と調和をもたらすために、LINE Design Systemというデザインシステムを開発しました。色、タイポグラフィ、コンポーネントなどのガイドラインを提供し、全体的なユーザー体験の質を向上させるために利用されています。
サイバーエージェント Ameba – Spindle
サイバーエージェントが運営するAmebaは、独自のデザインシステム「Spindle」を開発しました。”Amebaらしさ”を一貫してユーザーに届けるための仕組みです。”Amebaらしさ”がユーザーに届き、共感が生まれることで、サービスの信頼へと繋げることを目指しています。
SmartHR-SmartHR Design System
クラウド人事労務ソフトSmartHRのデザインシステム「SmartHR Design System」。ブランドのコンセプト・イラスト・プロダクトのデザイン原則など、ガイドラインがとても充実しています。
ラクスル-kamii
印刷サービスなどを提供するラクスルのデザインシステム「kamii」。ラクスル印刷事業部全てのデザイン活動における指針とされています。思想や価値観、レイアウト、色、ライティングなどのガイドラインが提供されています。一部英語での解説もあり、読みやすいつくりとなっています。
楽天-ReX
楽天のデザインシステム「ReX」。より良いUXを提供できる仕組みづくりや、顧客志向の視点を楽天グループ全社に浸透させ、“ユーザーに楽天を好きになってもらう体験”を幅広く提供することを目指しています。楽天市場から楽天トラベル、楽天モバイル、楽天証券まで楽天グループ全体を対象としている点もポイントです。
Cookpad-apron
レシピサービスクックパッドのデザインシステム「apron」。レシピサービスのプロジェクトに携わっている方はより参考になるでしょう。主婦層を中心にしながらも、時代に合わせてさらに幅広い年齢や性別を意識したデザインを行うクックパッドの裏側を見ることができます。
英単語アプリmikan- mikan Design System
英単語アプリmikanのデザインシステム。UIコンポーネントを組み合わせてデザインを構築できるように設計されています。公開されているものは一部ですが、デザインシステムを作る際の参考となるはずです。
note DESIGN
メディアプラットフォームnoteが公開しているデザインシステム。現在は、（2024年3月時点）イラストシステムのみが公開されています。他にも、note在籍デザイナーによる記事や、彼らがピックアップした他媒体のデザインに関する注目記事も読むことができます。
クラウド人材管理システムを運営するkaonaviによるデザインシステム。kaonaviの人材の個性や可能性を大切にしている姿勢が反映されている点が特徴的です。デザインエレメントについてわかりやすい説明がされているのもポイントです。
Wantedly- Wantedly UI Components 
Wantedly UI Components
オフィシャルサイトに投稿されたストーリーによると、WantedlyのUIデザインシステムは、ブランド表現、ベーシックなユーザビリティの担保、デザインアウトプットの効率化、エンジニアとのフロントエンド開発、コミュニケーション、メンテナンスの効率化、という目的で作成され運用されています。
一休- IKYU Design Guideline
高級旅館・ホテル・レストランなどのWeb予約サービスを運営する一休において、「一休らしいデザイン」を定義したガイドライン。Web制作においてのルールが特に詳しく書かれており、参考になりそうです。
Francfranc- Francfranc Design System
インテリア雑貨の販売やコーディネートを手がけるFrancfrancが公開しているデザインシステム。ブランドの未来のために「らしさ」を定義し、ブランドにふさわしい「自由」や「様々なデザイン」の基準を示すために、デザインガイドラインを作ることにしたそうです。情報がシンプルにわかりやすくまとめられています。
Starbucks- Starbucks React Pattern Library
Starbucks React Pattern Library
Starbucks Pattern Libraryは、スターバックスが公開している、Webサイトやアプリなどのデジタルプロダクトのデザインや開発を支援するためのパターンライブラリ。タイポグラフィや色などの基本的な要素から、ボタンやカードなどのコンポーネントまで、詳しく解説されています。
デザインシステムについてのまとめ
デザインシステムは、Webサービスやアプリなどといったデジタルプロダクトの一貫性、拡張性、効率性を高めるための重要なツールとなっています。この記事では、デザインシステムの定義、必要性、構成要素、導入プロセス、メリットとデメリット、さらには具体的な事例まで、幅広く深くデザインシステムについて解説しました。
デザインシステムとは、デザインと開発の一貫性と効率性を向上させるための、再利用可能なコンポーネントと規範をまとめたものです。デザイン原則、スタイルガイド、コンポーネントライブラリなどが主な構成要素であり、これらを通じて一貫したユーザー体験とブランドイメージを実現します。
デザインシステムの導入は、デジタルプロダクトの改善・機能拡張や維持、学習コストの削減、デザインと開発の効率向上など、多くのメリットをもたらします。ただし、導入初期の高コスト、組織のコミットメントが必要となる、維持と更新に労力がかかるなど、デメリットや課題も存在します。
さらに、Google、Apple、IBM、メルカリ、サイバーエージェント、LINEなどの国内外の企業がデザインシステムを導入し、その利益を享受している事例を紹介しました。これらの事例は、デザインシステムが実際にどのように活用され、その価値が体現されているかを示しています。
デザインシステムの導入によって、プロダクトの一貫性と品質を確保し、組織の効率と生産性を高め、より良いユーザー体験を提供できることになるでしょう。デザインシステム導入と運用は、適切な計画やチームメンバーへの浸透が必要になりますが、長期的なメリットを与えてくれるでしょう。UIデザイナー、UXデザイナー、エンジニア、ディレクター、プロダクトマネージャー (PdM) などのデジタルプロダクトに関わる人は、この記事を通じてデザインシステムについて理解を深めていただければと思います。
