成長するサービスを支えスケールを可能にするデザインシステムとは

2021.10.12
  • UXデザイン

こんにちはシナップ大川です。
最近「デザインシステム」という言葉を耳にする機会が増えてきました。
しかし、一口に「デザインシステム」といってもその言葉の示す範囲は広く、人によって捉え方は様々です。
そこで今回は「デザインシステム」の注目される背景から、構築のコツ、メリットなど、クライアント、パートナーのみなさまにお送りしている『SINAP Journal 2021 Summer』の記事からご紹介します!

<これまでのSINAP Journalに関するブログ記事>
ABテスト運用でよくある6つのお悩みと解決策
『SINAP Journal 2022 Winter』PDF版をアップしました!
成長するサービスに必要不可欠なデザインシステム4つのメリット
えっ、コレもらえるの!? シナップのユニークなバースデープレゼント

デザインシステムが注目される背景

最近「デザインシステム」という言葉を耳にする機会が増え、注目しているという方も多いと思います。

この背景にはWebサイトやアプリケーションを作って終わりではなく、常に改善や拡張を繰り返し、成長していくようになったことが大きな要因として挙げられます。デザインも作り切りではなく、日々アップデートされていくものになったのです。
そして、ここで重大な課題が持ち上がります。スピードと拡張性です。

日々のアップデートにあわせデザインする必要があるのはもちろん、特に競争が激しい分野ではデザインがアップデートされる機会も多く、デザインにもスピードと拡張性が求められます。これに対し多くの企業ではこれまでデザイナーを増やすという手段で対応してきました。しかし雇用には限界があります。しかも多数のデザイナーが関わることによって、デザインのクオリティや一貫性が失われるという新たな問題も発生するようになりました。
大規模なサイトでは、同じ用途のボタンが色違いで何種類も存在することがあります。
これらは「デザイン的負債」などとも呼びますが、利用者を混乱させ、ユーザー体験を下げるばかりでなく、メンテナンスを複雑にし、デザインの改修を遅らせる原因にもなります。
こうした背景から、これらの課題の解決策として注目を集めているのが「デザインシステム」です。

デザインシステムの価値

デザインシステムを簡単に説明すると、デザインのビジョン・コンセプトを定義し、再利用可能なコンポーネントに落とし込んだものです。そして、この再利用可能なコンポーネントを組み合わせることで、より迅速に、様々なデザインを可能にするところに真価があります。
これはソフトウェア開発がコードをコンポーネントベースで管理し効率性と拡張性、運用性を高めてきた方法に似ています。

デザインシステムのメリットについては後日、別の記事で詳しく触れていきたいと思いますが、特に多数のデザイナーが参加するプロジェクトではスピードや拡張性を高めるといったメリットだけでなく、ユーザー体験の向上に寄与し、デザイン的負債の削減に繋がります。

デザインシステム活用の鍵は状況に応じた運用体制の構築

ここまで聞くとデザインシステムはとても良いものに聞こえるかもしれません。こうした注目を背景に多くの企業やチームがデザインシステム構築にトライしてきましたが、うまくいかない例も散見します。

シナップでもこれまでいくつかのデザインシステム構築に携わり、また自社でもデザインシステムを持っていますが、正直なところ、全てが上手くいったわけではなく、そこには多くのトライ&エラーがありました。
なかでも活用の鍵を握るのは運用体制の構築ではないかと考えます。
デザインシステムを一旦構築すること自体はそれほど難しいことではありません。
最も大変なこととして既存のサイトを総ざらいし、UIパーツなどを分類・整理することがあげられます。これはタスクが明確なため、時間をかければできるでしょう。
むしろ難しいのはこうして構築したデザインシステムを今後のデザインで利用していくスキームを作り、運用していくことにあります。この運用では複数のデザイナー、場合によってはグループの異なるデザインチームや外部パートナーを含めて、その利用を徹底しなければなりません。またデザインシステムを常に最新の状態に保っておくためにメンテナンスも必要になります。

サービスが小さいうちは一人のデザイナーで管理できるため、意思決定も速く有益と言えるでしょう。
やがてサービスが大きくなるとデザインシステムを一人では管理できなくなります。チームで管理する場合は、デザインシステムを一元管理するチームを構築するか、各チーム、グループから代表者が集まり協議する形をとるかなど、チームの編成によってメリット・デメリットが存在します。
サービスの状況や組織体制に応じたチームの編成がデザインシステム活用の鍵となります。

ユーザー体験の向上と効率・拡張性を同時に満たすデザインシステム

このようにうまく活用できれば、ユーザー体験の向上と効率・拡張性を同時に満たすデザインシステムですが、そのためには解決しなければいけない課題も多く存在します。
しかし諦めていてはデザイン的負債はたまる一方です。コツとしては全てを一度に整理し運用しようとせず、できるところから少しずつでも始めていくことです。
もちろん、もしお困りのことがあれば私たちシナップにいつでもご相談ください。

この記事をシェアする
大川 貴裕
大川 貴裕
Webサイトをはじめ、企業のブランドデザイン、CI/VI開発、グラフィックデザインなど幅広い分野で活躍している。国際的なデザインコンペティションほか受賞多数。近年はWebデザイン専門学校などでUXデザインの講師も行う。

関連記事

Webサービスを成功に導くシナップのUXリサーチ

2023.10.04
  • UXデザイン

一見良さそうに見えるデザインにも問題点が… デザイン4大原則から考えるUIデザインの完成度を高める方法

2023.06.06
  • UXデザイン
  • UI/UX

カスタマージャーニーマップは何で作る?カスタマージャーニーマップを作るツール3選

2022.10.25
  • UXデザイン

UXリサーチとは?今日からスモールスタートで始めるUXリサーチ

2022.06.14
  • UXデザイン

成長するサービスに必要不可欠なデザインシステム4つのメリット

2021.11.09
  • UXデザイン

成長するサービスを支えスケールを可能にするデザインシステムとは

2021.10.12
  • UXデザイン

いますぐできる利用者のネガティブな感情を取り除き、 ポジティブな感情をもたらすUXデザインのヒント

2021.04.13
  • UXデザイン

春のスタートダッシュを決めよう!~2021年度版:Web業界の新人さんにオススメの書籍10選~

2021.04.07
  • UXデザイン

この3つだけはおさえておきたい。明日から作業効率が大幅アップする!この半年で行われたAdobeXDの新機能(2020年6月-12月)

2021.01.14
  • UXデザイン

2020年春からおさえておきたいデザイントレンド 7選

2020.04.14
  • UXデザイン

参考にしたいデザインシステムまとめ 10選

2019.04.11
  • UXデザイン

簡単に作れて見栄えする!CSSで作るリッチなhover演出

2018.06.21
  • UXデザイン

パーツごとに見るモバイルUI:参考にしたいUIまとめ

2017.09.12
  • UXデザイン

パーツごとに見るモバイルUI:フォームの事例と、UIを考えるときのポイント

2017.09.06
  • UXデザイン

パーツごとに見るモバイルUI:カルーセルの事例と、設計・デザイン時に気をつけること

2017.08.29
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニューを押した際のナビゲーションの表現方法

2017.08.23
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介

2017.08.09
  • UXデザイン

視覚で伝わるインフォグラフィック!面白い事例も作ってみました!

2017.06.01
  • UXデザイン

初めてでも大丈夫!Adobe XDの書き出し機能と使い方

2016.12.14
  • UXデザイン

スムーズに検索させよう!複雑な検索をするときの画面やUIパターン

2016.02.09
  • UXデザイン

よくわかるIoTの仕組み 「モノ」とインターネットを接続するには

2015.11.19
  • UXデザイン

記事をページ分割するメリット・デメリット(モバイルフレンドリー対応)

2015.08.07
  • UXデザイン

モバイルフレンドリー対応:スマホで読まれる文字数は?

2015.07.30
  • UXデザイン

スマホサイトの「続きを読む」は必要か?(モバイルフレンドリー)

2015.05.28
  • UXデザイン

人気記事

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