Production
制作・開発

デザインシステムの開発・導入支援

デザインシステムは、組織全体におけるデザインの共通言語となるものです。デザインシステムを利用することで、「組織内で一貫したブランドイメージの構築が実現できる」などのメリットがあります。シナップでは、様々な企業のデザインシステムの導入経験をもとに、運用フローまで考慮した、”活用できる”デザインシステムの導入を支援いたします。


シナップのデザインシステム開発の強み

デザインシステムとは

デザインシステムとは、UIキットやスタイルガイド、ブランドガイドラインなどによって構成され、デザインする、またはデザインについて議論する上での唯一の指針で、組織全体におけるデザインの共通言語となるものを指します。
組織内で一貫したデザインルールやブランドイメージの構築を目指したり、デザイン概念や原則を共有したりすることで、Single source of truth(「信頼できる唯一の情報源」の意で、情報が色んなところに分散しておらず、デザインについてはここを見れば分かるという状態)の実現を目的として制作されます。

デザインシステムのイメージ。TYPOGRAPHY、ICONS、COLORS、BUTTON、ELEMENTS、FORMなどの一例。

シナップの提供価値

シナップでは、これまで様々な企業でデザインシステムの開発・導入を支援してきました。
デザインシステムは、「作って終わり」ではありません。サービスの成長に合わせ継続してメンテナンスしなければ、デザインシステム本来の効果を得ることはできません。デザインシステムを導入したものの、その後に運用されず、デザインルールやコンポーネントが陳腐化して、結局使われていないという話をよく耳にします。
正しく使われるようにするためには、例えばStorybookを用いたパーツ管理など、利用者が使いやすく、閲覧しやすい環境を整えた上で、運用フローまで整備する必要があります。
シナップでは、単なるデザインシステムの構築だけでなく、その後に継続的に成長させていくための運用フロー・プロセスまで設計を行い、正しく利活用できるデザインシステムを構築します。


サービス内容

デザインシステム導入の流れ

対象サイトの範囲や現時点の整理内容など、実際の流れはクライアントの状況によって様々ですが、ここでは一般的なデザインシステム導入の流れをご紹介します。

STEP 01. 現状整理と方針の決定

デザインシステムを導入・運用するサイトの範囲を整理し、対象範囲を定義します。また、対象範囲内で利用するブランドコンセプト、カラーパレットなどのデザイントークンの定義および複数サイトへの導入の場合は、ガバナンスの定義を行います。

主なタスクや成果物
  • ディレクトリ構造整理図
  • ブランドコンセプト/デザイントークン定義
  • グローバルエリアのゾーニング定義

STEP 02. コンポーネントの整理とデザインの調整

各画面ごとに使用しているUIパーツを全て洗い出し、パーツの統合や分割を行い、コンポーネントリストを制作します。また、各コンポーネントに対して、デザイントークンの内容に則りデザインの調整を行います。
制作したコンポーネントリストをもとに、実際の画面への反映可否を検証し、コンポーネントに過不足がないか確認します。

主なタスクや成果物
  • コンポーネントリスト

STEP 03. 実装

整理したコンポーネントリストを実装していきます。実装時は、以降の運用を考慮し、コンポーネントの追加・削除がしやすいようにコンポーネントの分割単位に注意しながら行います。シナップでは、アトミックデザインの思想を取り入れ、原子・分子・生体の単位でコンポーネントを制作していきます。

主なタスクや成果物
  • ソースコード

STEP 04. 各種ガイドラインの作成

カラーパレットやレイアウトルール、インタラクションなどのデザイントークン、ブランドコンセプトなどを、デザインガイドラインとしてドキュメント化します。
そのほか、実装ルールや、デザインシステムの運用方法をまとめた各種ドキュメントも整備し、利用者がスムーズにデザインシステムを利活用できる環境を構築します。

主なタスクや成果物
  • デザインガイドライン
  • 実装ガイドライン
  • 運用ガイドライン
最適な解決方法をご提案します
SINAPでは、Webサイトやアプリの制作・開発に関わる様々なサービスを提供しています。制作・開発に関するお困りごとの相談をいただければ、お客様のご状況に合わせた最適な解決方法をご提案させていただきます。まずはお気軽に、ご相談ください。
制作・開発 サービスメニュー

代表的な手法を掲載しています。プロジェクトに合わせて最適なプランをご提案します。

このサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。