デザインシステム

1 デザインシステムとは

デザインシステムとは、再利用可能なコンポーネントとガイドラインのライブラリで、社内の人々がインターフェースやインタラクションに組み合わせることができるものです。

デザインシステムに含まれるものとその実装方法は、デザイン業務の規模や成熟度、製品チームのニーズ、また企業によっても大きく異なります。

基本的には、デザインシステムは、一貫したスタイルとインタラクションのガイドラインをチームに提供します。

たとえば、デザインシステムには次のようなものがあります。

⚫︎入力ボックス、ドロップダウンリスト、メニュー構造など、インターフェイスで使用される標準的な要素

⚫︎ブランドカラーとフォントのリスト、それらをいつ使用するかのガイダンス。

⚫︎ボタンやその他のインタラクティブなアフォーダンス

⚫︎スライド式のサイドパネルを使うか、ピンチ操作による画像の拡大縮小をサポートするか、といったインタラクションのガイドライン

⚫︎カードやコンテンツセパレータのスタイルなど、画面が一貫してレイアウトされるような柔軟なグリッドシステム

⚫︎特定のオブジェクトの配置に関するルール - 例えば、ログイン/ログアウトやプロファイルのアイコンは常にデスクトップの右上隅に配置するなど。

⚫︎アイコンのリストとその意味

⚫︎コンテンツの使用方法と使用時期に関するガイドライン - 例えば、全てのメニュー項目を動詞と名詞のどちらにするか、会社がユーザーを一人称で呼ぶか二人称で呼ぶか、などを指定します。

⚫︎アイコンを使用するタイミング、テキストをラベルとして使用するタイミングなどのルール。

⚫︎コールToアクションボタンの配置に関するビジュアルガイドライン

⚫︎自動保存と明示的な保存/キャンセルボタンの使い分けのルール

デザインシステムには、上記の他にもさまざまなガイドラインがあります。

＊GoogleのMaterial Designは、多くの異なるタイプの要素を持ち、それぞれの要素をいつ、どのように使用するかについて多くのガイダンスがある、かなり一貫したデザインシステムの一例です。

デザインシステムについて知っておくべき最も重要なことは、最も効果的なデザインシステムは、製品や製品群のニーズの変化に応じて成長し続け、変化し続けるということです。

また、設計システムは、その使用が義務付けられている場合にのみ効果的です。

理想的には、デザインシステムのさまざまな要素は、開発者が機能をより速く構築したり、プロトタイプをより速く作成するためにインターフェースにドロップできるコードの断片であることです。

また、設計者が再利用できるプロトタイピングツールのデザイン要素である場合もあります。

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

(1)デザインプロセスのスピードアップ

デザインシステムを適切に導入することで、デザインプロセスを大幅にスピードアップすることができます。

(2)デザイン以外の重要な業務に集中できる

デザイナーをはじめとするプロダクトチームは、ビジュアルデザインよりも、新機能や新画面のフローやロジックに集中することができます。

(3)チーム全体で効率よく共有できる

デザインシステムによって、各画面の個々の要素を一から手作業でデザインする必要がなくなり、新しいインターフェイスの要素を思いついたときにも、それをデザインチーム全体で効率的に共有することができます。

(4)インターフェースの一貫性を高められる

デザインシステムをうまく活用することで、インターフェースの一貫性を高めることができます。

デザインシステムにつきましてのご相談はこちらよりお問い合わせください。