スタイルガイド

デザインシステムとスタイルガイドの違い

デザインシステムは、スタイリングの考え方を提供するデザイン言語と、情報の視覚表現とインタラクションを具現化するUIコンポーネント、それらをどう解釈してどう扱えばよいのかという規範をガイドラインで示した、デザインアセットのまとまりのことです。また、具体性のある企業型デザインシステムと、抽象度の高いプラットフォーム型デザインシステムのふたつに大別されるといえます。デジタル庁デザインシステムはプラットフォーム型デザインシステムであり、固有の組織に依拠したブランド概念やコミュニケーション方針を備えていません。企業型デザインシステムは、当該企業ないし企業グループが掲げるブランドやコミュニケーション方針に基づいたデザイン原則が規定され、その世界観におけるトーンアンドマナーの範疇でデザインアセットが構成されています。

プラットフォーム型デザインシステムは、プラットフォームとしてのデザインの考え方や枠組みにアクセシビリティを掛け合わせた「仕組み」であり、個々のサイトやサービスが掲げるブランドやコミュニケーション方針に基づいたデザイン原則を反映してスタイルガイドとして再定義することが必要となります。これにより、たとえばタイポグラフィや配色の展開システムやロゴの使用方法、余白や角の形状を定義するなどUIコンポーネントの表現を、導入するブランド世界観のトーンアンドマナーの範疇に収めることができるようになります。一方、企業型デザインシステムの場合は、基本的にそのままスタイルガイドとして使用することができます。しかしいずれの場合でも、個々のウェブサイトがそれぞれ固有の情報アーキテクチャをそなえるため、情報コンポーネントの構造やアウトプットとなるUIコンポーネントがデザインシステムのプリミティブな定義だけでは足りない場合があり、デザインシステムで提供される枠組みの中でスタイルガイドに独自の規定を追記して使用します。

スタイルガイドの作成方法

デジタル庁デザインシステムはプラットフォーム型デザインシステムであるため、個々のサイトやサービスで使用する場合はスタイルガイドを作成する必要があります。デジタル庁デザインシステムのFigmaデータをFigma Communityから取得したら、スタイルやコンポーネントの定義を複製し、必要な内容を追加・編集します。

たとえば、ロゴの使用方法やブランドカラーの定義、コミュニケーション指針のデザイン原則への落とし込みといった作業を最初に行い、その後、スタイル定義を更新し、最後に情報設計から導出された情報コンポーネント群に合わせてUIコンポーネントを再構成します。