Design System Design System
お問い合わせ

Fixelのデザインシステム作成運用サービス Fixelのデザインシステム作成運用サービス

Build Your Own Design System Build Your Own Design System

デザインシステムとは

What is Design System?
デザインシステムとは、デザインの原則やデザインガイドライン、
そしてそれらに沿ってデザインされたUIコンポーネントと
その実装コードを体系的にまとめたものです。
アプリケーション開発の品質を高め効率化が図れます。
デザインシステムの構成
デザインポリシー
デザインシステム全般に関する基本的な原則・ルール
デザインガイドライン
各デザイン要素に対する利用方針や仕様などの資料
UIコンポーネント
ボタンやフォームなど個々の部品やページレイアウト
各種リソース
開発やデザインに必要なファイルやコード群
上の各要素を利用し
アプリケーションを実装
アプリケーション

デザインシステムの先行例

  • Lightning Design System
  • Carbon Design System
  • Ant Design System
  • U.S. Web Design System

私たちFixelとは?

What we do
日本の家電メーカーや大手生命保険会社など、数多くの業務システムやデザインシステムを構築してきました。
そこでのノウハウや手法を活かし「デザイン」に課題をもっている企業様を強力にサポートします。

デザインにおいて
このような課題はありませんか?

Are you having problems?
明確な方針が...
デザインやコードの利用方法に対する 明確な方針とプロセスを確立したい。
品質が...
毎回プロジェクト単位で新しくデザインを作っていて、 デザイン品質がバラバラ。
効率が...
サービスの仕様変更時に デザインと実装の修正に、時間と手間がかかり困っている。
一貫したUXが...
アプリの改善・拡張が多いが 一貫したUXが提供できずに困ってる。
デザイン管理が...
複数システムで使われている デザインを効果的に管理する方法 が知りたい。
ブランド感が...
アプリのデザインを統一して、
サービスの ブランド感を強めていきたい。

その課題、こうやって解決していきます!

Some solutions
01
デザインやコードの利用方法に対する明確な方針とプロセスを確立したい
デザイナーやエンジニアが判断できるよう、UIコンポーネントの使い方やデザインの展開例など、 具体的でわかりやすいデザインガイドラインを作成・提供 することで解決できます。
02
毎回プロジェクト単位で新しくデザインを作っていて、デザイン品質がバラバラ。
様々なプロジェクトで使用しているUI部品やデザイン要素を棚卸しして一覧化。 共通化できるものや区別すべきものなどを整理 して、 一貫性をもたせることで解決できます。
03
サービスの仕様変更時にデザインと実装の修正に、時間と手間がかかり困っている。
毎回デザインするのではなく、一度デザインや実装したものを 再利用しやすい部品に し、それを使ったり、一部変更して展開できるようにすることで作業工数を減らすことができます。
04
アプリの改善・拡張が多いが、一貫したUXが提供できずに困ってる。
画面遷移、レイアウト、UI部品の デザインや挙動などを整理・パターン化 しアプリに反映させることで、操作性や見た目が一貫したものになり一貫したUXが実現できます。
05
複数のシステムで使われている デザインを効果的に管理する方法が知りたい。
どのシステムでも共通して使える 汎用的な基盤デザインシステムを整備します。
その上で、各システム固有の見た目やルールなどを反映したデザインシステムを構築することで管理しやすくなります。
06
アプリのデザインを統一して、サービスのブランド感を強めていきたい。
製品のブランド感とUIデザインのスタイルを結びつけます。
UIデザインの制約を考慮しつつ、最もブランドの世界観を表現しやすい部品や要素に適切に反映することで実現することができます。

デザインシステムの
メリット

Merits of Design System
ビジネスパーソン
のメリット
  • デザイナー・エンジニア間の無駄なやり取りが減り開発スピードアップ!
  • 製品の品質低下を抑えられる
  • UXに注力して製品開発ができる
  • プロダクト開発コストを抑えられる
デザイナー
のメリット
  • 一貫性を保ったデザインを展開できる
  • デザイン品質を保ったまま実装してもらえる
  • デザインされた部品を使って素早く綺麗で整った画面を提示できる
エンジニア
のメリット
  • 再利用可能なUIコンポーネントを活用し効率的で高速な開発ができる
  • デザインされた部品を利用するため細かなデザイン品質を気にせず実装可能
  • コンポーネント設計と実装が不要になりコードの構成がシンプルになる

デザインシステムの作り方

How to build a Design System
デザインシステム構築プロセスは、
新たにアプリやシステムを作る場合、
既にある場合、それぞれのケースによって
作り方が変わってきます。
Case 1. 現在アプリやシステムがある場合
現在のデザイン&実装をもとにデザインシステムとして整備していきます
1
UI部品の棚卸し・分類とパターン整理
デザインの観点から、画面を構成している要素(UIコンポーネントや画面レイアウト)やそのルールなどを整理していきます。
2
コードの分析と、整理・パターン化
現状の実装をコードの観点からも分析し、デザインシステムとして管理・運用しやすい構造に整理していきます。
3
デザインシステム化
この先にデザインや実装をどう運用していくことが多いかなど、諸条件をもとに、再利用しやすく更新・運用しやすい形にしていきます。
4
利用可能な形で公開
全てのドキュメント、コードをウェブなどにアップし利用できる状態にします。
※Fixelではクラウド型プラットフォーム UXHubを使用します。
Case 2. 新規にアプリやシステムをつくる場合
システム構築を進めながら同時にデザインシステムを作っていきます
1
画面設計と並行してルールとパターン整理
システムの詳細設計やワイヤーフレーム検討を進めながら、徐々にデザインシステムのベースを整えていきます。
2
ビジュアルデザインの検討とパターン化
ビジュアルデザインを検討しながら、UIコンポーネントをパターン化して、デザインシステムにしやすいデザインデータに仕上げます。
3
デザインガイドラインとしてまとめる
デザインを固めつつデザインガイドラインにまとめていきます。ドキュメントはウェブ等に載せ、実装時に参照できるようにしていきます。
4
実装と並行してコードのパターン化
デザインガイドラインや画面デザインをもとにUIコンポーネントや画面テンプレートを作ります。同時にコードを登録しながら、システムを構築していきます。
5
利用可能な形で公開
全てのドキュメント、コードをウェブなどにアップし利用できる状態にします。
※Fixelではクラウド型プラットフォーム UXHubを使用します。
システムの規模やデザインの内容によって、細かな進め方は変わってきます。
詳しくはお問い合わせください!
お問い合わせする
Fixelならではの特徴
The strength of Fixel
エンジニアもデザイナーも
デザイナー視点、エンジニア視点の両面から使いやすいデザインシステムを作ることができます。
作った後が大事
再利用可能なのは当たり前。管理・運用しやすさ考慮したデザインシステムを構築し、運用サポートも可能です。
既存アセットの最適化
既にコードやデザインがあれば、デザインデータの最適化や、コードのリファクタリングも対応します。
デザイントークン対応
デザイントークン(デザイン要素を変数化したもの)を使い、構築することで、拡張性と運用性を高めます。
様々なフレームワーク
Web系ならReact.js、Vue.jsなど様々なフレームワークにへも対応します。 ※iOS/Android、Windowsネイティブも対応可能
公開にはUXHubを使用
構築したデザインシステムは、Fixelが専用に開発したプラットフォーム「UXHub」ですぐに公開できます。
お客様事例
Cases
Case. 01
複数プロダクトで一貫した
ユーザビリティを実現
通信キャリアのシステム子会社
既存システムのUIコンポーネントを整理して共通化。
UXHubで管理しながら、複数のシステム横断で使用できるデザインシステムを構築。
Case. 02
エンジニアとデザイナーのスムースな開発連携を実現
保険会社
新規サービスのUX/UIデザインと同時にデザインシステムを構築し UXHub に登録。エンジニアはUIコンポーネントと使用方法を参照し効率的に開発を実施。
Case. 03
複数プロダクトで一貫したユーザビリティを実現
電機メーカー
アプリを横断したコアのデザインシステム、アプリごとのデザインシステムという考え方に発展させることで、システマチックな全体最適化と部分最適化を実現。
その他の事例も多数あります。
詳しくはお問い合わせください。
お問い合わせする
お問い合わせ
デザインシステムが気になった方、
お気軽にご相談ください。