2022年3月10日

UI/UXデザイン

サービスブループリントとは? 基本からメリット、作り方まで徹底解説

本記事は、2022年3月10日に公開された記事を再編集し、2024年10月25日にin-Pocket編集部により情報を追記しております。

 

1980年代前半に生まれたサービス運用や設計を支援するツール「サービスブループリント」。日本では2000年代以降に普及し、サービスデザインやユーザーエクスペリエンス(UX)の重要性が高まった2010年代から活用が広がり始めました。

現在では、サービス開発や改善に取り組む企業にとって不可欠ともいえるこのツールについて、基本情報やメリット、カスタマージャーニーマップとの違い、作り方、作成時に便利なアプリやテンプレートなどをご紹介していきます。

1. サービスブループリントとは?

サービスブループリントの見本。最上段に記載されているユーザー行動に合わせて、どこでどんな対応が発生しており、貢献しているシステムは何かなどが一目瞭然となる。

 

サービスブループリントは、サービスがユーザーに提供されるまでのプロセスを、サービスの提供者やシステムの動きと合わせて視覚化したツールです。

分かりやすく言うと、イベント進行における役割分担表のようなイメージ

学校行事やイベント開催時によく使う「役割分担表」。この表があると、プログラムの流れと連動して誰が何をするかが一目瞭然です。

 

これに加えてサービスブループリントは、ユーザー行動に連動して起きる対応をカテゴリ分けしたり、各要素にかかる時間や繋がりを書き込んだりすることで、サービスの抜け漏れ、見直すべき点をより分かりやすくしてくれます。

サービスの運用・設計を行う際、サービス提供者側の論理でサービスやビジネスの設計をしがちなところを、ユーザーを中心に置いた状態で機能検討や業務プロセスが整理できるフレームワークと言えます。

作成を主導するのは主に、ユーザー体験の設計を行うUXデザイナーや、サービスの戦略立案と実行を担当するプロダクトマネージャーなど。ただし、作成には全ての要素が出揃う必要があるため、会議やワークショップなどの場が設けられ、関係者を集めて作業を進めるケースが多いです。

<参加者の例>

  • 顧客と直接やり取りする機会が多い、顧客接点部門の代表者
    • カスタマーサービス担当者
    • 営業担当者
    • フロントデスクスタッフ

 

  • バックステージでの業務プロセスや技術的な制約を把握している、バックオフィス部門の代表者
    • 技術部門の担当者
    • 運用部門のスタッフ
    • 物流担当者

 

  • 経営層・管理職
    • 部門責任者
    • プロジェクトマネージャー

 

上記は弊社で実際に作成したサービスブループリント。ユーザーとの接点が多いサービスだと、一画面におさまりきらないくらいの情報量になります。

 

作成タイミングとして多いのは、プロジェクトの初期設計時サービスのプロトタイピング実施時期。それぞれのタイミングで作成する目的は下記を参照ください。

<プロジェクトの初期設計時>

  • ユーザー視点を軸に、機能単位でシステムを整理して課題を洗い出す
  • 機能の漏れや不足を確認する
  • サービスへの理解を深めて議論のポイントを明確にする

 

<サービスのプロトタイピング実施時期>

  • 将来的なユーザー体験にフォーカスしてサービスを再検討する
  • プロトタイピング(試作品)に対するフィードバックを元にサービスの要素を視覚化し、ブラッシュアップを手助けする

 

2. カスタマージャーニーマップとの違い

サービスブループリントとよく混同されるのが、カスタマージャーニーマップです。

結論から言うと、サービスブループリントは、カスタマージャーニーマップを使った分析の後に活用するツールです。つまり、ユーザー体験の整理をするのがカスタマージャーニーマップ、カスタマージャーニーマップで見えたユーザー行動を参照してサービスの提供プロセスの整理を行うのがサービスブループリント、と言えるでしょう。

カスタマージャーニーマップのテンプレートダウンロードはこちら

もう少し詳しく説明します。

カスタマージャーニーマップは、ユーザーを理解するには有用なのですが、そこに留まってしまうと、現状の組織的な側面から捉えることや、部門内の思考性の違いを置き去りにして進めてしまいがちです。

「大きなイチゴのケーキを食べたい」というユーザー視点だけでは、その裏にあるビジネス上の課題に気付けない。

 

すると、理想のみが先行してしまい現実的には実行できないサービスができあがる、なんてことが起こり得るのです。

そんなとき、サービスブループリントを使用すると、ユーザー視点と組織の課題を両立して考えることが可能となります。

3. サービスブループリントを使用するメリット

サービスブループリントのメリットは、下記の3つ。

  1. ユーザー行動を基点に整理することで、UIやUXの観点も含めて本当に必要な機能が確認できる。
  2. サービスの構想を実際の具体的な業務にブレイクダウンしやすくなる。
  3. サービスの全体像を1枚の図で表せることで、チームのメンバー全員が同じ情報を共有できるため、みんなが同じ視点でサービスについて話し合い、考えることができる。

 

つまり、サービスブループリントは、ユーザーのニーズを満たすサービスを作るのに役立つだけでなく、チームの協力を促進し、より効率的に仕事を進めることができるツールなのです。

サービスブループリントがさらに効果を発揮するのは、他領域のステークホルダーが多く関わるプロジェクトのとき。フロントステージ(ユーザーから見える対応)とバックステージ(ユーザーから見えない対応)の関連性を明らかにすることで、機能要求がどのような流れになっているかを可視化できるため、自分たちの役割やタスクだけでなく、他のチームの活動や全体のプロセスとの関連性を理解しやすくなります

これにより、コミュニケーションが円滑になり、無駄や重複を避けた効率的なプロジェクト進行が可能になります。結果としてプロジェクトの成功率が高まり、全体の成果に対するチームの満足度も向上します。

4. サービスブループリントの作り方

出前のサービスを例に作成したサービスブループリントの記入例

 

サービスブループリントを作る時は、最初にユーザー行動から着手するのが基本です。その次に、フロントステージ、バックステージ、プロセスの順に書き加えていきます。そして最後に、各要素をつなぐ矢印、時間、感情、規則や指針、指標を書き加えます。

 

4つのメイン要素

それぞれの要素の詳細は下記の通り。

 

①ユーザー行動

サービスを利用する際のユーザーの具体的な行動や活動のこと。「カスタマーアクション」とも呼ばれ、時系列に沿って記載されます。

たとえばECサイトの場合、以下のような行動が記載されます。

  • 商品検索
  • カートへの追加
  • 決済情報入力

 

②フロントステージ

ユーザー行動に対応するサービス提供側の直接的な対応や活動、または接触できるサービスの部分を指します。具体的には、以下のようなものが含まれます。

  • 接客する店員の行動
  • WEBサイトのインターフェース
  • AIによるチャットサービス
  • オンラインストアでの商品検索、カートへの追加、決済手続きなど

 

③バックステージ

ユーザーから直接見えない、サービス提供の裏側で行われる活動や処理を指します。フロントステージのアクションをサポートする役割を担っています。たとえば以下のようなものが該当します。

  •    レストランでのシェフによる厨房での調理
  •    ホテルの予約システム管理
  •    ECサイトの在庫管理システム

 

④プロセス

サービス提供を支える内部の仕組みや基盤を指します。ユーザーからは直接見えない、バックグラウンドで動作する要素です。フロントステージやバックステージの活動を支える役割を果たします。具体的には以下のようなものが含まれます。

  •    基幹システム
  •    管理システム  
  •    データベース
  •    サプライチェーン
  •    在庫管理システム
  •    決済システム
  •    配送システム

 

ポイントは、それぞれのユーザー行動がどのような機能に結びつくのか詳細に記載すること。ここの記載が大雑把すぎると機能の整合性が取れなくなってしまう可能性があるため、詳細に考えていくことが必要となります。

 

5つのサブ要素

上記の書き込みが終わったら、矢印、時間、感情、規則や指針、指標を書き加えていきます。サブ要素は必須項目ではありませんが、書き込むことでより分かりやすくなります。

①矢印

矢印は、プロセスの順序やステップの進行方向を示します。矢印には3種類あり、各ステップをつなげプロセスの順序を明確にする「進行方向を示す矢印」(例:メニューを見る → 注文する → 支払う → 商品を受け取る)、ユーザー行動とフロントステージ、バックステージなどの間に上下の矢印を描く「ステップの連携を示す矢印」(例:お客さんが注文する ↑↓ 店員が注文を受ける)、あるステップの結果が次のステップにフィードバックされていることを示す「フィードバックを示す矢印」(例:商品を受け取った後に問題があった場合 → お客さんがクレーム → 店員が対応する)をそれぞれ意識して書き込むといいでしょう。

 

②時間

各ステップの所要時間や待ち時間を明示し、サービスの効率性を評価するための要素です。適切に書き込むことで、改善が必要な部分やサービス全体のスピード感を理解しやすくなります。所要時間、待ち時間、合計時間などを書き込むといいでしょう。

  • 所要時間の例:メニューを見る(2分)→ 注文する(1分)→ 支払う(1分)
  • 待ち時間の例:席に着く(待ち時間5分)
  • 合計時間の例:サービス全体の所要時間:20分

 

③感情

「感情」は、各ステップでユーザーが感じる感情の変化を示す要素です。サービス利用中の満足感、不安、期待、焦りなど、ユーザーの気持ちを視覚化することで、満足度向上やストレス軽減のための改善点を見つけやすくなります。たとえば、注文時の不安や、商品の受け取り時の嬉しさを表すことで、サービスのどこでポジティブな感情を生むべきか、あるいはネガティブな感情を減らすべきかを把握できます。

 

④規則や指針

シート内に「規則や指針」を書き込めば、サービスのルールやガイドラインを示し、品質や安全性の確保に役立ちます。安全基準、法的規制やコンプライアンス、品質基準、顧客対応のガイドライン、緊急時の対応指針などを書き込むといいでしょう。

 

⑤指標

最後に、各ステップでの目標数値、達成基準、品質基準などがあれば記入しておきましょう。サービスの成果や改善点を客観的に評価できます。たとえば、「注文対応時間を5分以内」「顧客満足度80%以上」といった具体的な数値を記載することで、サービスの質を評価しやすくなります。

 

関係者が集まって作る際の進行方法

上記のようにユーザー行動のみを記載したシートを準備し、参加者に付箋を貼り付けてもらう形で進めると作成がスムーズです。

 

関係者が集まってサービスブループリントを作る際は、

  1. 主導する人がユーザー行動を記入したシートを準備する
  2. 参加者に付箋を配る
  3. 付箋に各ユーザー行動に対応して発生する業務を記入してもらう
  4. 記入を終えた付箋をシートに貼ってもらう

 

という順番で進めるといいでしょう。

5. ビジネスデザイン用途で使用する際のポイント

サービスブループリントを利用するシーンはサービスデザイン時が主ですが、ビジネスデザインのシーンにも適用できます

まずはサービスデザインとビジネスデザインの違いを今一度おさらいします。

 

  • サービスデザイン:お客さんが使いやすく満足できる仕組みのデザイン
    (例:ユーザーがECサイトをどうやって便利に使うか)
  • ビジネスデザイン:事業におけるお金の稼ぎ方のデザイン
    (例:どうやってEC事業でお金を稼ぐか)

 

ビジネスデザイン用途で使用する場合は、作成時に意識する点や手順、有効な場面などが少し変わるため、そのポイントを表にまとめてみました。

ビジネスデザイン目的で作成する時は、提供するサービス自体の機能よりも、管理画面側、もしくはバックヤードの動きに重点を置くことがポイントになります。下記の3点を意識して作成を進めることで、より良いアウトプットが得られるでしょう。

  1. 該当するオペレーションがどうすればよりスムーズに流れるか
  2. どうすればユーザーに素早く価値を提供できるか
  3. どうすれば収益構造をより最適化できるか

6. サービスブループリント作成に便利なツール

サービスブループリントを作成する際に便利なツールを紹介します。テンプレートやアプリ、オンラインの図表作成ツールなどさまざまな方法があるので、自分に合うツールを選んで作成してみてください。

サービスブループリントに特化した機能を持つツールと、特化した機能はないものの作成に適したツールに分けてご紹介します。

 

サービスブループリントに特化した機能を持つツール

①Miro

オンラインホワイトボードツールで、サービスブループリントのテンプレートが提供されています。直感的なインターフェースで、チームでの共同作業も可能です。 iOSやAndroidアプリ、デスクトップアプリが提供されています。

 

②Figma

デザインツールとして知られるFigmaですが、サービスブループリントのテンプレートも利用できます。デザインとプロトタイピングを一体化して行えるのが特徴です。 

 

③FigJam

Figmaの姉妹ツールで、ホワイトボード型のインターフェースを持ち、サービスブループリントの作成に適しています。リアルタイムの共同作業が可能です。 

 

④Strap

サービスデザインに特化したツールで、サービスブループリントの作成をサポートします。ユーザーインタビューやカスタマージャーニーマップの作成も可能です。 

 

⑤Unprinted

サービスブループリントのテンプレートを無料で提供しているサイトで、FigmaファイルやPDF形式でのダウンロードが可能です。

 

⑥Lucidchart

フローチャートやダイアグラムを作成するのに最適なツールです。クラウドベースでの共同作業が可能で、ドラッグ&ドロップで簡単にサービスブループリントを作成できます。

 

サービスブループリントの作成にも使えるツール

以下に、サービスブループリントに特化した機能はないものの、作成する際に便利なツールをリストアップします。

  • Draw.io (diagrams.net)
  • Microsoft Visio
  • OmniGraffle (Mac)
  • Microsoft PowerPoint
  • Google Slides
  • Adobe Illustrator

7. サービスブループリントを活用して、より質の高いサービス設計を

通常、サービスはユーザーに見える範囲(フロントステージ)と見えない範囲(バックステージ)に分けられます。

そのためバックステージの様子はユーザーには見えず、バックステージ側もフロントステージ側の詳細がよく見えずにサービス設計並びに業務推進をしてしまう可能性があります。

しかし、サービスブループリントを利用すれば、ユーザーの行動を起点にしながらサービスの提供プロセスに主軸を置いて可視化を行うことができ、また、ユーザーの行動を起点に機能要求に落とし込むため、システムの流れや機能間の整合性を確認することができます

ユーザー視点と企業視点の両方を考慮することで、より包括的で実行可能なサービス設計が可能になり、結果として競争力のある優れたサービスを生み出すことができるのです。

サービス開発やビジネスモデルの検討においてもはや欠かせないツールとなりつつあるサービスブループリント。ぜひ活用して、より質の高いサービス設計に役立ててみてください。

 

▶︎in-Pocket編集部より
アイスリーデザインで実施しているUI/UXデザインにおけるサービスの特徴、手法や関連事例などについては、
こちらをご覧ください。

2020-12-24
新規事業という魅惑的な言葉の反面、残念ながら多くの新規事業が失敗に終わるのが現実です。一方でデジタルサービスの場合、市
2021-10-15
昨今、ビジネスモデルを可視化するためのフレームワークの使い方を説明する書籍やサイトを目にすることが多いのですが、皆さん

in-Pocket編集部

i3DESIGN

デザインとテクノロジーに関する情報を発信するアイスリーデザインのオウンドメディア、"in-Pocket"の編集部です。テクノロジー・デザイン関連の解説記事やビジネス戦略にまつわるインタビュー記事などを投稿しています。日々の業務における知識のインプットとしてぜひお役立てください!

おすすめの記事

Recruit

アイスリーデザインでは

一緒に働くメンバーを募集しています

採用情報はこちら矢印