ユーザーに素早く
価値を届けるための
デザインシステム
構築支援サービス

ブランドビジュアルの再構築から
効率的なエンジニアリングまで
サポートします。

About the design system

デザインシステムとは?

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

デザインシステムの構成要素

  • デザイン原則

    デザイン原則

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

  • デザインガイドライン

    デザインガイドライン

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

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

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

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

  • 各種リソース

    各種リソース

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

背景

INTRODUCTION

いま、
なぜデザインシステムが
必要とされているのか。

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

Design issues

よくあるデザインの課題

  • 00CONSISTENCY

    01 CONSISTENCY

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

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

  • 01UNIFICATION

    02 UNIFICATION

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

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

  • 02EFFICIENCY

    03 EFFICIENCY

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

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

Solution

このような課題を
デザインシステムを用いて解決します

  • CASE 01

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

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

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

    CASE 01
  • CASE 02

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

    ブランド定義から丁寧に

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

    CASE 02
  • CASE 03

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

    再利用しやすい設計

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

    CASE 03
FAQ

よくある質問

  • Q

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

    A

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

  • Q

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

    A

    弊社が実装の場合、JSフレームワークはReactとなります。また、デザインファイルはFigmaを基本としていますが、ご指定があればAdobe XDやSketchでの納品も可能です。

  • Q

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

    A

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

  • Q

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

    A

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

プロジェクト開始までの流れ

お問い合わせ

お問い合わせ

まずはお気軽にお問い合わせください。

ヒアリング

ヒアリング

抱えている課題やご要望について詳しくお話を伺います。

ご提案

ご提案

お客さまの要望にぴったりのご提案をさせていただきます。

ご契約

ご契約

提案に合意いただけたら、ご契約手続きを行います。

開始

開始

プロジェクトに合ったメンバーでチームを編成し、キックオフを行います。

Contact

お問い合わせ