皆さま、こんにちは。Ｓｋｙ株式会社IT統括本部Ｓｋｙスタイル部のデザインチームです。私たちはデザインシステムの構築・運用に関する業務を行っています。今回は、デザインシステムの裏で定義しているガイドラインについてご紹介します。
前回の記事もぜひご覧ください！
デザインシステムの要素
デザインチームで運用しているデザインシステムは、以下の3つの要素で構成されています。
①デザイン原則
方針を決めるための原則です。企業理念やブランドのイメージからデザインシステムがどうあるべきかを起こしたもので、後述の要素を構築するために必要な考え方になります。
②スタイル
作成するデザインに一貫性を持たせるために定義され、基本的にデザイナーが活用しています。デザイン作成時には多くのデザイナーが関わっているため、デザインに関する方針やガイドラインをスタイルとして定義しておくことで、システムの操作に一貫性を持たせることができます。
作成要素
- タイポグラフィ
- カラー
- 余白
- 角丸
- レイアウト
- シャドウ
- ライティング
- デザインパターン
③コンポーネント
スタイルから作成されたUIコンポーネントは、Storybookで挙動を確認できるようにしており、実装するためにライブラリとしてまとめています。
基本的に開発者はこのコンポーネントを見て実装しています。
作成要素
- ボタン
- フォーム
- グローバルナビゲーション
- モーダル など
実はこんなことも定義しています
3つの要素の中には多くのデザインに関するルールが定義されています。そのなかでも開発者にはあまり知られていないルールをいくつかご紹介します。
ボタンの配置順
ボタンを並べたときのルールを定義しています。ボタンは複数のデザインを用意し、それぞれ優先順位をつけることで画面内の情報整理を行っています。
ボタンをそれぞれ並べる際も明確なルールを作っています。
コンポーネントの使い分け
デザインが似ていたり使い方に悩むことの多いコンポーネントは、使い分けしやすくするために定義しています。
システム内で使う用語
システム間での言葉の意味合いや使用する用語がブレないように定義しています。
色の意味合い
デザイン全体のイメージにずれが発生しないよう、デザインシステムで使用する色にも意味合いを持たせています。
最後に
システム全体の一貫性を保つために、デザインシステムは多くの定義で構成されています。
デザイナー一人ひとりの認識が異なっていると、システムの一貫性が取れずユーザー体験を損なってしまうことにつながります。
これからもよりユーザーが使いやすいシステムを目指し、デザインシステムを運用してまいります。