昨今、デザインやプロダクト開発を外注ではなく、インハウス（内製）で行う企業が増えています。とはいえ、内製をする際のチーム運営は大変な部分も多いです。

例えば、プロダクト開発チームをマネジメントする際、次のような点で悩んだことはありませんか？

  • 社員デザイナーが組織に定着しない
  • 新たに入社したデザイナーが参照するデザインシステム（ドキュメント）が存在しない
  • プロダクトデザイン、システム開発においてUIの一貫性やルールが存在しない

このような課題に対して「じゃあ、ルールを作ればいいのよね」と、UIコンポーネントやスタイルガイドをはじめとする、デザインガイドラインを整えるといった施策に取り掛かる企業も多いのではないでしょうか。

しかし、ここで注意したいのは「ルールを作るにも基準が必要」ということです。現場のノウハウレベルでルールを整理すると、チームメンバーやプロダクトによって基準が揃わず、結果として「サービスによって、UIのルールやユーザー体験に一貫性がない」といった事態を引き起こしかねません。そのようにその場しのぎで作られたルールは長持ちしないでしょう。

デザインシステムを策定する際は、その拠り所や目的となる企業のミッション・ビジョンやサービスのプロダクトビジョンといった「思想」の部分に目を向けて、それら含めた「デザイン基盤」として整えていく必要があるのです。

Goodpatchが支援したあるプロジェクトでは、デザインとフロント開発において、効率的かつ統制のとれたUIデザインを可能にする基盤を整えました。

“デザインの基盤づくり” のアクションには、以下の手段が挙げられます。

  • ミッション・ビジョン・バリュー（MVV）を作成する
  • プロダクトビジョンを作成する
  • デザインガイドラインを作成する
  • デザインプロセスを作成する

これらは一つ制作すれば完結するものではありません。「一貫性」は、プロダクトの存在意義からサービスの体験を設計し、それに沿った表層のデザインを行うことで担保されます。

  • デザイン基盤の構成要素（MVV、プロダクトビジョン、デザインシステム）
  • デザイン基盤づくりの一歩めに意識すること

この記事では２点について事例を用いてご紹介します。

【関連記事】【事例あり】デザインシステムとは？作り方を5ステップで解説！事例や導入メリットも

デザイン基盤の構成要素（MVV、プロダクトビジョン、デザインシステム）

デザイン基盤は大きく３つの項目に分類されます。

  1. ミッション・ビジョン・バリュー（MVV）：サービスの存在意義の定義
  2. プロダクトビジョン：プロダクトのあり方（ビジョン）の定義
  3. デザインシステム・デザインガイドライン：プロダクトをユーザーへ届けるためのインターフェースの設計方針・運用方法

これらの関係を「デザインの５段階モデル※」に沿って整理すると、以下の位置付けになります。 (※ ５段階モデルの詳細については こちらの記事を参照ください。)
デザインの５段階モデル

以下では３つの項目がどのように機能するのか、どのような情報が整理されるのかについて概要をご紹介します。

① MVVについて

ミッション・ビジョン・バリュー（MVV）は、企業として共通で持っておきたい想いや価値観、その指針となるものです。ミッション・ビジョン・バリューは、単体で存在するのではなく、ひとつの世界観のもと相互につながります。
企業としてプロダクト/サービスをつくっていく上でのWhy（目的）に当たるものであり、その土台になります。

  • ミッション：何のために存在しているのか、果たすべき使命
  • ビジョン：企業やプロダクトの向かっていく方向性
  • バリュー：ミッション・ビジョンを達成するための行動指針

② プロダクトビジョンについて

プロダクトビジョンは、対象となるプロダクトが目指す実現したい姿であり、組織のビジョンやミッション、ブランドの指針となる価値観やサービスの提供価値を定義します。

プロダクトビジョンには、標準の定義があるわけではなく、さまざまな文脈に応じて異なる意味で使用される言葉ですが、本記事ではGoodpatchがプロジェクトで整理したプロダクトビジョンにおける構成要素について、大きく「ブランド体験（BX）・サービス・ユーザー体験（UX）」といった項目のもと紹介します。

また、このプロダクトビジョンは、企業の「ビジョン/ミッション」に目を向け、それらを少し具体化したり領域を絞るなど、連関をとりながら作成することで、企業全体に寄与しやすい強度のあるものを構築することができます。以下の記事も合わせてご覧ください。
参考：企業と事業のVisionの関連について

ブランド体験（BX）

この項目は、①コアの言語化、②振る舞いの定義、③ブランドガイドラインといった3つの要素から構成されます。

①コアの言語化
企業の「ビジョン/ミッション」に紐付け、サービスとしてのあるべき姿、どのような価値を届けるのかを言語化・可視化します。それにより、サービスコンセプトやブランドガイドライン、また、それらに紐付く体験設計など、すべての設計の指針となることを目指します。

②振る舞いの定義
サービスのらしさ（価値観）を言語化・可視化し、それらから落とし込んだときに、サービスとしてどのような振る舞いをするのかを示します。それにより、サービスのあり方を示すブランドガイドラインや、UI原則の土台として機能することを目指します。

③ブランドガイドライン
ステートメントやブランドブックなど、理解しやすく、また後にデザインを行っていく上でメンバーが振り返りやすい形で作成します。ブランドを象徴するロゴやカラーにおける、トーン&マナーやレギュレーション等を作成することで、一貫性のあるデザインを展開し続けるためのガイドになることを目指します。

サービス

この項目は、①リーンキャンバス、②サービスストラクチャー、③グロースサイクル、④サービスコンセプトといった4つの要素から構成されます。

①リーンキャンバス
ワークシートの9つの要素（顧客セグメント、ユーザーが抱える課題、バリュープロポジション、解決策、顧客流入元、収益の流れ、コスト構造、主要指標、競合優位性）を埋めることで、事業の価値構造を明らかにします。それにより、ユーザーとビジネスのバランスをまとめます。また、チームメンバーとコンセプトや課題の認識を合わせることを目指します。
参考：事業の価値構造を明らかにする「リーンキャンバス」の作り方

②サービスストラクチャー
ビジネスモデルの観点を取り入れたブランドアーキテクチャのような具合で、複数サービスを俯瞰したときに各サービスのつながりにより提供できることの構造を可視化します。それにより、デジタルプロダクトにおいて複数のアプリケーション(サービス・機能)を束ねる総合プラットフォームを設計する際に、プラットフォーム上のアプリケーション同士の関係性が破綻しないことを目指します。

③グロースサイクル
事業成長のための持続的な価値循環を作るための設計図を作成します。達成したい効果や価値をセルで表現し、セル同士をKPIとセットで繋ぐような、事業成長のための価値循環図を描くことで、事業成長に必要な観点の網羅を行うことを目指します。
参考：グロースサイクルの本質とは何か？

④サービスコンセプト
企業のMVVに紐づけて、プロダクト（サービス）としての価値観やふるまい、プロダクトの提供価値を明確にします。それにより、組織のMVVに紐付いた一貫したプロダクトづくり、組織としてのプロダクトづくりの土台となること、デザイン原則構築上の判断材料になることを目指します。

ユーザー体験（UX）

この項目は、①ペルソナ、②カスタマージャーニーマップ、③ユーザーシナリオ・ユースケース3つの要素から構成されます。

①ペルソナ
サービスやプロダクトを利用する顧客・ユーザーなどの人物像を明らかにします。それにより、施策方向性が正しいかどうかを議論する軸にするなど、顧客・ユーザー起点でのプロダクト開発を強化することを目指します。
参考：ターゲットユーザーはどんな人？よりリアルなユーザー像を作りあげるペルソナ法

②カスタマージャーニーマップ
ユーザーの行動と、それに紐付く感情・思考・不満(課題)の動きを時系列にまとめます。ユーザーの行動の全体像を可視化することで、今まで検討していなかった顧客との新たなタッチポイントを発見し、適切な情報や機能を届けやすくなることを目指します。
参考：なぜカスタマージャーニーマップを作るのか？その目的と作り方

③ユーザーシナリオ・ユースケース
ユーザーがどのような目的で行動し、その結果どのような反応や結果になるのかという一連の体験の流れをまとめます。それを元にユースケースとして、ユーザーを主語とした行動・用途を洗い出します。ユーザーの理解を深め、ユーザー起点の要件定義(機能アイデアやコンテンツへの転換)を行いやすくすることを目指します。

③ デザインシステムについて

デザインシステムは、対象となるプロダクトにとっての “良いデザイン“ を判断するための「基準」と、それを具体化するための「実行方法」を定義します。要素を定義し、サービスデザインに関わるチームメンバーの共通理解を図ることでデザインシステムは機能します。

良いデザインを判断する「基準」

①のMVV、②のプロダクトビジョンで定義した ”あるべき姿” を、ユーザーが利用するインターフェースに具体化するために必要な設計思想・ドメインに関する前提知識といった「デザインコンセプト」を共有します。これらの内容を基準にデザインの意思決定を行います。
デザインコンセプト

  • 設計思想
  • ドメイン知識
  • ビジュアルの世界観
  • etc

具体化するための「実行方法」
基準で定めた内容を、チームメンバーの誰もが継続的に実行していくための実行方法を共有します。デザイントークン、スタイルガイドといったUI制作の基盤となる「デザインガイドライン」と、開発を円滑に行うための「デザインプロセス」がここに定義されます。
デザインガイドライン

  • 概念モデル・ナビゲーション設計書
  • デザイントークン・スタイルガイド
  • UIコンポーネント
  • etc

デザインプロセス

  • Figma運用方針
  • プロダクト開発フロー
  • デザインガイドライン更新ルール
  • etc

参考：チームで把握できる！Figmaデータの運用方法

デザイン基盤づくりの一歩めに意識すること

前述したデザイン基盤を一度に整理するのは、プロダクト開発や改修の期限、人員リソースとの兼ね合いなどの理由で難しい場合があります。そのような場合、まずは何から始めると良いのか、Goodpatch流の「一歩の踏み出し方」の一例をご紹介します。

① 課題を発見し整理する

「組織にデザイン基盤がない、もしくは浸透できていない。チームで一貫性のあるプロダクトデザインがつくれていない。」などの課題感を持って一歩目を踏み出す際に、まず最も意識するべきことは、最初からデザインに関わるいろいろな部署のメンバーを巻き込むことです。
プロジェクトの背景や目的も話した上で各部署の視点から見える課題をヒアリングし、整理・構造化を行います。

② デザインの基盤に含まれる項目や要素の言語の統一を図る

前述の通り、下記の大きく3つの項目に分類されるデザイン基盤と、例えばプロダクトビジョンに含まれるサービスコンセプトなどの要素について、どういうものを指しているのかの認識合わせを行います。
例えば、「サービスコンセプト」といっても、メンバーそれぞれで思い描いているものがずれている可能性もあります。
この言葉の統一を行うことで、同じものを目指してチームが動けるようになり、また言葉の認識違いによる余計な議論をなくすことができます。

  • ミッション・ビジョン・バリュー（MVV）
  • プロダクトビジョン
  • デザインシステム・デザインガイドライン

③ デザイン基盤の項目や要素の現状を整理する

言語の統一を図った上で、どの項目や要素に過不足があるのかを可視化します。
それぞれの項目や要素について、すでに存在するのか否か、存在した場合そのまま使えるのか改修が必要なのかを、洗い出して表にします。

④ 課題とデザイン基盤の状態を紐付ける

①で洗い出した課題と③のデザイン基盤の現状を紐付けます。

⑤ ④を基にデザイン基盤の中でどこから手をつけるかを検討する

課題の中で特に優先的に解決すべきものが、どのデザイン基盤の状態により引き起こされているのかを理解し、デザイン基盤構築の優先順位をつけます。その優先順位にしたがって、基盤を構築していきます。
例えば、ユーザーシナリオをつくる際には、ペルソナの理解が必要など、デザイン基盤の中での相互作用も考慮して優先順位をつける必要があります。
意識すべきことは3つあります。

  • ①でも記載した通り、最初からデザインに関わるメンバーを巻き込んでデザイン基盤をつくることです。もちろん最初だけでなく、デザイン基盤をつくっていく過程においてメンバーを巻き込み、共通認識をつくることが必要です。
  • ②の言葉の統一は、時間がかかり遠回りに思えますが、メンバーの認識違いをなくし、むしろ無駄な時間を削減できます。この際に、どういう内容が含まれるのかと、どれだけの粒度で記載するのかの認識合わせも必要です。文字では難しい場合は、中身はいれずに内容や例をいれた想定イメージをつくることで認識合わせすることが有効です。
  • デザイン基盤だけをつくっていくのは（特にデザインシステム）困難です。実際にプロダクト/サービスをデザインしながらデザインシステムを構築するのが効率的です。

3番は特に注意が必要です。Goodpatchにも「デザインシステムをつくってほしい」という相談をいただくことがあります。しかし、デザインシステムだけを単独でつくることは難しいと感じています。実際にプロダクト/サービスをデザインしながら、デザインシステムも構築していくほうが効率的であり、質も向上します。

おわりに

最後までご覧いただきありがとうございました。みなさんがデザイン基盤作りの一歩を踏み出すヒントになれていれば幸いです。当プロジェクトで担当したクライアントさまからは「Goodpatchが構築したものを自分達で運用し成長させていく」という心強いお言葉をいただきました。デザイン基盤の構築はスタート地点でもあるので、チーム一丸となって成長させていくことが大切です。

執筆者紹介

UX Designer: ちゃんまい（米田）
パナソニック・P＆Gを経てグッドパッチに入社。リサーチが大好きで、探索型リサーチ「インサイトリサーチ」を提供し日々デザインリサーチを行う。

UX Designer: 梅ちゃん（梅下）
2022年UXデザイナーとしてグッドパッチに新卒入社。音楽とインターネットと甘い食べ物が大好き。

Ul Designer: きよえし（大島）
事業会社の経験を経て2022年5月Goodpatchに入社。サウナと音楽とスプラトゥーンが好き。

Share on

umeshita
音楽とインターネットと甘い食べ物が大好き。