デザインシステムの必要性と作成する際の6つのポイント
こんにちは、UI/UXデザイナーの圓です。
突然ですがみなさんは、デザインガイドラインをご存知でしょうか？
デザインガイドラインとは、デザインシステムのことを指します。「デザインシステムとはなに？」「どう作成すれば良いの？」「どこまで作成すれば良いの？」など悩んでいる方も多いと思います。
今回は、開発メンバーや運用メンバーへ円滑にデザインを引き継ぐデザインシステムの必要性と作成の際に意識すべき6つのポイントついてお話ししたいと思います。
1.デザインシステムの必要性
デザインシステムを作成することでさまざまなメリットがあります。
スムーズなコミュニケーション：円滑性
複数人で構成されるプロジェクトにおいて、実装を担当するメンバーやローンチ後に更新作業を担当する運用メンバーへ円滑にデザインを引き継ぐ際に作成したデザインを迷わず、デザインを作成することができます。
品質が担保できる：一貫性
デザインシステムを作成することで一貫性のデザインが担保され、一貫性のあるユーザー体験を提供することができます。
作業スピードの向上：効率性
デザインにまつわるルールが定められていることでデザイナーの制作スピードの向上、デザインパーツの流用によりエンジニアが効率的に作業を行うことができます。
また、デザインシステムは基本的なVI（ビジュアルアイデンティティ）を定義した後に構築することをお勧めします。
デザインシステムとブランドガイドラインの違いについて
デザインシステム
制作したプロダクトデザインのスタイルガイド（例：色、フォント、余白、アニメーション）、コンポーネント（例：ボタン、ナビゲーション、リスト）とこれらを実装するためのコード、この2つの上位概念にあたるブランドの方針（ブランドアイデンティティ）やトーン＆マナーなどで構成された包括的なガイドラインです。
ブランドガイドライン
ブランドの運営に必要なありとあらゆるルールをまとめたガイドラインです。一般的には、ブランドロゴや、社名ロゴ、ブランドカラー、ブランドフォントなど、ブランドのデザイン表現に関する要素についてのルールをまとめられています。企業理念や提供価値、トーン＆マナーや写真・イラスト表現など、理念や価値に関する情報やビジュアルの使い方や注意点も細かく指定されているのが特徴です。
この2つの違いをまとめると以下のとおりです。
デザインシステムはプロダクトデザインを作るときにコンセプトからコンポーネントパーツまで幅広く定義されたものです。
対して、ブランドガイドラインは、デザインシステムよりも少し粒度が細かく、上の図でいうところのBI（ブランドアイデンティティ）からVI（ビジュアルイデンティティ）が定義されたガイドラインです。そのため、デザインシステムはブランドガイドラインの延長線と言えます。
デザインシステムはブランディングに大きな影響を与える
ブランドを正しく受け手に認識してもらうためには、一貫性や統一感が必要となります。具体的には、素材の扱い方や言葉の選び方などにもルールを定める必要があります。これらはブランディングにおいては、CI（コーポレートアイデンティティ）策定に該当する作業です。
要するにデザインシステムを作ることは、ブランディングにおけるCI策定と同等なのです。
一方、 ブランドはデザイナーだけが構築するものではないと私は考えます。ディレクターやUXデザイナーが考案したプロダクトやサービス（以下プロダクトで簡略）をユーザーに愛用されることもブランド作りだと言えます。
SmartHRやFigmaなどがそうだと思います。ブランドや理念などがプロダクトというカタチでユーザーとコミュニケーションをとっています。ユーザーが日々そのプロダクトを利用することでブランドの理念や提供価値などを深まっていきます。プロダクトの使いやすさやブランドの理念がユーザーのエンゲージメントを得られると私は思います。
ブランドの価値やユーザーのエンゲージメントは日々の積み重ねが重要です。立ち上げ当初はうまくいっても、数年後に当初提供できていた価値や使い心地が損なわれてはユーザー離れを引き起こしてしまいます。
それを防ぐためにもデザインシステムをしっかり作る必要があります。色、フォント、余白、配置、それらのルールが踏襲されたボタンなどのコンポーネント、それらの発端となったコンセプトを一貫して踏襲し続けることはブランディングに大きく貢献し、ユーザーとのエンゲージメントを築くと私は考えます。
2.デザインシステムを作成する際に意識すべき6つのポイント
これまでデザインシステムの必要性について語ってきました。ここからは、そのような重要な役割を担うデザインシステムを作成する際の6つのポイントをご紹介いたします。
1.シンプル
明確なコンセプトを持ち、デザインをシンプルにし、ユーザーの負担を最小限に抑えましょう。
2.一貫性を保つ
プロダクトコンセプトのイメージに沿ったデザインを作成し、ページ全体で統一します。またレイアウト、言語、アニメーション（インタラクション）なども一貫性を持たせましょう。
3.フィードバックを提供する
ユーザーがアクションを実行したとき、フィードバックを提供してみましょう。
4.強弱をつける
テキスト、アイコンなどの要素などの情報にの優先順位で強弱をつけましょう。
5.状況に応じたヘルプを提供する
ユーザーが複雑なタスクを実行する際にヘルプを提供しましょう。
6.繰り返してテストする
繰り返しテストすることはすごく重要なことです。ユーザーにもらったフィードバックを時間をかけて改善していきましょう。
3.まとめ
最初からデザインシステムを作るのはなかなかハードルが高いかもしれません。先ほど、申したようにデザインシステムはブランディングだと思って、デザインを構成する各項目のスタイルを明確にしましょう。そして、先ほど紹介した6つのポイントでデザインシステムを作成しましょう！
また、他の良い事例も載せますので、ぜひご参考ください。
この記事が気に入ったらサポートをしてみませんか？