新規事業開発にも有効、仮説検証の確度を高める「デザインシステム」の活用法

ビジネスの環境が複雑化している今、新たなサービスやプロダクトを世に出す際に「仮説検証」は欠かせません。

いわゆる「フィットジャーニー」における、PSF（Problem Solution Fit：課題を解決できる解決策は何か）フェーズや、SPF（Solution Product Fit：プロダクトによって課題を解決できるか）フェーズで、サービス（プロダクト）がもたらす価値がユーザーに支持されるのか、一定の確証がなければ、投資に踏み切る判断がしにくいためです。

仮説検証では、解決策の具体的な利用イメージを想起してもらい、正確な意見を得るために、ユーザーが触れるプロトタイプを用いて、課題が解決されるまでの一連の流れを検証するのが一般的です。

Goodpatch Blog: 体験価値がユーザーに与える影響を探る「価値検証」とは

しかし、この「プロトタイプ」の制作に苦戦し、肝心の仮説検証がおろそかになってしまうケースは少なくありません。いくらプロトタイプであるとはいえ、クオリティが低ければ、サービスの価値を感じてもらうこともままなりません。

そこで本記事では、仮説検証におけるプロトタイプの制作効率を高め、クオリティを高める手段として「デザインシステム」の活用方法をご紹介します。

基本的には、開発効率やプロダクトのクオリティを高める効果をうたうことが一般的なデザインシステムですが、新規事業開発の現場でも活躍する可能性は高いです。合わせて、仮説検証フェーズ以降にもたらす効果についてもご紹介します。

デザインシステムとは

また、その構造は一般的に「デザイン原則」「デザインパターン」を明文化したものと、それらをプロダクトに反映させるためのライブラリなどの「アセット」によって成り立っています。

次の画像は、グッドパッチがデザインシステムの構築や運用を支援する際に頻出する要素をまとめたものです。

• 原則
  • 「良いデザインとはなにか」「デザインを行う上での姿勢」など、大切にしている考えを明文化したものです。また、デザインシステムの目的やデザインシステム自身をどのように育てるかという方針を示すこともあります。
    

• ブランドガイドライン
  • 色、フォント、ロゴなどブランドを表すためのビジュアルアイデンティティをまとめたものです。企業理念、提供価値、行動規範などブランドを行動によって体現するためのコーポレートアイデンティティも含まれます。　　　
    

• ユーザーインターフェイスガイドライン
  • インターフェイスを構成するトークン、コンポーネント、UIパターン、コンテンツなどの設計方針を明文化したものです。インターフェイスをどのように構築するかという原則やアクセシビリティ方針も含まれます。
    

• ユーザーインターフェイスキット
  • ユーザーインターフェイスガイドラインで明文化した指針に則ったUIを効率的に構築するためのリソースやツールをまとめたものです。デザインファイル内のライブラリや開発時のプラットフォーム、フレームワークに応じたコンポーネントライブラリなどが相当します。
    

引用：［新連載］良いデザインシステムとは その基本と構造をグッドパッチが解説

デザインシステムが仮説検証フェーズにもたらす効果

冒頭でも触れた通り、デザインシステムの定義や構造・構成要素を踏まえ、デザインシステムがプロトタイプのクオリティを高め、仮説検証の確度を高める効果について説明します。

解決策や価値自体の検証に集中できる

プロトタイプを用いた仮説検証は、解決策や提供価値自体の検証が目的ですが、

• プロトタイプに対するユーザビリティ観点の発言が多くなる
• 最悪の場合、使い勝手が悪く解決策や提供価値がうまく伝わらない

といったリスクが考えられます。

ヤコブ・ニールセン は「10 Usability Heuristics for User Interface Design」で「一貫性と標準」をユーザビリティヒューリスティックとして挙げ、「一貫性を維持できないと、ユーザーに何か新しいことを学ばせることになり、認知負荷が増加する可能性があります。」と述べています。そのため検証用のプロトタイプにおいても、デザインに一貫性を担保することは、先述したリスクを回避する上でも重要です。

仮説検証フェーズでプロトタイプを作成する際に、同時並行でデザインシステムを構成するユーザーインターフェイスキットとして色やフォント、コンポーネントを使用パターンと共に定義しチーム内で共有する。

そうすることで、同じ目的や意味を持つインターフェイスであるにも関わらず、異なった色や形状・振る舞いをしたインターフェイスが同一プロダクト内に複数混在してしまうといった一貫性のない状態による認知負荷を避け、検証の目的である解決策や提供価値自体の検証の集中に寄与できます。

SPFフェーズを短縮しPMFにより早く辿り着きやすくなる

仮説検証には大小あれど反証されることが往々にしてあり、それに伴い、プロトタイプの調整作業や新しい画面の構築作業が生じます。

あらかじめデザインシステムとして、再利用可能なコンポーネントを構築しておくと、ゼロからパーツを作成する手間やデザインファイルからパーツを探す手間がなくなります。また、コンポーネント自体に調整を行うことで、そのコンポーネントが用いられている全体の箇所に調整が反映されるため、同じ変更作業を複数の箇所に施す手間がなくなります。

さらにはまた、色やフォントの使用パターンを定義しておくと、新しい画面を構築する際に、それらの選択に対する判断コストとその時間を短縮できます。

その結果、仮説検証で得られたユーザーの声を分析して、次のアイデアを検討する時間をより確保できるようになり、素早く効果的な仮説検証のサイクルを繰り返し回しやすくなるため、SPFフェーズを短縮しPMFにより早く辿り着きやすくなると言えるでしょう。

ちなみに、Figmaによる実験結果として、「デザインシステムを活用することで、それを使えない場合よりも、34%早くUIデザインのタスクを終えられる」ことが明らかになっているようです。

デザインシステムが仮説検証フェーズ以降にもたらす効果

PMFやGTM戦略に向けたアクションを行いやすくなり、開発負債を抱えにくくなる

当たり前ですが、デザインを作成した際に、同じ目的や意味を持つインターフェイスであるにも関わらず、異なった色や形状・振る舞いをしたインターフェイスが同一プロダクト内に複数混在してしまうといった先述した状態になると、その分だけコーディングしなければなりません。

しかしながら、コンポーネントを使用パターンと共に定義しチーム内で共有しておくと、無秩序にパーツの種類が増えることを避けられるため、その分だけ車輪の再発明的なコーディングも避けることができます。

また、コードも含めてコンポーネントを定義しておくことで、開発の際にゼロからコーディングすることなく、十分にテストされたコードをコピー&ペーストで引っ張ってこれるため、開発効率が向上するとともに、バグの可能性を減らせます。

さらには、モバイル、タブレット、デスクトップなどマルチプラットフォームへの展開が行いやすくなるなど、プロダクトのスケーラビリティを向上させることができます。

このように、プロダクトの開発効率が向上した結果、営業施策やマーケティング施策をはじめとするPMFやGTM戦略に向けたアクションの検討時間をチームで確保しやすくなると言えるでしょう。実際にSparkboxの実験結果によると、「デザインシステムを活用することで、それを使えない場合よりも、47%早く実装のタスクを終えられる」ことが明らかになっているようです。

開発メンバー同士のコミュニケーションが活発化・効率化する

デザインシステムを構築する際、作成したコンポーネントや色に対して、共通言語を作成するために、デザイナーやエンジニア、プロダクトマネージャーなどプロダクトに関わるメンバーを交えて名称を与えることが一般的です。

また、コードも含めてコンポーネントを定義する際に、デザインデータのUIとコーディングしたUIのデザインを一致させるために、デザイナーとエンジニアは密にコミュニケーションを取ります。

このように、共通言語としてのデザインシステムを構築する過程で、開発メンバー同士のコミュニケーションは活性化し、対話を重ねる中でチームとしての一体感が醸成されます。また、デザインシステム作成後は、開発メンバー同士が同じ言語で話しやすくなるため、コミュニケーションコストを下げることができます（デザインシステムを作るだけでなくチームに浸透させることが重要ですが）。

さらには、新規メンバーを組織に迎える際のオンボーディングツールとしてもデザインシステムは機能します。組織の中で暗黙知的になりがちな既存デザインの意図やデザイン原則、設計方針などを「信頼できる唯一の情報源」であるデザインシステムとして形式知化しておくことで、新規メンバーのキャッチアップが効率化します。その結果、組織が拡大しても一貫性のあるプロダクトを効率的にユーザーへと届けやすくなると考えられます。

最後に

いかがでしたか？デザインシステムの適切な構築タイミングと構成要素は、事業フェーズや組織課題によりけりですが、プロダクトを設計し始めるタイミングである仮説検証フェーズにて、色やフォント、コンポーネントを使用パターンと共に定義し再利用しやすい状態を目標に小さく始めることは、本記事で紹介したように様々な効果をもたらします。

一方で、デザインシステムの構築は一晩にしてなされるものではないため、創業期の企業やデザイナー採用にゆとりのない企業にとっては、専門のデザインシステムチームを仮説検証フェーズから用意することは現実的ではないと思います。また、デザインシステムを小さく始めたいが、始め方がわからないという声もよく伺います。

グッドパッチでは、クライアントのチームに参加し、短期間でデザインシステムを構築したり、内製のアドバイザリー支援を行ったりと、各社のプロダクトフェーズ・チーム体制に合わせたデザインシステム構築支援を実施しています。チームにデザインシステム構築のナレッジがないという課題を抱える方に向けた、動画講座も無料で用意しております。ぜひご活用ください。

• 資料ダウンロード：開発効率を変革する、デザインシステム構築サポート
• アーカイブ動画：お悩みにその場で回答 デザインシステムが組織にもたらす効果