サービスの体験価値を高めるデザインシステムの基礎理解

デジタルの現場で変化していく課題

従来のソフトウェア業界では、プロダクトのデザインに関する基本ルールや指針をまとめた「デザインガイドライン」や「デザインパターン」を活用していました。

しかし、デジタル化が進むにつれて、開発（コード）と一体化した管理が求められるようになり、さらにプロダクトの更新頻度が増加したことで、より迅速な対応が必要とされ始めました。

プロダクトの実装や運用時での管理のしやすさが重視されるようになった結果、企業や開発現場では「デザインシステム」に関心を寄せるようになりました。

デザインシステムとは

デザインシステムは、プロダクトの目的を達成するために、首尾一貫したルールで編成されたパターンとその実践方法で、簡単にいうとデザインに関するあらゆる情報をルール化したものです。開発に携わるすべての人がスムーズに意思疎通できる共通言語のような存在として活用できます。

デザインシステムのメリットは、主に2つあると考えられます。

1. プロジェクトに関わるメンバー間で共通認識を持ち、開発の効率化と品質の向上に貢献

開発現場ではデザイナーやエンジニア、マーケター、QA（Quality Assurance）など、多種多様な専門職の方が参加します。

もし、デザイナーとエンジニアがそれぞれの役割の中でプロジェクトを追求した場合、どこかで自分たちの領域外の場面と出会う可能性があります。その際に、お互いの連携やスキルの補完が上手くいかずに不完全に物事を終えてしまうかもしれません。

また、数年間にわたる長期的なプロジェクトでは、途中でメンバーの入れ替えが発生する場合も考えられます。そのような状況において、デザインシステムがあると、プロダクトの目指すべき姿や方針がブレずに効率的に開発を進められます。

他にもデザイナーだけでなく、関係者全員がデザインを創出できる効果もあります。その結果、デザイナーは本来注力すべきこと（例えばプロダクトの本質的な業務）にリソースを集中できるようになり、プロダクトの品質向上につながります。

技術の進化で新たな開発環境が誕生しても、デザイナーの本質的な役割は今も昔も変わりません。重要なのは、システムやツールを適切に活用しながら、最適なデザインを追求して課題を解決することです。

2. 一貫性のある体験を提供でき、ユーザーの満足度と定着度の向上につながる

プロダクトのデザインは、テキストやアイコン、写真などさまざまな要素で構成されています。

もし統一性に欠けるプロダクトを提供した場合、ユーザーはどう思うでしょうか。おそらく、ユーザーは混乱と同時に不信感も抱き、プロダクトの認知度や使用率が低下する恐れがあります。また、使い勝手が悪く他社との優位性に欠けたプロダクトは、事業にも悪影響を及ぼすかもしれません。

こうした事態を避ける方法としてもデザインシステムは有効的です。ユーザーが目にするビジュアルの統一だけでなく、ふるまいや構造も統一するので、強いブランドの確立に貢献できます。

デザインシステムを活用してユーザーに一貫した体験を提供する

これらのことから、デザインシステムはインナーブランディングとアウターブランディングの両方に寄与できる存在だと言えるでしょう。

次のブロックでは、あらゆる面で効果が期待できるデザインシステムの仕組みをお伝えします。

デザインシステムの構成要素

デザインシステムは、主に「デザイン原則」「スタイルガイド」「UIパターン」「運用ルール」の4つの要素から成り立っています。

デザインシステムの構成要素

各要素を説明するとともに、プロダクトにデザインシステムを初めて導入する際のポイントもご紹介します。

デザイン原則

複数人が関わるプロジェクトでは、プロダクトにおける考え方や世界観がずれる可能性があるため、デザイン原則を定めて共通の指針を持つことが大切です。

デザイン原則は、デザインシステムの基盤となるルールや方針をまとめたもので、プロダクトの一貫性を保つ上で欠かせない要素です。開発を円滑に進めるためにも役立ちます。

・デザイン原則の策定

まずは、「対象となるプロダクトとそれを運営する企業」のビジョンを理解することから始めます。加えて、「ユーザーのニーズや利用シーン」を詳しく分析します。

次にプロダクトが目指す姿を明文化することで、デザイン原則が完成します。具体的には「プロダクトの方向性」「目指す姿に必要なUXの策定」「世界観の言語化やビジュアル化」を定義します。

プロダクトの設計や運用の指針はデザイン原則として言語化し、世界観のイメージはムードボードにまとめます。ムードボードを使うことで、言葉で表現しにくいものもビジュアルで明確に共有でき、メンバー間の方向性や世界観のずれが減少し、イメージの解像度を高められます。

フェンリルは、デザインシステムの構築をはじめ、運用や内製化の支援をしています。デザイン原則を策定する際は、独自のフレームワーク「5x」を利用し、クライアントとフェンリルメンバーが共同でワークショップを実施しています。

5xについて詳しく知りたい方は、こちらの「体験価値を最大化する、フェンリル独自の手法『5x』」をご覧ください。

スタイルガイド

デザイン原則を基に作成する具体的なデザインのルールのことで、カラーやタイポグラフィー、要素間の余白など細かな部分が含まれます。ここではスタイルガイド作成に関する要素を2つご紹介します。

・カラースタイルの管理

色名（プリミティブカラー）と役割（セマンティックカラー）で管理します。これらを単独で構成することもあれば、両方を用いて管理する場合もあります。2段階での管理は、企業のブランドカラーをプロダクトに反映したり、複数のプロダクト間で使用する色を統一したりする場合に有効です。

・タイポグラフィーの管理

タイポグラフィーは、プロダクト全体の可読性や視認性、ブランドの一貫性を保つ上で非常に重要です。書体や文字の大きさ、太さ、行間、文字間隔をはじめ、それらの要素を組み合わせたテキストスタイルを定義します。

これらの管理方法は、プロダクトの規模や目的によって異なります。実際の開発現場では画面デザインをつくりながら、必要なデザイン要素を定義したグランドデザイン（中間成果物）を作成し、最終的にスタイルガイドを完成させます。

UIパターン

UIパターンは、コンポーネントとレイアウトパターンをまとめたものです。コンポーネントとは画面デザインに使用するパーツで、ボタンやフォーム、リストが含まれます。ここではUIパターンに関する要素を2つご紹介します。

・コンポーネントの作成

まずはデザイナーが各画面で使用するボタンやフォームなどの共通のパーツを抜き出します。例えば、ボタンの場合は、優先度、サイズ、状態変化、アイコンの有無など、コンポーネントごとに必要なバリエーションを整理します。

次はコンポーネントを組み合わせてレイアウトパターンを作成し、画面に当てはめたときに違和感がないかを確認しながら作業します。概ね構想ができたら、エンジニアがコード化する作業を実施。最終的には完成したデザイン（見た目）とコードを一緒に管理します。

・コンポーネントの命名規則

プロジェクト開始時にコンポーネントの命名規則を決めておくと、統一したルールで管理できるため、今後パーツの増加や新しい開発メンバーが参加したときにスムーズに対応できます。また、コンポーネントのバリエーション名（Figmaで言うと「バリアント」）も設定するとよいでしょう。認識の齟齬をなくし、開発の効率化にさらに貢献できるかと思います。

運用ルール

先述したデザイン原則では、ユーザーの理解が大切になるとお伝えしましたが、運用ルールの策定時でもデザインシステムを使うユーザー（例えばプロダクトの事業担当者やデザイナー、エンジニア）が使いやすいように設計する必要があります。ここではデータの管理ルールや運用体制、更新手順についてご紹介します。

・データの管理ルール

データ管理の仕方は大きく2つあります。1つは各コンポーネントをページごとに管理する方法で、対象パーツを簡単に見つけられるようになります。コードを管理するツール「Storybook」とも連携しやすいです。一方、全コンポーネントを1ページに集約して管理する方法もあり、全体の構成を俯瞰しやすくなるのが特徴です。

また、今後増えるパーツを考慮し、Figmaのページ内での使い方やパーツの配置（横並びか縦並びか）もあらかじめ決めておきます。

・運用体制

プロダクトの成長とともにデザインシステムをアップデートさせるためには、フェーズに合わせた体制を構築する必要があります。ここではデザインシステムの構築時と運用時の一般的な体制をご紹介します。

フェーズに合わせた体制

デザインシステム構築時は、ディレクターを中心に、運用、デザイン、開発の各チームが密に連携を取ることで精度を高めていきます。

運用を開始してからは、ディレクターと運用チームが中心となり、チーム全体でデザインシステムの改善や更新、新しいパーツの可否検討などに対応します。

・更新手順

デザインシステムは作って終わりではなく、プロダクトを使ってもらうことでブランドの一貫性や使いやすさが担保されます。複数のプロジェクトに紐づくデザインシステムであればあるほど、使う側と運用側とのコミュニケーションが大切です。

プロジェクトを円滑に進めるために、関係者からの質問や要望の受付方法、追加内容の採用基準（例えば新しいコンポーネントの採用基準）、リリース時の承認フローなどを運用開始前に整理し明確にします。

デザインシステム構築の進め方

初めてデザインシステムを導入する際の進め方を紹介しましたが、ゼロから開発する場合と、すでにプロダクトが成熟している場合とでは進め方が異なります。また、構築時の対応範囲（大きく始めるのか、小さく始めるのか）も事前に検討が必要です。

重要なのは組織やプロダクトに適した順番や規模で構築することです。これが、デザインシステムの強固な基盤をつくり、プロダクトの成長を実現する一番の近道になるはずです。

デザインシステム構築の進め方

現在、国内外のさまざまな企業がデザインシステムを公開しているので、進め方や考え方の参考にするのもよいかと思います。

最後に

プロダクトに関わる全員の満足度を高めるデザインシステム。組織やプロダクトに合わせて設計し、効率的な開発をするための土台として活用できます。

フェンリルでは、デザインシステムの構築はもちろん、運用や内製化など幅広くサポートしています。

デザインシステムの導入を検討されている方や、既存のデザインシステムを見直したい方など、ご相談内容に合わせた提案もしていますので気軽にお問い合わせください。

本記事の執筆者｜小室 千春
フェンリル株式会社 デザインセンター デザイン戦略部 部長 / ディレクター
ウェブ制作会社にて、企業サイトやECサイトのデザイン制作に従事。その後、フリーランスのデザイナーとしてクライアントとの折衝、ディレクション、デザイン、ECサイトの運営等に携わる。2016年にフェンリル株式会社に入社、アプリやWebのディレクター業務を担当。HCD-Net 認定人間中心設計スペシャリスト。