デジタルプロダクトデザイン
デザイン原則の定義、スタイルガイド作成、UIデザインの最適化、UIコンポーネント設計からフロントエンド開発まで、デザインシステム構築の総合支援
デザインシステムとは、デジタルプロダクトの一貫した体験をデザインするためのルールや、運用効率化などを目的としたパターン、実現のための一連のリソースなどを総合したものを指します。標準的な定義は難しいですが、大きくは組織におけるデザインの標準やプロセスを改善する取り組みと言えます。基本的にはデザイン原則などのルールをまとめたガイドラインと、UIデザインの一貫性を保つためのコンポーネントライブラリなどが含まれています。
これまでの私たちの知見を活かし、デザインシステム構築のサポートを提供します。お客さまのチームが自立的にデザインシステムを維持・発展させる能力を獲得できるよう内製化支援も可能です。これにより、長期的かつ持続可能なデザイン品質の向上と開発効率の最適化を実現します。
一貫性のあるユーザー体験を実現するためのデザインシステムは、以下の要素から構成されています。
プロダクトの核となる「らしさ」や「重要なことはなにか？」を定義・明文化したもの
デザインシステムのルールを記載したもの。レイアウトのルールや、コンポーネントの使用方法など
デザインパターンをコンポーネント化したFigmaのAssetsや、それと同期するReactライブラリなど
デザインシステムを運用していく上で必要なデザインファイルやドキュメントなど
VUCAと言われる社会の中では、変化に素早く対応するスピード、すなわち、利用者により良い体験を素早く提供することが重要です。現在のデジタルプロダクトの世界では、全く新しい物を生み出すよりも、既にあるものを上手く活用して最適化を繰り返すことが重要といえます。
そうした状況の中で企業は、複数のプロダクト・複数の部署・複数のデザイナーが一貫性のあるUIデザインを素早く的確に適用しなければなりません。この課題を解決するために、デザインシステムの導入が求められています。デザインシステムを導入することで、企業はUIデザインの内製化を進めることができ、一貫性のあるデザインを迅速に展開することが可能になります。
デザインシステムによって内製化が進むと、複数のプロダクトや部署でのコラボレーションが容易になり、全体としてのデザイン品質が向上します。このように、デザインシステムはUIデザインの内製化支援を強力にサポートし、企業が変化に迅速に対応するための重要な手段となります。
度重なる機能追加・改修で、UIデザインの一貫性が失われている。例えば、似たようなボタンがたくさん存在している。
画面遷移、レイアウト、UI部品のデザインや挙動などを整理・パターン化しアプリに反映させることで、操作性や見た目が一貫したものになり統一感のあるUXが実現できます。
メインのデザイナーが変わったり、サービスごとに異なるトンマナが適用されていて、複数プロダクトの関連性が希薄。
i3DESIGNのデザインシステム制作はプロダクトにおけるブランドのあり方から定義します。はじめにきちんと言語化し、ブランドにしっかりと結びついたビジュアル表現を再定義することで、ブレのない一貫したUIデザインでプロダクトのブランド力を高めることができます。
サービスやプロダクトに変更や改修作業が発生した際に、デザインと実装作業に時間と手間がかかりすぎ困っている。
デザイン原則をもとに、デザインガイドラインを定めます。ガイドラインに沿ったデザインパターンをコンポーネント化することで、一度デザイン・実装したものは再利用できる形になり、運用での作業工数を大きく減らすことができます。
現行プロダクトやガイドライン、業務フローを理解し、初期に必要なデザインシステムの要件を定義します
調査・ヒアリングでは、関係者へのヒアリングや業務フローの把握を進めます。併せて、現行のプロダクトやブランド資産について理解を深め、コンポーネントの棚卸しを行います。
デザインシステム要件定義では、関係者へのヒアリングを元に、現行プロダクトや業務フローへの理解を深めます。それらの情報を基に本デザインシステムで定義する要件範囲を検討します。
プロダクトやブランドの方向性を支える基本的なルールや理念を策定します
ブランド・プロダクトの特性を分析し、ふさわしいブランド人格を検討します。ブランドアーキタイプ分析の手法を用いることで、感覚的になりがちな検討をより論理的に進め、大幅なすれ違いを防ぐことができます。
アピアランス憲章では、デザインシステムを現場に浸透させ、効果を発揮させるべく、実際にプロダクトを利用する方を対象に調査を実施します。制作前/中にヒアリングを行い、意見を取り入れることで、デザインシステムとして適切な方針を見定めます。
プロダクト全体で一貫性と拡張性を両立するため、設計ルールを体系化します
トークン設計は、色、余白、フォントなどの基本要素を体系化し、一貫性を保ちながら効率的なデザイン運用を実現します。デザインとエンジニアリングの共通言語としても機能し、変更の影響を可視化してスムーズな開発を支援します。
設計・実装の効率化と品質向上を目指し、デザインに必要なルールを整理します。用語やアクセシビリティ、モーションなどに関するルールを整理し、全体の統一感を実現します。
デザイン基盤を元に、Variablesを適用したFigmaコンポーネントを作成します
Variablesをコンポーネントに適用し、状態ごとのバリアンツ作成、テーマ切り替えの検証などを行います。
加えてFigmaデザインデータを開発とスムーズに連携させるため、Figma CSS PluginやCodeConnectなどのツール活用を前提にコンポーネントを設計・構築します。デザインとコードのギャップを最小限に抑え、開発プロセスの効率化を目指し、実装したUIコンポーネントが意図したものになっているかをUIベースで確認をし、フィードバックをします。
FigmaデザインをReactコンポーネントライブラリで表現します。プラグインや連携ツールを積極的に活用することで効率よく高品質な開発ワークフローの実現を目指します
開発ツール利用例
開発技術：Node.js, React, TypeScript, shadcn/ui(Radix), React Aria
UIレビュー／テスト：Storybook, Chromatic
その他： GitHub, GitHub Actions, VS Code, Figma for VS Code, Figma Code Connect など
コンポーネントやパターンの用途やデザインルールをまとめ、新たなデザインパターンを制作する上でのガイドラインを作ります
デザインシステムは作って終わりではなく、継続的に育てていくことが重要です。そのためには、効果的な運用と改善を支える仕組みを整備し、組織へデザインシステムを浸透させていくことが大切です
変更履歴を明確にし、バージョン管理とデザイン要素の承認プロセスを確立します。Figmaや Githubのバージョン管理機能を活用します。
運用中の課題やフィードバックを効率的に収集し、改善に向けたプロセスを策定します。バージョン管理や承認プロセスも含めた課題管理の仕組みを整え、デザインシステムの品質向上を目指します。
組織全体にデザインシステムを浸透させるため、勉強会やレクチャー会を実施し、システムの活用方法や意図を理解できるようサポートします。
デザインシステムに関するよくあるご質問にお答えします
