デザインシステム構築

課題・目的

課題
・具体的なデザインルールは言語化されていなく、大規模組織においてアウトプット品質を担保しにくい
・コンポーネントデータは優れていなく作業効率が悪い
・開発連携はできていなくコミュニケーションコストが高い
目的
デザインシステムを完成することでアウトプット品質と業務効率(デザイン開発両方)を向上させる。

作業内容

・デザインルール定義
・コンポーネントブラッシュアップ
・Figma Tokens導入、開発連携

デザインルール定義

以下にあるプロダクトにおける広義ルールを定義する。
・レイアウト原則
・スペーシングルール
・要素同士の間隔定義
・スクロール原則
・ローディング原則
・新規作成・編集・削除の仕様
・一覧と詳細の関係性
・Divider仕様
・行揃えルール
・書式ルール
・フィードバック原則と仕様
・可逆性と破壊的な操作の仕様
・Emptyの表示ルール
・ボタンの配置ルール
・モーダル、ドロワー、パンくずリストの使い分け
・ナビゲーションの原則と規定
・初期値原則
・権限による表示

デザインルール定義_論理的分析

一般的な法則に基づき、業務フローを考慮し、プロダクトにおける最適なデザインルールを導く。
例:ボタンの配置ルールを定義する。

デザインルール定義_判断ロジックの可視化

判断しにくいデザインパターンにおいては判断ロジックを可視化することで速やかに判断できるようにする。
例:モーダル、ドロワー、パンくずリストの使い分け。

デザインルール定義_ルール探しの効率化

各デザインルールをカテゴライズして、該当カードをクリックすれば詳細説明に飛べる。

コンポーネントブラッシュアップ

・variantとpropertyの見直し
・やる/やらないを明文化

Figma Tokens導入、開発連携

開発との共通認識及び連携効率課題を解消するため、Figma Tokens導入、開発チームと連携し、開発効率を向上させた。

 

以上はデザインシステム構築の紹介でした。ご覧いただきありがとうございます。

Back to projects