モダンアプリケーション・デベロップメントデザインシステム構築

デザイン原則の定義、スタイルガイド作成、UIデザインの最適化、UIコンポーネント設計からフロントエンド開発まで、デザインシステム構築の総合的なサポート、また内製化の支援が可能です。

What we do概要

デザインシステムとは、デジタルプロダクトの一貫した体験をデザインするためのルールや、運用効率化などを目的としたパターン、実現のための一連のリソースなどを総合したものを指します。標準的な定義は難しいですが、大きくは組織におけるデザインの標準やプロセスを改善する取り組みと言えます。基本的にはデザイン原則などのルールをまとめたガイドラインと、UIデザインの一貫性を保つためのコンポーネントライブラリなどが含まれています。

これまでの私たちの知見を活かし、デザインシステム構築のサポートを提供します。お客さまのチームが自立的にデザインシステムを維持・発展させる能力を獲得できるよう内製化支援も可能です。これにより、長期的かつ持続可能なデザイン品質の向上と開発効率の最適化を実現します。

Key elements of a design systemデザインシステムの構成要素

デザイン原則

プロダクトの核となる「らしさ」や「重要なことはなにか？」を定義・明文化したもの。

デザインガイドライン

デザインシステムのルールを記載したもの。レイアウトのルールや、コンポーネントの使用方法など。

コンポーネントライブラリ

デザインパターンをコンポーネント化したFigmaのAssetsや、それと同期するReactライブラリなど。

各種リソース

デザインシステムを運用していく上で必要なデザインファイルやドキュメントなど。

The importance of a design systemデザインシステムの重要性

VUCAと言われる社会の中では、変化に素早く対応するスピード、すなわち、利用者により良い体験を素早く提供することが重要です。現在のデジタルプロダクトの世界では、全く新しい物を生み出すよりも、既にあるものを上手く活用して最適化を繰り返すことが重要といえます。

そうした状況の中で企業は、複数のプロダクト・複数の部署・複数のデザイナーが一貫性のあるUIデザインを素早く的確に適用しなければなりません。この課題を解決するために、デザインシステムの導入が求められています。デザインシステムを導入することで、企業はUIデザインの内製化を進めることができ、一貫性のあるデザインを迅速に展開することが可能になります。

デザインシステムによって内製化が進むと、複数のプロダクトや部署でのコラボレーションが容易になり、全体としてのデザイン品質が向上します。このように、デザインシステムはUIデザインの内製化支援を強力にサポートし、企業が変化に迅速に対応するための重要な手段となります。

Design issues & solutionよくあるデザインの課題とデザインシステムによる解決方法

一貫性が担保されていない

度重なる機能追加・改修で、UIデザインの一貫性が失われている。例えば、似たようなボタンがたくさん存在している。

デザインを整理、パターン化

画面遷移、レイアウト、UI部品のデザインや挙動などを整理・パターン化しアプリに反映させることで、操作性や見た目が一貫したものになり統一感のあるUXが実現できます。

プロダクト全体の統一感がない

メインのデザイナーが変わったり、サービスごとに異なるトンマナが適用されていて、複数プロダクトの関連性が希薄。

ブランド定義から丁寧に

i3DESIGNのデザインシステム制作はプロダクトにおけるブランドのあり方から定義します。はじめにきちんと言語化し、ブランドにしっかりと結びついたビジュアル表現を再定義することで、ブレのない一貫したUIデザインでプロダクトのブランド力を高めることができます。

実装に手間が掛かり改善が進まない..

サービスの仕様変更の際、デザインと実装の修正に時間と手間がかかり困っている。

商用利用しやすい設計

一度デザイン・実装したものは再利用できる形にすることで、運用での作業工数を減らすことができます。

Our approachサービス提供プロセス

01
調査・分析フェーズ
対象のデザインシステムを作るにあたって必要な範囲や計画を行います。厳格なシステムが必要か、または変化に柔軟に対応するシステムとするかを考えます。また、デザイン原則を作成するための下準備として競合調査やブランド分析を行います。
ヒアリング
CI/VIの確認から、顕在化している課題の確認など、現状を理解します。また、ターゲットユーザーの定義や、プロダクトの強みなど、デザインシステムの目的と目指すべき「良いデザイン」が何であるかの認識を合わせます。
ブランド分析
サービス提供者の持つ想いからサービスの持つ人格を導き出します。顧客像・業界のポジショニングなどの要素とバランスをとりながらビジュアルの定義まで具現化していきます。
02
デザイン原則制作フェーズ
ワークショップなどを通してプロダクトやブランドが大切にする価値観がなにかを探索します。これを言語化した上で、UIデザインへと落とし込んでいきます。
価値観の言語化
デザインシステムはブランドを効率的にデジタルプロダクトに適用するためのツールです。企業の持つブランド=プロダクトのブランドとは限らないために、改めてプロダクトの「らしさ」とはなにかを定義する必要があります。これは「デザイン原則」となり、デザインに迷ったときの助けになったり、何を優先すべきか、なんのために作られるべきかという指針になります。
トーン&マナー設計
プロダクトのブランド定義から、実際のUIデザインに落とし込まれた場合にどうなるかを検証・定義します。ブランドアーキタイプの定義からムードボードの作成、ムードボードに基づいた画面デザイン上でのパターン検証を行い、プロダクトのビジュアルコンセプトを決定します。
03
UIデザイン作成フェーズ
デザインの基盤となる要素から定義を行い、コンポーネントのデザイン定義まで進めます。
デザイン基盤の構築
色やフォント、レイアウトなどのデザイン原則に基づいたデザインの基盤要素となるルールを定義します。既存プロダクトがある場合は、汎用的な要素を切り出して作成していきます。
コンポーネント定義
プロダクトで扱われるコンポーネントを定義します。
定義が必要なコンポーネントの洗い出しから、コンポーネント名称の確定までを行います。運用・実装効率を意識して、程度な制約を設けます。
パターン・プロパティ定義
コンポーネントごとに汎用性を定義します。パターンの洗い出しと、コンポーネントライブラリとしてコンポーネントの持つプロパティをそれぞれ定義します。
04
実装・ガイドライン作成フェーズ
コンポーネントライブラリの実装と必要なドキュメントの作成を行います。
ドキュメントの作成
スタイルガイドやデザインガイドラインを作成します。コンポーネント毎の詳細なスペックや静的なデザインファイルでは伝えきれない情報を、ノンデザイナーにもわかりやすくまとめます。
実装・エンジニアリングとの連携
デザイントークンやコンポーネントをエンジニアリングと連携します。エンジニアが構築したコンポーネントをStorybookやChromaticで確認を行いながらデザインファイル上での定義を実装していく他、APIやプラグインを使用して自動化を行います。

FAQよくある質問

コストをかけずにやる方法はありますか？

既存のUIライブラリをカスタマイズして活用するなど、コンパクトに始める方法があります。運用体制によっては、システムに厳格な制約を設ける必要がない場合など、状況に応じてプロジェクトの範囲と深さが変わりますので、是非一度ご相談ください。

コンポーネントライブラリはどのような形式で納品されますか？

弊社が実装の場合、JavaScriptフレームワークはReactとなります。また、デザインファイルはFigmaを基本としていますが、Adobe XDでの納品についても対応可能な場合がございますので一度ご相談ください。

社内にデザイナーがほとんどいないのですが大丈夫ですか？

デザインシステムの運用にはデザイナーが必要とされています。とはいえプロダクトの更新頻度や運用体制は企業によって様々ですので、人数が少ない場合であっても管理ができる規模などのご提案を致します。また、ご希望に応じて現在の体制でも自走できるよう内製化支援も行っております。

ネイティブアプリのデザインシステムは作成可能ですか？

ネイティブアプリにはHuman Interface GuidelineやMaterial Designといったプラットフォーマーのデザインシステムが存在しています。これに加えて独自のデザインシステムを構築するのは複雑になりコンフリクトが発生してしまいますので、基本的にはプラットフォーム毎のデザインシステムを準拠するか、範囲を限定して作成することをおすすめしています。