デザインシステムという言葉は聞きなれない方も多いと思います。

「デザインガイドライン」「スタイルガイド」「ブランドガイド」など、似たような言葉が数多くあるので、この記事を読んで認識を整理しましょう。

まえがき

デジタルプロダクトのデザインに一貫性を持たせるために必要となる、ドキュメントや部品、ガイドライン、実践方法などを含む総称を「デザインシステム」と呼びます。

組織内で一貫したデザインを実現するには、どのようなルールでデザインが作られているのかを明確にすることが大切です。

このためにデザインガイドラインがあり、多くの場合は下記の3つで構成されています。

• デザイン原則

• スタイルガイド

• パターンライブラリ

デザインシステムは大規模なプロジェクトだけでなく、小規模なプロジェクトでも役立ちます。

デザインシステムとは

前述しましたが、デザインシステムとは「デジタルプロダクトで一貫性のある良いデザインを提供するための仕組み」です。

ビジュアルデザインやUIデザインを作る時、どの表現や体験が自社サービスにとって「正しい」「〜らしい」かを悩むことがあります。

それぞれが自由気ままにデザインしてしまうと、デザイナーによってトーンや体験の軸がブレてしまい、本当にユーザーへ届けたいコンテンツや体験が伝わりません。

サービスを作るのはデザイナーだけではありません。開発を行うエンジニア、コンテンツを作るチーム、ユーザーと接点のあるカスタマーサクセス、セールス、コーポレートと、多くの人がサービスをさせており、デザインはその全ての人の指針となるものです。

デザインシステムは、ただのスタイルガイドラインと混同されがちですが、会社として持つデザインフィロソフィーから、実際のコードとして実装されたUIコンポーネントまで、広い範囲を包括しているものです。

デザインシステムを導入するメリット

• ルール化されているとスピードが早く効率的に開発できる

• 複数サービスがあるときなどでも、ブランドに一貫性が持てる

デザインシステムは大きな概念で、その中に

①デザイン原則
②スタイルガイド
③コンポーネントライブラリ

を包括しています。

サービスを運営している大きな企業であれば、自社のデザインシステムを作っていることが多いです。

①デザイン原則

サービスをデザインするときに、どういったルールに基づくのか、フィロソフィーやポリシーを考えます。

企業のミッションやビジョンを基に考えることが基本です。デザインのマニフェストと読んでも良いでしょう。

プロジェクトメンバー間で優先順位が一致するように、デザイン原則を理解し、把握する必要があります。

②スタイルガイド

そのサービスらしいブランドカラー、フォント、写真のテイストなど、見た目に関わるスタイルデザインのガイドラインです。

③コンポーネントライブラリ

WebサイトやアプリケーションのUIを構成するボタンやフォーム、リスト、ダイアログなどのサービス共通で使用するパーツをまとめます。

デザインシステムの作成はとても時間がかかるので、年単位の時間をかけて、複数人のデザイナーやエンジニアでチームとして作成していきます。

すでにリリースされているサービスなどの既存機能の改修、あるいは追加機能の作成の場合、このデザインシステムを使ってUIデザインを行います。

しかし、新規事業やスタートアップなどで全く新しいサービスのデザインを考える際は、まず最初に最低限のデザイン原則やスタイルガイドなどを作成し、それからデザインに取り掛かります。

そうしないと、そのサービスらしさをデザインに反映できていなかったり、一貫性のないデザインになってしまう原因になるからです。

まとめ

デザインシステムは「デザイン原則」「スタイルガイド」「コンポーネントライブラリ」を包括するものであり、デザインの一貫性を保つための仕組みということをご紹介しました。

ユーザーに一貫した操作性・印象を提供するため、デザインシステムを積極的に活用しましょう！

参考文献