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

デザイン原則の定義、ガイドライン作成、UIコンポーネント設計からフロントエンド開発まで、デザインシステム構築の総合的なサポートを提供します。

デザインシステム構築

What we do概要

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

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

デザイン原則

デザイン原則

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

デザインガイドライン

デザインガイドライン

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

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

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

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

各種リソース

各種リソース

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

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

VUCAと言われる社会の中では、変化に素早く対応するスピード、すなわち、利用者により良い体験を素早く提供することが重要です。現在のデジタルプロダクトの世界では、全く新しい物を生み出すよりも、既にあるものを上手く活用して最適化を繰り返すことが重要といえます。そうした状況の中で企業は、複数のプロダクト・複数の部署・複数のデザイナーが一貫性のあるデザインを素早く的確に適用しなければなりません。そうした背景によって今、デザインシステムによる解決が求められています。

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

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

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

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

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

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

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

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

ブランド定義から丁寧に

ブランド定義から丁寧に

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

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

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

商用利用しやすい設計

商用利用しやすい設計

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

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

  • 01

    調査・分析フェーズ

    対象のデザインシステムを作るにあたって必要な範囲や計画を行います。厳格なシステムが必要か、または変化に柔軟に対応するシステムとするかを考えます。また、デザイン原則を作成するための下準備として競合調査やブランド分析を行います。

    ヒアリング

    CI/VIの確認から、顕在化している課題の確認など、現状を理解します。また、ターゲットユーザーの定義や、プロダクトの強みなど、デザインシステムの目的と目指すべき「良いデザイン」が何であるかの認識を合わせます。

    ブランド分析

    サービス提供者の持つ想いからサービスの持つ人格を導き出します。顧客像・業界のポジショニングなどの要素とバランスをとりながらビジュアルの定義まで具現化していきます。

    process
  • 02

    デザイン原則制作フェーズ

    ワークショップなどを通してプロダクトやブランドが大切にする価値観がなにかを探索します。これを言語化した上で、ビジュアルデザインへと落とし込んでいきます。

    価値観の言語化

    デザインシステムはブランドを効率的にデジタルプロダクトに適用するためのツールです。企業の持つブランド=プロダクトのブランドとは限らないために、改めてプロダクトの「らしさ」とはなにかを定義する必要があります。これは「デザイン原則」となり、デザインに迷ったときの助けになったり、何を優先すべきか、なんのために作られるべきかという指針になります。

    process

    トーン&マナー設計

    プロダクトのブランド定義から、実際のビジュアルデザインに落とし込まれた場合にどうなるかを検証・定義します。ブランドアーキタイプの定義からムードボードの作成、ムードボードに基づいた画面デザイン上でのパターン検証を行い、プロダクトのビジュアルコンセプトを決定します。

    process
  • 03

    UIデザイン作成フェーズ

    デザインの基盤となる要素から定義を行い、コンポーネントのデザイン定義まで進めます。

    デザイン基盤の構築

    色やフォント、レイアウトなどのデザイン原則に基づいた デザインの基盤要素となるルールを定義します。既存プロダクトがある場合は、汎用的な要素を切り出して作成していきます。

    process

    コンポーネント定義

    プロダクトで扱われるコンポーネントを定義します。
    定義が必要なコンポーネントの洗い出しから、コンポーネント名称の確定までを行います。運用・実装効率を意識して、程度な制約を設けます。

    パターン・プロパティ定義

    コンポーネントごとに汎用性を定義します。パターンの洗い出しと、コンポーネントライブラリとしてコンポーネントの持つプロパティをそれぞれ定義します。

  • 04

    実装・ガイドライン作成フェーズ

    コンポーネントライブラリの実装と必要なドキュメントの作成を行います。

    ドキュメントの作成

    スタイルガイドやデザインガイドラインを作成します。コンポーネント毎の詳細なスペックや静的なデザインファイルでは伝えきれない情報を、ノンデザイナーにもわかりやすくまとめます。

    process

    実装・エンジニアリングとの連携

    デザイントークンやコンポーネントをエンジニアリングと連携します。エンジニアが構築したコンポーネントをStorybookやChromaticで確認を行いながらデザインファイル上での定義を実装していく他、APIやプラグインを使用して自動化を行います。

    process

FAQよくある質問

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

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

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

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

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

デザインシステムの運用にはデザイナーが必要とされています。とはいえプロダクトの更新頻度や運用体制は企業によって様々ですので、人数が少ない場合であっても管理ができる規模などのご提案を致します。

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

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