使い方
デジタル庁デザインシステムを効果的に使用する方法をご紹介します。
ロールに応じた使い方
デザイナー向け
デザインシステムには基本的なスタイリングの定義や情報コンポーネントを視覚的あるいはインタラクションデザイン的に具現化したUIコンポーネント等が含まれるため、さまざまなサービスやシステムの開発を効率的に進めることができますが、デザインシステムを利用してもデザイン作業が不要になるわけではありません。デザインシステムで定義されたガイドラインをデザイナーが理解してデザイン作業を実施することで、個々のサービスごとのスタイリングやデザイン設計において一貫性をもたらし、効率的に品質を向上させたりアクセシビリティを確保できるようになります。
本ウェブサイトで提供している基本デザインやコンポーネント等の使い方をまとめたデザインガイドラインおよびアクセシビリティガイドラインをもとに、デジタル庁デザインシステムのFigmaデータを利用してデザイン作業に役立てることができます。最新のFigmaデータはFigma Communityで提供しています。
デザインシステム使用の要点
デザイナーがデジタル庁デザインシステムを使用する場合、以下の点を踏まえる必要があります。
-
デザインシステムのガイドラインを理解する
デザインシステムには基本デザインやコンポーネントを使用してUIを設計するための重要な仕様や規範的なルール、そしてアクセシビリティのガイドラインが含まれています。なかでもアクセシビリティに関する記述はウェブ開発において必要不可欠な最優先事項となるため、特に注意して取り扱ってください。 -
デザインシステムのアセットを活用する
デザインシステムのガイドラインを理解したうえで、提供するデザインアセット（基本デザインやコンポーネントのFigmaデータ、コードスニペット等）を使用します。デザインアセットの提供により、デザイン作業をゼロから始める必要はなくなり、デザイン設計、ワイヤーフレーム、プロトタイピング、ユーザビリティ設計などの各設計・開発を効率的に実施することができます。 -
スタイルガイドを作る
デザインシステムで提供されている基本デザインおよびコンポーネント等のアセットは、デザインの骨組みを作るプリミティブなパーツのまとまりです。デジタル庁デザインシステムという枠組みを活用して、個々のサービスごとで必要なアセットとして再定義しスタイルガイドに落とし込みます。ブランドやコミュニケーションの方針等に合わせてカスタマイズすることで、サービスごとに自由なデザインが可能となります。
フロントエンドエンジニア向け
デジタル庁デザインシステムがもたらす一貫性は、フロントエンドエンジニアにも効率的な開発プロセスを提供します。デザインシステムで標準化されたコンポーネントを再利用することで効率的な開発を可能とするだけではなく、サービスの拡張や運用に対しても、一貫性を維持した持続的な開発が可能となります。
本デザインシステムではReactやCSS等によるコードスニペットをGitHub上にて公開しています。
プランナーやインフォメーションアーキテクト向け
デジタル庁デザインシステムは、情報のふるまいを情報コンポーネントとして定義し、そして視覚的あるいはインタラクションデザイン的に具現化したUIコンポーネントとして提供しています。これにより情報設計からワイヤーフレーム設計までの各プロセスにおいて、デザインアウトプットをともなっての設計作業が可能となります。これはサイトマップの段階からユースケース別のシナリオ検証やユーザビリティテストの試行ができるというだけでなく、情報構造におけるUIモデリングから文書構造におけるテンプレート設計までを一貫した情報粒度で実施できることを意味しています。UI設計のレイヤーにおけるクラスや業務フローの可視化は、DB設計としてのデータモデリングと必ずしも一致するわけではありませんが、デザインシステムの定義はUIデザインとDBデザインをつなぐ合意形成の土壌として機能します。
運用責任者あるいは組織内の全関係者向け
公共デザインにおけるウェブ開発は、「誰一人取り残されない」ために、高いアクセシビリティの確保が求められます。ウェブサイトのデザインや機能、掲載するコンテンツにおいてアクセシビリティを確保するほか、アクセシビリティを踏まえた運用設計が必要となりますが、デジタル庁デザインシステムをウェブ開発に利用することで、アクセシビリティ確保の下地を獲得することができます。
デジタル庁デザインシステムはアクセシビリティの確保だけにとどまらず、一貫性のあるデザインや学習コストをおさえた効率的なユースケースの開発等を実現し、満足度の高いユーザー体験の実現に寄与します。管理者あるいは組織内の全関係者が、デジタル庁デザインシステムが何であるかを正しく理解しておくことは、組織内外における各種の意思決定を迅速にし、スムーズな合意形成を促すためにも大切です。