はじめに
「この画面、なんとなく使いにくいんだよね」と言われたとき、どこから直せばよいか困った経験はないでしょうか。
個々の画面のユーザビリティには問題がない。API の設計も破綻していない。それでも体験全体として「散らかっている」と感じる。この違和感の正体を、本書は 「体験に語るべき物語がないから」 と言い切ります。
本書『プロダクトデザインのためのストーリーテリング』は、アリストテレスの『詩学』から始まり、ハリウッドの脚本術、ディズニーとピクサーの制作論、ゲームブックの分岐構造までを渡り歩きながら、それらをプロダクトデザインの実務手法へ翻訳していく一冊です。UX の本でありながら、扱っているのは終始 「構造」 の話で、設計やアーキテクチャに関心のあるエンジニアが読んでも得るものが多い内容でした。
書誌情報
| 項目 | 内容 |
|---|---|
| 書名 | プロダクトデザインのためのストーリーテリング ―「物語」で魅了するユーザーエクスペリエンスを生み出す |
| 原書 | Storytelling in Design（2019年） |
| 著者 | Anna Dahlström |
| 訳者 | 中橋 直也 |
| 出版社 | オライリー・ジャパン |
| 発行 | 2024年5月24日 |
| ISBN | 978-4-8144-0068-3 |
| 構成 | 全14章 |
著者の Anna Dahlström 氏はロンドンを拠点とするスウェーデン出身の UX デザイナーで、UX デザインスクール「UX Fika」の創設者です。2001年以来、ウェブサイトやアプリからボット、テレビ UI まで幅広く手がけてきた実務家であり、本書の出発点も、作家である父親との「良いストーリーとは何か」という会話にあります。
本書の主張を一言でまとめると
良いプロダクト体験には、良いストーリーと同じように 始まりと中間と終わり がある。
これに尽きます。そして本書が繰り返し警告するのは、私たちが日々の実務でその全体像を見失いがちだという点です。ページの要件、チケットの粒度、コンポーネントの粒度に潜っていくうちに、プロダクト全体が語るべきストーリーを定義するという工程が丸ごと抜け落ちる。この抜け落ちを埋めるための道具立てが、本書の14章分の中身です。
重要なのは、著者が「ストーリーテリングをマーケティングツールとして使え」とは一言も言っていないことです。目的は感動的なコピーを書くことではなく、相手といかにうまくつながるかを構造として設計すること にあります。
全体の構成
本書は大きく3つのブロックに分けて読むと理解しやすい構成になっています。
| ブロック | 章 | 扱うテーマ |
|---|---|---|
| なぜ物語なのか | 第1〜4章 | 歴史・構造・現代的文脈・感情 |
| 構造を定義する | 第5〜9章 | 幕構成・キャラクター・コンテキスト・可視化 |
| 実装に落とす | 第10〜14章 | ジャーニー・テーマ・分岐・画面・伝達 |
各章は末尾に必ず「サマリー」と「エクササイズ」が置かれており、読んだ内容をその場で自分のプロダクトに当てはめられるようになっています。著者自身も「画一的なフレームワークは提供しない」と明言しており、道具箱として使う本です。
第1〜4章：なぜ物語なのか
第1章 なぜストーリーテリングが重要なのか
ストーリーが情報伝達、道徳の共有、ブランディングの原型として果たしてきた役割を歴史的に追いかける章です。
エンジニアとして刺さったのは、伝統的なストーリーテリングと現代のプロダクト体験の決定的な差を指摘した部分でした。小説や映画では作者が出来事のひとつひとつをコントロールできますが、私たちが設計する体験では、ユーザーがどこから来てどこへ行くかをほとんどコントロールできません。
とはいえ、制御できないことと、偶然に任せてよいことは別 です。ここが本書全体を貫く緊張感になっています。
第2章 優れたストーリーの解剖学
本書のなかで最も「設計書」らしい章です。
アリストテレスが『詩学』で挙げた7つの黄金律が、そのまま UX の語彙に翻訳できると示されます。
| 原作 | 映画解釈 | UX解釈 |
|---|---|---|
| プロット | プロット | プロット |
| キャラクター | キャラクター／スター | キャラクター |
| テーマ／思想 | アイデア | テーマ |
| 話し方 | セリフ | 語法 |
| コーラス | 歌／音楽 | メロディ |
| 装飾 | プロダクションデザイン | 装飾 |
| 見せ場 | 特殊効果 | 見せ場 |
さらに、構造を与えるプロセスとしての ドラマツルギー と、アリストテレスの3幕構成が紹介されます。第1幕（設定）、第2幕（対立）、第3幕（解決）を、プロットポイントという転換点が接続する。この骨格が以降の章の共通言語になります。
この章にはストーリーテリングの5つのキーレッスンがまとまっており、特に次の2つは実務で使いやすいと感じました。
劇的な問い（Dramatic Question）
物語には中心となる問いがあります。「ロミオとジュリエットは一緒になれるだろうか？」「マーリンは息子を見つけられるだろうか？」といった、イエスかノーで答えられる問いです。
これをプロダクトに置き換えると、大きな問い（テレビを買えるか）と小さな問い（比較できるか、価格を確認できるか、配送を選べるか）の階層になります。ゴール設定は UX で日常的に行われていますが、「問い」という形にすると、障害物とサスペンスまで含めて考えざるを得なくなる のが良いところです。
ディズニーの「プラッシング」
ウォルト・ディズニーは、細部にこだわり改善し続ける姿勢を「プラッシング」と呼びました。本書ではその実例としてディズニーのマジックバンドが紹介されます。RFID と三角測量によって行列をスキップし、テーブルに料理が自動的に運ばれ、店員が名前を知っている。個々の要素は地味な技術ですが、摩擦の除去を体験全体で積み上げた結果として「魔法」になる という話です。
第3章 プロダクトデザインのためのストーリーテリング
伝統的なストーリーテリングが、オンデマンド化、参加型化、トランスメディア化によってどう変質しているかを整理し、それが AI、ボット、音声 UI、IoT、AR/VR、オムニチャネルといったプロダクト側の変化と対応していることを示す章です。
原書が2019年刊行なので事例の鮮度は落ちますが、「デザイン対象が触れるもの・話しかけるもの・見えないものの混合物になった」 という指摘は、むしろ今のほうが実感を持って読めます。
第4章 プロダクトデザインの感情的側面
理屈っぽい読者ほど飛ばしたくなる章かもしれませんが、ここが実は一番システム設計的です。
ドナルド・ノーマンによる感情の3レベルが土台になります。
| レベル | 対象 | 設計上の関心 |
|---|---|---|
| 本能レベル | 見た目・触感 | 第一印象 |
| 行動レベル | ユーザビリティ・機能 | 使えるか、学べるか |
| 反映（内省）レベル | 使用後の意味づけ | 生活への影響 |
そのうえで著者は、体験の各瞬間を4つに分類することを提案します。
- 不幸の瞬間 … アカウント作成、ログイン、決済、長いフォーム、404、エラーメッセージ
- 幸福の瞬間 … オンボーディング、完了確認、開封体験、さりげないアニメーション
- 中立の瞬間 … 認知負荷が低く、淡々と進む部分
- 内省の瞬間 … 意図的に摩擦を加えるべき部分
最後の「内省の瞬間」という概念が秀逸でした。データの提供、支払い方法の選択、サブスクリプションの解約、投稿や提出、配送先の確定といった、取り返しがつきにくい操作には、あえて摩擦を残す という設計判断です。
エンジニアの直感は「摩擦は悪、ステップは減らすべき」に寄りがちですが、本書は「中立の瞬間は幸福や内省の瞬間との対比を作るために不可欠」とまで言います。確認ダイアログをどこに置くかという議論に、はっきりした語彙を与えてくれる章でした。
第5〜9章：構造を定義する
第5章 ドラマツルギーによる経験の定義と構造化
本書の中核です。脚本の階層構造がそのまま UX に写像されます。
| 脚本 | プロダクトデザイン |
|---|---|
| 幕 | 体験の始まり・中間・終わり |
| シーケンス | ライフサイクルのステージ、主要なユーザージャーニー |
| シーン | ジャーニーのステップ、ページ／ビュー |
| ショット | ページ／ビューの要素、詳細なステップ |
そして プロットポイント（体験を前進させるイベントやトリガー）が、次の5種類に分類されます。
- トリガー … 通知、CTA、メール、メッセージ
- アクション … カートに入れる、ログイン、支払う、離脱する
- バリア … サインアップ要求、支払い情報の入力要求
- システムイベント … 確認メッセージ、エラーメッセージ
- ディライト … 予期せぬ喜びの瞬間
この分類は、状態遷移図やイベント駆動アーキテクチャを書いたことがある人ならすぐ馴染むはずです。実際、「バリア」と「システムイベント」を別物として扱う という切り分けは有用で、前者はビジネス要件由来の障害、後者はシステム都合の応答であり、対処のレイヤーが違います。
構造を定義する具体的手法として2つが紹介されます。
2ページのシノプシス法
各ステージに内容を示すタイトルを付け、それぞれについて短い説明文を書く。それだけです。「見栄えの良い文書である必要はない」と明言されており、箇条書きで構いません。各シーケンスに含めるプロットポイントは1〜2個までとし、それ以上になったらシーケンスを分割する、という粒度の目安まで書かれています。
インデックスカード法
付箋を使い、上段にステージ（シーケンス）、下段にプロットポイントを貼り、中央を大きく空けておく。その空白に、後からシーンを埋めていきます。
[ステージ1] [ステージ2] [ステージ3] [ステージ4]
(空白 — ここにシーンを埋めていく)
[プロット ] [プロット ] [プロット ] [プロット ]
コードもデザインカンプも書かずに全体像を検証できる、費用対効果の高いやり方です。ここは設計レビューの前段としてそのまま流用できると思いました。
第6章 プロダクトデザインにおけるキャラクター開発の活用
ペルソナの話……と思って読み始めると、良い意味で裏切られます。
著者はまず、プロダクトに登場する「キャラクターとアクター」を洗い出せと言います。
- ユーザー（主人公）
- 他のユーザー（コメント、いいね、投稿が体験に影響する）
- 友人、家族、パートナー、同僚（相談相手としての味方）
- システム（自社・外部）
- ブランド（トーン、ルック＆フィール、メッセージ）
- ボットと VUI
- AI
- タッチポイントとドライバー
- デバイス
- 敵対者
そのうえで、キャラクター／アクター／プロップの定義が与えられます。
- キャラクター … 体験において他と相互作用し影響を与える、人格化されたプレイヤー
- アクター … プロダクトが相互作用・依存する非人格化されたシステム
- プロップ … 使用されたり、アクションを助けたりする固定・移動可能な要素
この区別は、そのままドメインモデリングの語彙として使えます。「人格を持つか」「主体的にアクションを起こすか」で登場物を分ける という切り口は、エンティティと値オブジェクトの線引きに近い感覚があります。
そして最も面白かったのが 敵対者 です。本書は敵対者を「必ずしも目に見えたり物理的だったりしないが、ユーザーが達成しようとすることを邪魔することで存在する」ものと定義し、内的なもの（疑い）と外的なものを挙げます。
競合サービス、通信環境、時間のなさ、そしてユーザー自身の不安。これらを 明示的に一覧化して名前を付ける という発想は、要件定義でも脅威モデリングでもあまりやらない作業ですが、やってみると抜けが見えます。
キャラクター開発の道具としては、脚本術由来の キャラクター階層（メイン／脇役／サブプロット／一面的の4層）と キャラクター開発の質問票 が紹介されます。ジョン・トゥルービーの「作家が犯す最大の過ちは、キャラクターに多くの特徴を持たせて詳細化しすぎること」という指摘も引かれており、属性を並べたペルソナが役に立たない理由 が言語化されています。読者が気にかけるのは特徴ではなく、弱点とゴールだからです。
第7章 プロダクトの設定とコンテキストを定義する
演劇の「セット」と「ステージ」という語彙を使って、Jobs To Be Done をより能動的に表現し直す章です。オフラインとオンラインが混ざり合う以上、プロダクトを使う人が住む世界そのものを理解する必要がある という主張になります。
第8章 プロダクトデザインのためのストーリーボード
映画のストーリーボードを、成果物として、あるいはカスタマージャーニーマップやエクスペリエンスマップの一部として使う方法です。「購入で終わらせず、ライフサイクル全体と、正式に始まる前のユーザーのバックストーリーまで見る」という視点が示されます。
第9章 プロダクト体験の形を視覚化する
カート・ヴォネガットの「ストーリーの形」が登場します。縦軸に不幸〜幸運、横軸に時間を取って物語を1本の曲線として描く、あの図です。
- 穴に落ちた男（Man in Hole）
- ボーイ・ミーツ・ガール
- 悪化の一途（From Bad to Worse）
- どちらが上？（Which Way Is Up?）
- 天地創造ストーリー / 旧約聖書 / 新約聖書 / シンデレラ
これをプロダクト体験に適用し、エクスペリエンスゴールを軸にした感情曲線 として描く。ハッピージャーニーとアンハッピージャーニーを並べて可視化すると、「どこで感情が落ちるか」「どこで小さな調整をすべきか」が見えるという話です。
パフォーマンス計測のグラフを読むのと同じ感覚で、感情の起伏を1本の線として扱えるのは、定性的な議論を持て余しがちなエンジニアにとって扱いやすい形式だと感じました。
第10〜14章：実装に落とす
第10章 メインプロットとサブプロットをユーザージャーニーとフローに適用する
サブプロットを3つに整理します。
- 代替ジャーニー … 同じ目的地に至る別ルート（検索から来る人／ソーシャルから来る人）
- アンハッピージャーニー … 望ましくない結果への分岐
- 分岐ジャーニー … 途中で枝分かれするもの
「2次ジャーニーがプロダクトに現実味を加える」という一文が印象的でした。ハッピーパスだけを設計した体験は、実装したときに必ず破綻する という、エンジニアにはおなじみの教訓の UX 版です。
第11章 プロダクトデザインにおけるテーマとストーリー開発
スウェーデン語の 「Röd tråd（赤い糸）」 ── 全体を貫く一貫した線 ── がキーワードです。
著者はここで、デザインが素晴らしくてもプロダクトが平坦になる原因を、実装の不備ではなく コンテンツの計画・作成・ガバナンスの欠如と、デザインチームとコンテンツ担当者の断絶 に求めています。
「デザインカンプは美しいのに、実データを入れた途端に破綻する」という現象に名前を付けてくれた章でした。第11章の冒頭の見出しがそのまま「実際のコンテンツを使う」なのも示唆的です。
第12章 CYOA ストーリーとモジュールデザイン
個人的に最も収穫が大きかった章です。CYOA（choose-your-own-adventure、ゲームブック形式）の分岐パターンを、Sam Kabo Ashwell の分類に沿って8つ紹介し、それぞれをプロダクト体験に対応づけます。
| パターン | 構造 | プロダクトでの対応 |
|---|---|---|
| タイムケイブ | 広く分岐し再結合しない | 多くのコンテンツが到達されないサイト |
| ガントレット | 中心の糸が1本、枝は行き止まりか復帰 | タスクベースのアプリ |
| 分岐とボトルネック | 分岐して定期的に再合流、フラグに依存 | パーソナライズされたプロダクト |
| 冒険（QUEST） | 密なノードのクラスタが最終的に合流 | 多数のエントリーポイントを持つ体験 |
| オープンマップ | ノード間を可逆的に移動 | 探索型・ソーシャル系プラットフォーム |
| ソーティングハット | 序盤で大きく分岐し後で合流 | オンボーディングでの振り分け |
| フローティングモジュール | 位置に依存しないモジュール | 文脈依存で挿入されるコンポーネント |
| ループとグロー | 繰り返しながら状態が変化 | 習熟に応じて変わる体験 |
そして CYOA から抽出される主要原則が、分岐する物語、中心的な糸、ストーリーノード、相互接続性、フラグ（STATE TRACKING）、フローティングモジュールの6つ。
ここまで来ると、もう完全に状態管理の話です。「フラグがなければガントレット、フラグがあれば分岐とボトルネック」という判定基準は、ステートレスなフローとステートフルなフローの区別 そのものですし、フローティングモジュールは文脈依存でレンダリングされるコンポーネントに他なりません。
著者はこの章で「ページやビューではなく、構成要素に焦点を当てる必要性」を説きます。ダイナミックパブリッシングを前提にするなら、コンテンツはページ単位ではなくモジュール単位で設計されなければならない。コンポーネント指向のフロントエンド開発をやってきた人間には、体験設計の側から同じ結論に到達しているのが面白く読めます。
そして本章の結論は、潔いものです。
ユーザーがどのように相互作用するか、何を選択するかはユーザーに任されており、私たちにできる最善のことは、コントロール不能な状態を受け入れること。
第13章 シーン構造をワイヤーフレーム、デザイン、プロトタイプに適用する
作家 Ali Luke によるシーンの要素の定義を、プロダクトデザインに翻訳します。
| シーンの要素 | ページ／ビューでの対応 |
|---|---|
| キャラクター | アクションを起こす（起こさない）メインユーザー |
| ダイアログ | ブランドメッセージ |
| 周辺描写 | 意思決定を助ける文脈情報・付随コンテンツ |
| 対立または複雑さ | 緊張のポイント |
| 感情の高まり | 最高点から始めず、画面内で盛り上げる |
| エンディング | 強い終わり |
| 次のシーンへのリンク | 1次CTA・2次CTA |
「すべてのページやビューには必ずストーリーがある」という前提のもと、そのページの目的、初回訪問者と再訪問者それぞれのニーズ、望ましい滞在時間、画面サイズごとの優先順位、小さい画面から大きい画面へのコンテンツの流れ方を定義していきます。
なかでも「そのページに費やすべき望ましい時間を定義する」という項目は珍しい観点でした。滞在時間は計測対象になりがちですが、設計時に目標値として決める という発想はあまり見かけません。
第14章 あなたのストーリーの発表と共有
社内やクライアントに対して、自分の設計をどう語るかという章です。
「ストーリーの『誰』と『なぜ』を特定する」「オーディエンスの反応にその場で適応する」といった内容で、設計レビューや技術選定の説明にそのまま応用できます。データの背後にある正しいストーリーを特定して伝える、という節もあり、数字を出すだけでは人は動かないという当たり前を、構造として扱っています。
エンジニアが読むとどこが効くか
読み終えて整理すると、本書の道具は次のように既存の設計語彙に対応づけられます。
| 本書の概念 | 近い設計上の概念 |
|---|---|
| 幕・シーケンス・シーン・ショット | 階層的な分解、粒度の統一 |
| プロットポイント | 状態遷移のトリガー、ドメインイベント |
| キャラクター／アクター／プロップ | 登場物のモデリング、責務の分離 |
| 敵対者 | 障害要因の明示、脅威モデリング |
| 赤い糸（Röd tråd） | 設計の一貫性、アーキテクチャの意図 |
| フラグ（STATE TRACKING） | 状態管理、セッション、パーソナライズ |
| フローティングモジュール | 文脈依存コンポーネント |
| インデックスカード法 | 実装前の全体設計レビュー |
| アンハッピージャーニー | 異常系、エラーハンドリング |
とりわけ 「実装の細部に入る前に、全体の物語構造を定義する」 という主張は、そのままアーキテクチャ設計の話です。本書は繰り返し「モジュール、レイアウト、コードに没頭する前に時間をかけろ」と言います。裏を返せば、その工程を省略した結果として生まれる歪みを、我々は実装フェーズで受け止めている ということでもあります。
注意点
正直に書いておくと、本書には以下の癖があります。
- 原書が2019年刊 のため、AI・ボット・音声 UI まわりの事例は古く感じます。訳者まえがきでも触れられていますが、本質は普遍的な設計原則にあると割り切って読むのが良いです。
- 具体的なコードやツールの話は一切出てきません。 明日から使えるライブラリを探している人には向きません。
- やや冗長です。 ストーリーテリング側の説明が丁寧すぎて、UX への翻訳部分が待ち遠しくなる箇所があります。各章末のサマリーだけ先に読み、興味を持った章を精読するという読み方でも十分に機能します。
- 画一的なフレームワークは提供されません。 これは著者が意図的にそうしていると明言しており、道具箱として自分のプロジェクトに合わせて加工することが前提です。
こんな人におすすめ
- 個々の画面や API は問題ないのに、体験全体がちぐはぐだと感じている人
- ハッピーパス以外の設計を、体系立てて洗い出したい人
- ペルソナやジャーニーマップを作ってはいるが、実装につながる実感がない人
- 状態管理やコンポーネント設計を、UI 実装ではなく体験設計の側から捉え直したい人
- 設計の意図を他人に伝えるのが苦手な人
逆に、実装レベルのパターン集を求めている場合は期待と合いません。本書は 体験の設計図をどう描くか の本です。
おわりに
本書を読んで一番変わったのは、機能一覧を眺めるときの視点でした。
これまでは「この機能は必要か」「この画面は削れるか」という足し引きで考えていましたが、いまは「この体験の始まりはどこで、中間で何が起きて、どう終わるのか」「この操作は不幸の瞬間か、内省の瞬間か」と考えるようになりました。同じ機能一覧でも、構造として見るか、集合として見るかで判断が変わります。
アリストテレスから2300年経っても、良い構造の条件は変わっていないようです。出来事が偶然に始まったり終わったりせず、因果の連鎖を持つこと。それは物語でも、プロダクトでも、そしておそらくコードでも同じなのだと思います。
長く手元に置いて、プロジェクトの節目に該当章を開き直すタイプの一冊でした。