目次
事業会社のビジネスモデルはITが中心になっていく中で、そのビジネスの根幹を担うのがデジタルプロダクトです。近年、デジタルプロダクトを支える考え方のひとつとして、デザインシステムが注目されています。
しかし、「デザインシステムとは何か？」「どの様な活用メリットがあるのか？」「デザインガイドラインとは何か？」と疑問に思う方も多いでしょう。
そこで今回はデザインシステムとは何か、デザインシステムを構成する要素や、デザインシステムのメリットを紹介します。この仕組みを理解することで、ディレクター、UIデザイナー、UXデザイナー、Webデザイナー、エンジニアそれぞれにとって質が高く、効率的なプロジェクト進行が可能になります。
デザインシステムとは効率的な制作・運用を支える仕組み
デザインシステムとはデザインにおけるルールを定めたり、実装する際のツールがまとめられたりしているものです。
デザインシステムでは「良いデザイン」をあらかじめ定義し、その実行をサポートするツールがセットになっています。そのため、デジタルプロダクトを効率的に制作・運用できるのです。
特に、次の様なデジタルプロダクトでデザインシステムは大いに役立つでしょう。
- 中〜大規模のシステム開発が行われている
- サービスの機能やデザインに変更が多い
- 運用期間が長い
- 多くの制作メンバーが関わっている
デザインシステムとデザインガイドラインの違いは？
以前は、CI (コーポレート・アイデンティティ)、VI (ビジュアル・アイデンティティ) といった中核のデザインが作成された後のデザイン上の指針についての資料が「デザインガイドライン」と呼ばれることが多かったです。
しかし、グラフィックデザインや広告など固定のデザインでなく、デジタル上のアプリケーションやサービスサイト、業務システムなど動的なデザインが増えていくにつれて、指針の資料はより拡張性や汎用性があり、デジタルを意識した内容へと広がっていきました。
一般的に良く混同されがちな、デザインシステムとデザインガイドラインの違いですが、デザインガイドラインはデザインシステムの一部と捉えられるでしょう。次のセクションで詳細を解説していますが、従来はデザインガイドラインで十分であったデザイン上のルールが、デジタル化によってより広い枠組みが必要になりました。
デザインシステムを構成する4つの要素
そのためデザイン上の指針としてより上位の概念が必要となり、それを表すものとなったのが「デザインシステム」です。
デザインシステムを構成する要素は、次の4つです。
- デザインプリンシプル
- デザインガイドライン
- デザイントークン
- UIコンポーネント
それぞれ詳しく見ていきましょう。
デザインプリンシプル
デザインプリンシプルとは、デザインの基本的な指針（ルール）を定めたものです。場合によっては「デザイン原則」と呼ばれることもあります。デザインシステムをどういったものにしたいか、すべきかについての考え方が表されているものです。制作を進める上でその都度立ち返り、方向性や採用するアイデアの判断基準にもなります。
具体的には、ブランドアイデンティティといったデザイン原則についてドキュメント化します。とはいえ、必ずしも一から作り上げる必要はなく、初期段階に定義した要件などを踏まえると作成しやすいでしょう。
デザインガイドライン
デザインガイドラインとは、デザインの基本的な要素について定めるものです。デザインプリンシプルにのっとり、次の様な要素について定義します。
- 配置
- 配色
- サイズ
- トンマナ（トーン＆マナー）
- インタラクション など
デザイントークン
デザイントークンとは、複数のプラットフォームや画面に同様のスタイルを適用するために、次の様なスタイル要素を定めたものです。
- タイポグラフィ
- 要素感の余白
- アイコン・ピクトグラム
- アニメーション など
デザイントークンを共有することで、フロントエンドの実装や変更も進めやすくなります。
UIコンポーネント
UIコンポーネントとは、画面内に表示されるデザインとその実装コードを定めたものです。具体的には、次の様な要素が挙げられます。
- ボタン
- テキストリンク
- リスト
- ナビゲーション
- アコーディオン など
UIコンポーネントを定めておくとより効率的にフロントエンドの実装ができ、品質の大幅アップも期待できます。また、他のデジタルプロダクトでも再利用できるため、複数のプロジェクトで効果を発揮してくれるでしょう。
数百ページや数千ページといった大規模なプロジェクトを進めるうえでは、このUIコンポートが欠かせません。実際のプロジェクトでは、
- まずどういったコンポーネントが必要かの洗い出し (この際にはややコンポーネントは多めに見積ります)
- 1 で洗い出したコンポーネントの中で、意味としてマージできるものがないかの確認
- 複数のコンポーネントを組み合わせた、大コンポーネントがあるべきかの確認
- 各ページをUIコンポーネントで作成、また進行途中で新たなUIコンポーネントを作成してライブラリに追加
という手順で進めることが多いです。
中〜大規模のシステム開発をUXやUIの面で優れたものにするためには、必要最低限で十分な量のUIコンポーネントを揃えることが重要です。
デザインシステムのメリットや必要性
デザインシステムを意識したデザイン手法のメリットや必要性は、次の3つです。
- デザインの一貫性が保たれる
- 共通認識を持って制作に取り組める
- 制作スピードが上がる
それぞれ詳しく見ていきましょう。
デザインの一貫性が保たれる
良いデザインのひとつとして挙げられるのが、「ユーザー体験の一貫性」です。
デザインシステムではあらかじめデザイン原則などを定めているため、製作途中のゆらぎを防止します。そのため、「同じサービスや機能なのに見た目が違う」といった事態を回避できるのです。
デザインから感じ取られる印象や体験を統一できるため、結果的にデジタルプロダクトにおける品質も向上します。
共通認識を持って制作に取り組める
デジタルプロダクトでは、次の様なさまざまな職種・立場のメンバーが関わります。
- Webデザイナー
- エンジニア
- Webディレクター
- Webプロデューサー
- クライアント など
オリジナリティや重視する点は、メンバーによって違うことが多いでしょう。しかし、それらすべてを優先していては、先ほど紹介したデザインの一貫性は保たれません。
そこで活用できるのが、デザインシステムです。あらかじめルールを定めることで、共通認識を持って制作に取り組めます。
制作スピードが上がる
デザインシステムを活用すると、デジタルプロダクトに関わる意志決定は定めたルールに沿って行われます。
その分、検討から判断までのタイムラグが少なくなり、品質を保ちながら制作全体のスピードを上げることが可能です。メンバー間の意見交換時もデザインシステムで定めたルールにのっとるため、より建設的かつスムーズに行えるでしょう。
デザインシステムとはデジタルプロダクト制作の要！
デザインシステムとは、デジタルプロダクトを効率的に制作・運用する上で役立つ仕組みです。デザインのルールをあらかじめ定めておくことで、あらゆる意志決定や実装がスムーズに進みます。
また、デジタルプロダクトにおけるデザインに一貫性が生まれ、質の高いユーザー体験の提供も可能です。一度作成したコンポーネントは再利用でき、複数のプロダクトでも大いに役立つでしょう。
デジタルプロダクトの制作における効率や品質を上げたいディレクター、UIデザイナー、Webデザイナー、エンジニアは、デザインシステムを積極的に導入してみてください。
