プロダクト開発を進めるうえで、デザインシステムは企業やサービスの一貫性を持たせるために役立ちます。デザインシステムを有効活用することで、ユーザーにとって見やすいデザインになり、ブランド価値を高めることにもつながります。本記事では、プロダクト開発におけるデザインシステムとは何か、その重要性などを解説します。
開発のデザインシステムとは？
プロダクト開発におけるデザインシステムとは、商品やサービスに一貫性を持たせるためのフレームワークです。よりよいプロダクトを開発するために、デザインの基準やドキュメントなどのルールやツールがまとまっています。ただし、デザインシステムの定義は文脈によって異なる場合があるため、注意しましょう。
デザインシステムと混同しやすい概念
デザインシステムと似たシーンで使用される用語である、スタイルガイド、パターンライブラリ、デザインガイドラインとの違いを解説します。
デザインシステム・スタイルガイドの違い
スタイルガイドは、プロダクトで使用する色やテキストのサイズ・フォントなど、あるプロダクトでのデザインのルールを意味します。デザインシステムは、プロダクトを実現するためのルールやツールです。視覚的なルールを定めるスタイルガイドは、デザインシステムの下流に位置する概念であるといえます。
デザインシステム・パターンライブラリの違い
パターンライブラリは、プロダクトに使用したデザインのパターンや、そのコードをまとめたライブラリです。デザインシステムは、プロダクトの実現に向けたルールやツールであるのに対し、パターンライブラリは、すでにできあがったデザインパターンであるという違いがあります。
デザインシステム・デザインガイドラインの違い
デザインガイドラインは、プロダクトに使用するデザイン全般のガイドラインです。デザインシステムは、デザインガイドラインとコンポーネントライブラリ（UIのパーツ、コードのセット）を合わせた概念であり、指し示す領域に違いがあります。デザインガイドラインは、プロダクト実装前までのタイミングで活用するガイドラインともいえます。
デザインシステムの重要性
デザインシステムの有無は、ビジネスに大きな影響を及ぼすこともあります。デザインシステムを活用すれば、デザイナーと開発者のコミュニケーションが円滑になり、プロダクト開発のスピードと品質の向上につながります。さらに、企業やプロダクトのデザインに統一感が出て、ブランドの価値向上や信頼の獲得も期待できるでしょう。
デザインシステムを構成する要素
ここでは、デザインシステムを構成する要素について解説します。
3つのデザインシステム構成要素
デザインシステムは、以下の3要素で構成されています。
・デザイン原則：デザインを決める際の基準となる考え方
・スタイルガイド：デザイン原則に基づいたルール
・コンポーネントライブラリ：ルールに基づいて構築されたツール
3つの要素は独立しているわけではなく相互に影響し合います。基本的にデザイン原則からスタイルガイド、コンポーネントライブラリが作られます。一方で、反対にスタイルガイドやコンポーネントライブラリからの影響で、デザイン原則が変更されることもあります。
デザイン原則
デザイン原則は、企業やプロダクトの理念や方針を反映した原則です。具体的には、以下の要素が含まれます。
・ブランドの方針
・デザインの指針
・コンテンツの指針
・表現の指針
・情報設計
・用語集
デザイン原則には優先すべき事項や基本的な考え方がまとめられています。新しくプロダクトをデザインする際は、まずデザイン原則をドキュメントとして作成しましょう。
スタイルガイド
スタイルガイドは、プロダクトで使用するデザインのスタイルがまとめられたガイドラインです。具体的には、以下の要素が含まれます。
・色
・テキストのルール（タイポグラフィ）
・アイコン
・余白
・アニメーション
ボタンの配列方法を並列にするか縦並びにするかなど、プロダクト全体で統一されていなければ、ユーザーの満足度に影響を及ぼす要素も含まれます。
コンポーネントライブラリ
コンポーネントライブラリは、デザイナーだけでなくエンジニアも参照するライブラリです。UIのパーツや、実装するためのコードがまとまっています。具体的には、以下の要素が含まれます。
・ボタン
・リスト
・ナビゲーション
・アコーディオン
コンポーネントライブラリによりエンジニアへの情報伝達がしやすくなり、一貫性のあるプロダクト開発につながります。
デザインシステムによるメリット
デザインシステムを構築することで、UIデザインに一貫性が出る、チーム内のコミュニケーションが円滑になる、生産性が向上するといったメリットがあります。
UIデザインに一貫性ができる
デザインシステムが構築されていれば、プロダクトのUIデザインに一貫性が生まれ、品質やユーザーの満足度の向上が期待できます。たとえば、プロダクトの一部だけUIデザインが違ったり、ページによってデザインの方向性が異なったりすると、ユーザーが混乱し利用にストレスを感じてしまいます。プロダクト全体としてデザインに一貫性があればユーザー体験が向上し、品質が安定するでしょう。
コミュニケーションが円滑になる
デザインシステムの構築は、プロダクト開発に携わるメンバー同士の、コミュニケーションの円滑化にもつながります。デザイン原則が定まっていれば、開発が進んでからメンバー間で意見の対立が生じることも減ります。一定のルールに基づいて議論を行えば、より建設的な意見のすり合わせも可能になるでしょう。
生産性向上に役立つ
デザインシステムを構築し、一定のルールに従って開発を進めれば判断が迅速になり、生産性が向上します。また、再利用が可能なパーツがまとまっていれば逐一新規に作成する必要がなく、実装スピードが上がるでしょう。さらに、情報伝達にかかるコミュニケーションコストも減るため、チームでの作業を効率的に進めることができます。
デザインシステムにおける課題
デザインシステムを活用した開発にはさまざまなメリットがある一方で、考慮しなければならない課題も存在します。例えば、デザインシステムの構築自体に工数がかかることが挙げられます。そのため、小規模なプロジェクトや非継続的なプロジェクトの場合、むしろ効率が悪くなる場合もあるでしょう。
また、デザイン原則などのルールを定義した際のメンバーが離脱してしまった場合、実装までたどり着かない場合もあります。
デザインシステムを作る手順
ここでは、デザインシステムは実際にどのような手順で作成すればよいのか解説します。
デザイン原則を決める
まずはブランドやコンテンツの方針といった、デザイン原則を定めましょう。デザイン原則はデザインシステムの根幹を形成するルールです。デザイン原則がぶれているとプロダクト全体の品質に関わるため、一貫性を重視して作成することが重要です。
スタイルガイドを決める
デザイン原則が定まったら、スタイルガイドを作成しましょう。プロダクトで用いる色やテキストのルール、アイコン、余白の取り方も検討します。スタイルガイドは、プロダクトに携わるデザイナーの共通言語ともいえるガイドラインです。ブランドやプロダクトの「らしさ」が表現できているかも考慮しましょう。
コンポーネントライブラリを決める
最後に、ボタンやナビゲーション、フォームなど、UIパーツを含むコンポーネントライブラリを決めましょう。コンポーネントライブラリを作成することで、デザイン観点だけでなく実装の視点が加わります。
コンポーネントライブラリをデザイナーと開発者で共有すれば、一貫性のあるプロダクトのスムーズな開発が期待できます。
デザインシステムを作るうえで気をつけたいポイント
プロダクト開発の目的に沿ったデザインシステムを作成するためには、以下の点に注意しましょう。
導入の目的を明確化する
まずは、デザインシステムを導入する目的や解決したい課題を明確にしましょう。作成目的が曖昧だと現場で活用しづらく、せっかく作成しても無駄になってしまう場合もあります。数値目標を設定するなど、達成率を客観的に把握できる基準を設けることも有効です。
小規模から始める
いきなり大規模なデザインシステムを構築するのではなく、小規模なものから作成しましょう。小規模に始めれば無駄が生じるリスクを最小限に抑えられます。すべての要素を最初から取り入れる必要はありません。運用しながらデザインシステムを完成させることを意識しましょう。
デザインシステムの事例
実際にデザインシステムを活用している事例を紹介します。自社の開発の参考にしてみましょう。
デジタル庁デザインシステム
デジタル庁デザインシステムは、デジタル庁デザインユニットが開発したデザインシステムです。省庁のWebサイト、Webサービスの制作に活用することを前提として構築されています。このサイトは一般公開されており、誰でも閲覧できるため、地方自治体のプロダクト開発で活用する他、一般企業でもデザインシステムの見本が欲しい場合に役立つでしょう。
クックパッド「Apron」
レシピの投稿・検索プラットフォームを中心とした事業を展開するクックパッドでは、Apronというデザインシステムを構築し、運用しています。Apronは、iOS版、Android版、Web版などプラットフォームを跨いで利用できることが特徴です。トレンドを意識したデザインとなっているため、自社のデザインシステム構築の参考にするのもよいでしょう。
まとめ
プロダクト開発におけるデザインシステムは、プロダクト全体の一貫性を保ちユーザー体験を向上させ、ブランド価値も高められるフレームワークです。自社にとってのデザインシステムの必要性や目的を見極め、まずは小規模から始めるなど柔軟に対応しましょう。
株式会社Sun Asteriskは、DXコンサル・設計から本格的な開発まで、お客様の開発を一気通貫で支援します。豊富なエンジニア・デザイナーのリソースから、お客様に適した開発チームを構築します。ぜひご相談ください。
貴社の状況にあわせて最適なチームをご提案します。デザインシステムのご相談やお見積りのご依頼は、お気軽にお問い合わせください。
デザインシステムに関するソリューションやこれまでの開発実績をまとめた資料のダウンロードはこちらから。