概要

定義

デザインシステムとは、企業のビジョンやブランドアイデンティティなどから「良いデザイン」を定義するデザイン原則などのドキュメント、それらを具体的にデザイン・実装するためのUIパターンやコンポーネントなどを備えた一連のリソースのことを指します。

目的

デザインシステムを作る目的としては、複数のデジタルプロダクト・サービスを展開する際にブランドの一貫性やデザイン品質を担保したり、運用を効率化させるという点が挙げられます。

構成要素

デザイン原則

プロダクトに関わるステークホルダーがプロダクトを作っていく上で大事にすることを言語化したものです。これがあることで、何を優先してデザインを作っていくのかという道標になります。

原則に基づいたルール(スタイルガイド)

デザイン原則に基づいて作られた、UIパターンやタイポグラフィ、カラースケールなどのガイドラインです。

原則に基づいたツール(コンポーネントライブラリ)

リストやボタンなど、再利用可能ですぐ使用できるコンポーネントをコードとセットで置いたライブラリです。エンジニアがコードを書く際にすぐに呼び出すことができます。

CSSフレームワーク

デザインカンプ

デザイントークン

事例

関連ツール

Figma

関連サービス

zeroheight

Frontify

Storybook


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2023-03-30 (木) 09:58:52 (386d)