背景
「見える化エンジン」は自社の主力製品として長年運用されてきた一方で、UIは時代にそぐわない印象を与えており、また、明確なデザインルールやスタイルガイドも存在しませんでした。
そのため、「見える化エンジン」の大規模に刷新されるのに伴い、デザインシステムの構築は非常に重要な課題となりました。
私の役割
2022年8月から2023年12月にかけて、プロダクトのUI/UX刷新とデザインシステム構築をゼロから担当しました。 効率と実用性を重視し、プロダクト画面のデザインに着手するとともに、並行してデザインシステムのルール策定を進めていきました。
目標
UIの一貫性を実現し、デザインと開発効率の向上、将来的なプロダクトの拡張性を確保し、そしてブラント認知度の向上を目指し、包括的なデザインシステムを構築しました。
このデザインシステムは、以下の主要な原則に基づいています。
会社のブランドイメージを強化するため、他プロダクトのデザインシステムとの整合性を意識した設計を行いました。
デザインの一貫性向上
1
さまざまな画面サイズや利用シーンに対応できるよう、各コンポーネントにはカスタマイズ性を持たせています。
柔軟性
2
WCAGのガイドラインに準拠し、文字と背景色が、十分なコントラスト比を担保できているか確認しています。
アクセシビリティ
3
UIデザインは直感的で分かりやすく、ユーザーが効率的にタスクを完了できるように設計します。
明確性と効率性
4
これらの原則はすべてのコンポーネントとルールに反映されており、見た目だけではなく、使いやすさも大切にしたデザインの構築を目指しました。
制作プロセス
デザインシステムはゼロから構築したため、まず基盤をしっかり固めることを重視しました。詳細なルールを策定することで、システムを円滑に運用でき、デザイナーや開発者が活用できる詳細なガイドラインを提供しました。
また、各コンポーネントは仕様が異なるため、必要に応じて個別のルールを追加・調整しました。ただし、ガイドラインの根本的なルールは一貫しており、各コンポーネントをデザインする際には、サイズ、角丸、余白、間隔など、細かい部分までルールを策定しました。
デザインシステムの構築は、以下の２つのプロセスから着手しました。
① スタイルの策定
ブランドの一貫性を高めるために、ロゴカラーを基にメインカラーを設定し、フォントや文字サイズを含めた基本的なスタイルガイドラインを確立しました。
② ガイドラインの策定
各コンポーネントの様式、種類、サイズ、使用例など、詳細なルールを制作しました。
対象コンポーネント
ボタン（アイコンボタン・テキストボタン・タブボタン）、チェックボックス、ラジオボタン、検索ボックス、ドロップダウン、テキストボックス、オプションリスト、ページャー、ダイアログ、テーブル、ツールチップなど、全てのUIコンポーネントについて、詳細なデザインルールと使用ガイドを策定しました。
以下では、スタイルルールと代表的なコンポーネントであるボタンとテキストボックスを例に、詳細なルールを説明します。
スタイルには次のものが含まれます。
プライマリーカラーは、見える化エンジンのロゴのカラーを使用し、ブランドの一貫性を強調。
セカンダリーカラーは、他の要素と明確に区別するために独立して設定。
3. 用途に応じた多彩なカラーロール（例：警告色、情報色など）を整備。
Primary
Default
Hover
Disable
Secondary
Default
Hover
Disable
Caution
Default
Hover
Disable
Border
Default
Border
Default / Bold
Border
Default / Light
Fill/Icon
Default
Fill
Default
Hover
Text
Default
Primary
Secondary Text
Secondary
Supporting Text
Disable
① ボタン
ボタンを作成するにあたり、以下の３つのポインに特に力を入れました。
1.アクセシビリティの確保
カラーコンビネーションがWCAG 2.1 AAレベルの基準を満たすことを確認しました。これにより、誰でもアクセスしやすいデザインシステムになります。
2.ボタンとアイコンのルール設定
システムのボタンは種類が多く、特にアイコンを含む場合のガイドラインを詳細に設定しました。
・アイコンのサイズ: アイコン自体のサイズ、そしてアイコンを囲むボックスのサイズまで細かく 規定しました。
・視覚的な統一: アイコンは形状によって（正方形、長方形、特殊な形）、同じサイズでも視覚的な大きさが異なって見えます。例えば、高さが14pxでも、長方形や特殊な形のアイコンは標準の14px*14pxより大きく見えたり小さく見えたりします。
・調整ルール: この問題を解決するため、ボタン内のアイコンは±2pxまでサイズを調整可能とし、見た目の大きさを揃えるようにしました。
3.コンポーネント間の余白ルール
このシステムでは、同じ階層のボタンと他のコンポーネントの並び方が複雑になることがあります。画面がごちゃごちゃしないよう、ボタンと他コンポーネントを組み合わせて使う場合の間隔や余白を細かく決めました。間隔や余白は基本的に8の倍数を基本ルールとしています。
ボタンには次のものが含まれます。
デザインルール：様式、種類、状態（デフォルト、ホバー、アクティブ、非活性）、サイズ、色ごとのデザインを詳細に定義していました。
使用例：ボタンのサイズに応じた組み合わせと配置ルールを提示しました。
基本情報
様式
ボタンは、色によって「Primary Button」「icon Button」「Outline Button」の３種類に分類されます。
Primary button
重要度が高いアクション、強調したいアクションに使用。
Caution button
削除やキャンセルのアクションに使用。
Outline button
重要度の低いアクションに使用。
種類
ボタンは、「Text+Icon Button」「Text Button」「Icon Button」の３種類に分類されます。
テキスト+アイコン
主要アクションに使用。
テキストのみ
補助的な操作向け。
アイコンのみ
省スペースや直感的操作向け。
サイズと状態
ボタンには５つの種類があります。
1
テキスト + アイコン（Large Size）
2
テキスト （Large Size）
3
テキスト （Small Size）
4
アイコン （Large Size）
5
アイコン （Small Size）
ボタンには３つの状態があります。
A
デフォルト
B
ホバー
C
非活性
サイズルール
Large Size
アイコン：横幅約14px（＋2）
アイコン枠線：26×26px
テキスト：14px
テキスト+アイコン
※ボードサイズ超えなければ、アイコンの形に応じて適切に調整可能。ボードの中のアイコンは、垂直でも水平でもボードに対する中央揃え。
アイコン：横幅約14px（＋2）
アイコン枠線：26×26px
アイコンのみ
※ボードサイズ超えなければ、アイコンの形に応じて適切に調整可能。ボードの中のアイコンは、垂直でも水平でもボードに対する中央揃え。
テキスト：14px
テキストのみ
Small Size
テキスト：12px
テキストのみ
アイコン：横幅約12px（＋2）
アイコン枠線：20×20px
アイコンのみ
※ボードサイズ超えなければ、アイコンの形に応じて適切に調整可能。ボードの中のアイコンは、垂直でも水平でもボードに対する中央揃え。
使用例(間隔・余白)
Large Size
ボタンの場合
アイコンボタンの場合
セットの場合
Small Size
アイコンボタンの場合
Group
縦幅34pxボード内で置く場合
② テキストボックス
システムのテキストボックスは、使用状況に応じて4つの種類に分けています。
まず、「見出し」の部分では、カラーコンビネーションがWCAG 2.1 AAレベルの基準を満たすことを確認しました。
共通の入力欄に加え、「見出し」の有無によってデザインルールを細分化しました。見出しがある場合は、入力フィールドとの間隔や、見出し自体の余白ルールを詳細に規定しています。
入力欄のサイズは、画面によって異なるため可変としています。もちろん、サイズ変更のルールは8の倍数を基準としています。
テキストボックスには次のものが含まれます。
デザインルール：様式、種類、状態（デフォルト、ホバー、アクティブ、非活性）、サイズのデザインを詳細に定義していました。
使用例：ボタンと他のコンポーネントと組み合わせや、用途に応じた使い分けを提示。
基本情報
種類
テキストボックスは、「テキストボックスのみ（Large）」「テキストボックスのみ（Small）」「見出し（枠なし）+テキストボックス」「見出し（枠あり）+テキストボックス」の4種類に分類されます。
テキストボックスのみ（Large）
テキストボックスのみ（Small）
見出し（枠なし）+テキストボックス
見出し（枠あり）+テキストボックス
状態
ボタンには４つの状態があります。
A
デフォルト
B
ホバー
C
入力済み
D
非活性
サイズルール
テキスト：14px
テキストボックスのみ（Large）
※フォントは中央揃え(垂直方向)
テキスト：14px
テキストボックスのみ（Small）
※フォントは中央揃え(垂直方向)
テキスト：14px
見出し（枠なし）+テキストボックス
※フォントは中央揃え(垂直方向)
テキスト：14px
見出し（枠あり）+テキストボックス
※フォントは中央揃え(垂直方向)
縦幅は固定34pxで、横幅は下記6つサイズを基本サイズとするが状況によって可変。横幅を変える場合はなるべく8pxの倍数です。
80px
120px
160px
240px
320px
400px
縦幅は固定34pxで、横幅は下記6つサイズを基本サイズとするが状況によって可変。横幅を変える場合はなるべく8pxの倍数です。
64px
80px
120px
使用例(間隔・余白)
テキストボックス＋ボタン
テキストボックス＋他のコンポーネント
※整列：一番長いテキストに合わせる
導入後の成果
デザインシステムを立ち上げた後、以下のような大きな成果を収めています。
デザインの一貫性向上
デザイナーとエンジニア間の連携が円滑になり、開発効率と品質が改善されました。
チーム間の連携と効率の向上
マルチブランドに跨る再利用性の確立
明確なガイドラインにより、新規メンバーがデザイン/開発プロセスにスムーズに参加できるようになりました。
オンボーディングの効率化
今後の展望・継続的な運用
デザインシステムは「生きたシステム」であるため、常に進化し続けるものです。
現在は、見える化エンジンのver.2をFigma上で全コンポーネント化しました。
今後も機能拡張に合わせてブラッシュアップを行い、Design Tokenを活用しながら、デザイナーだけでなく、開発者にとって使いやすい環境を継続的に整備していきます。
@SHU GYOSEN Portfolio2025
xqianzhou88@gmail.com