• はてなブックマーク
  • RSS
  • Line

プロダクトデザイナーは語りたい! 〜小木曽槙一のライフハック「デザインのしゃべり場」〜

2024.02.19 Mon

デザインシステムは「手段」です!

負のサイクルからの脱却、デザインシステムの今と最優先事項でない理由

文:こぎそ(@kgsi)

こぎそです。2024年ですが、あっという間に2月になりましたが皆さま如何お過ごしでしょうか? この記事を書いている2024年2月頭、AppleのVison Proが米国で販売されたようですが、気になりすぎて夜も寝れない毎日です。皆さん、僕にVision Proをプレゼントしてみませんか? 絶対良い記事を書きますので...。

さて、今回はプロダクトデザイナーらしい話題の「デザインシステム」について語ってみようと思います。ただ、このデザインシステムについての解説はすでに業界的には擦られまくっている話題で、今さら導入を勧める記事を書いても「そうね〜」にしかならないです。

そこで今回は「デザインシステムの導入は目的じゃない」ことを念頭に、「デザインシステムが必要ではないのではないか? 本当に導入って必要なの?」という目線で記事を書いてみます。

そもそもデザインシステムってなに?

デザインシステムとは、製品やサービスのデザインを標準化し、一貫性を保つための一連のルール、ガイドライン、コンポーネントです。デザインシステムには殆どの場合デジタルプロダクトを作るためのアセット、具体的にはUIデザイン、フォント、色、ボタン、アイコンなど、プロダクトを作るための視覚的要素全般が含まれます。主な各社のデザインシステムも紹介しておきます。

ケース1:▶︎デジタル庁 デザインシステム 
デジタル庁がオープンに公開しているデザインシステム。幅広い「公共サービス」をターゲットとしたこのデザインシステムでは、「デザインと開発を効率化し、利用者の課題解決に集中する」「大規模なサービスで素早く改善サイクルを回す」「一貫性を担保し、行政サービスを使いやすくする」「開発チームの円滑なコミュニケーション」を目的として掲げています。

デザインシステムをスクリーンキャプチャしたものの一部。
デザインシステム|デジタル庁より引用

ケース2:▶︎Spindle(Abema) 
Abemaが公開しているデザインシステム。自社サービスであるAbemaを対象として、"Amebaらしさ"を一貫してユーザーに届けるための仕組みとして公開されています。

SpindleのTOPキャプチャ画像

ケース 3:▶︎SmartHR  Design System(SmartHR) 
SmartHRが公開しているデザインシステムは、「クラウド人事労務ソフト SmartHR」において、「サービスに関わるすべての人がSmartHRらしい表現をするための基準や素材をまとめたもの」として定めています。

SmartHR Design System のTOPキャプチャ画像

各デザインシステムの存在意義や目的の差異はありますが、大きく要約するなら「デザインや開発プロセスの効率化」「チーム間でのコミュニケーションを改善」「ブランディングの一貫性維持」「プロダクトの品質向上」などを実現するための道具と言えるでしょう。

どういうときに必要?

解釈違いがあるかもしれませんが、筆者個人の意見としてデザインシステムが最も価値を発揮するのは、複雑で大規模な組織・多数のステークホルダー・複数のプロダクトを持つ組織において、開発における一貫性と効率を求めているケース...だと考えています。

例えば、UIのコンポーネントを再利用することで開発時間を短縮し、異なるプロジェクト間でのデザインの一貫性を保ちたいときに必要になります。更にデザインシステムは、パターンを提供しているケースもあり、コンポーネントとコンポーネントとの組み合わせのパターンや設計事例も紹介し、新たに設計したり、あるいは既存画面の回収をする際に役立ちます。また、長期的なブランディング戦略の一環として、企業のアイデンティティを強化し、顧客体験を統一するためにも有効とされています。

デザインシステムについての効能やメリットについて述べた記事は他にもいくつもあるので、それぞれ確認してみるとよいでしょう。

 

あなたの会社・組織に本当に必要?

デザインシステムは一見良いことづくしで、どんな組織でも今すぐ検討して良いのでは? となりがちですが、実際のところ多くの企業やプロジェクトでデザインシステムを必要とはしていない...といったことが多いです。デザインシステムの導入を本格的に考える際は「本当に必要なのか」を何度も問いただして進めてみると良いぐらいです。

実際、副業などで「デザインシステムを作りたい」と相談を受けたことが何度かありますが、いざ参画して話を聞いてみるとデザインシステムを構築するなフェーズであることがとても多いです。

まず、企業の初期フェーズにおいては具体的なプロダクトやサービスの開発に焦点を当てており、デザインの一貫性や効率化を考える段階には至っていません。これは特に、新しい市場に迅速に参入しようとするスタートアップや、プロダクトを短期間で開発しようとするプロジェクトに顕著です。

デザインシステムの導入は、事業の成熟度やプロダクトのフェーズによって、その必要性が大きく変わってきます。また、企業のビジネスモデルや戦略が頻繁に変化するようなフェーズの場合、頻度の高い更新をしたとしてもデザインシステムがスケールの足かせになることもあります。 

小規模なステージにあるプロダクト、短期間で市場に投入するサービスの場合、デザインシステムの構築にかかる時間とコストが正当化できないことがほとんどです。更新頻度が低かったり、ステークホルダーが少ないプロダクトなども「too much」でしょう。

それって、優先順位低いかも?

導入するべきであると判断し、デザインシステムを構築したとしても、デザインシステムの運用・更新の優先順位はほとんどの場合で高くなることはありません。

デザインシステムの導入が企業にとって最優先事項にならない理由は、デザインシステム単体では「ビジネス価値」を産まないからです。そのために生まれる明白な課題は、リソースの制約です。デザインシステムの運用には、初期の構築以上に時間と労力と専門知識が必要であり、これらは特にスタートアップや小規模なチームにとっては貴重なリソースなので、優先的には割り振られません。売上を生むコアとなる事業に振り向けられるし、実際そうあるべきです。

加えて市場への迅速な対応が求められるプロジェクトでは、デザインシステムの構築に時間を割くことがプロジェクトの遅延を招く可能性があります。デザインシステムの導入には、これらの前提を検討したうえで「投資対効果」があると判断できること、ある種の覚悟が必要です。

どうすればよいのか?

まずデザインシステムという言葉に囚われず、必要以上の大規模な仕組みをいきなり構築しようとすることなく、最小限の必要なリソース開発から着手することが確実でしょう。 

たとえば、ブランドガイドラインが最初に必要であればまずそれを作成し、次にコンポーネントライブラリが必要であれば、それを構築する(フルスクラッチで作る必要があるのかも検討)...という具合に、必要なものを必要なだけ作っていくべきです。そのステップも作り手の思い込みで進めるのではなく、実際の組織の状態をヒアリングしたり観察して、課題を特定して進めていくことが重要です。
うまくことが運んで、最終的にはこれらを統合したデザインシステムの構築を検討するフェーズが来ることがあるでしょう。

ちなみに大半のケースでは、デザインシステムを構築する前に、デザインの決定理由の明確化、レビュープロセスの確立、開発フローの整備など、より基礎的な段階の整備が求められます。特にプロダクトや事業の初期段階では、これらの基礎を固めることに資源を投資する方が、遥かに価値があることが多いでしょう。

まとめ

デザインシステムは、一貫性を保ち、効率を向上させ、ブランディングを強化するための強力なツールです。しかし、デザインシステムの導入がすべての企業に最適な選択...というわけではありません。デザインシステムの導入を検討する際には、現在の課題、開発規模、将来のゴールを総合的に評価し、その投資が中長期的に見て価値があるかどうかを慎重に判断する必要があります。

負のサイクルから脱却するためには、デザインシステムの導入が目的ではなく、より良いプロダクトと開発体験を提供するための「手段」であることを理解することが最も重要でしょう。

ということで、ところどころ私見が含まれていますが、デザインシステムについてのコラムでした。色々強めの表現をしている箇所もありましたが、デザインシステムは素晴らしい思想で筆者個人としても思い入れのある道具です、みんなでいい道具を作っていきましょう。
もしデザインシステム関連のお仕事やご相談ごとがございましたら、ご連絡お待ちしております!(宣伝)

小木曽 槙一
プロダクトデザイナー
受託制作会社でデザイナー・エンジニアとして勤務後、事業会社のデザインエンジニアとしてプロダクト開発に従事。2020年より株式会社SmartHRに入社し、基本機能や従業員サーベイ機能の開発設計に携わる。デザインシステムやUIコンポーネントの開発など、社内横断プロジェクトにも参画。パラレルキャリアを標榜し、副業でエンジニア・デザイナー・アドバイザーとして活動中。著書に『ちいさくはじめるデザインシステム(BNN)』など。
  • Twitter
読込中...

Follow us!

SNSで最新情報をCheck!

Photoshop、Ilustratorなどのアプリの
使いこなし技や、HTML、CSSの入門から応用まで!
現役デザイナーはもちろん、デザイナーを目指す人、
デザインをしなくてはならない人にも役に立つ
最新情報をいち早くお届け!

  • Instagram