心を動かす資料には、理由がある。 〜B2B商談をブーストする“ストーリー設計”〜

BtoBの商談を左右するのは、資料の見栄えやスペックの羅列ではありません。顧客が動くのは、その商材が“何をもたらすのか”という意味が伝わったときです。

本セミナーでは、アマナでコミュニケーションプランナーを務める稲田貴雄、UXプランニングディレクターの藤岡裕佑、ビジネスプロデューサーの尾崎友香の3名が登壇。「思い」を基点に情報を再構成するストーリー設計と、営業現場で活きるサイト体験のつくり方を、実例とともに解説しました。

「思い」をベースにストーリーを組み立てる

藤岡裕佑（以下、藤岡）：まずは一般的なB2B企業のカスタマージャーニーを見てみます。下図の黄色部分で示したコーポレートサイトやブランドサイト、製品サイトといった自社サイトは、オフライン・オンラインのタッチポイントの中でも非常に重要であり、商談に影響を与える部分といえます。

稲田貴雄（以下、稲田）：コーポレートサイトは、どうしても似た構造になりがちで、どこか血が通っていない印象になってしまいます。本来、企業が伝えたいのは数字や構造の奥にある「心を動かすストーリー」であるはずです。そのためには、サイトを構成する情報を「思い」から組み立てる必要があります。

手順は3つです。まずは、WHY・HOW・WHATを言語化する。次に、それをもとにストーリーマップを作る。そして最後に、サイトマップに落とし込む。順を追って解説します。

Why・How・Whatは視座高く言語化する

稲田：今回は、架空の産業用ロボットメーカーを想定し、サイト設計を考えていきましょう。産業用ロボットの市場は成熟化が進み、自動化の次を模索する転換期にあります。こうした状況では、機能やスペックだけでは差別化が難しいため、まずは顧客の頭の中に作られる「好意的に差別化された認識（コア）」を考えなければなりません。

稲田：自社は、顧客にとって多様な選択肢の中のただの一社にすぎません。この前提に立った上で、What（スペック）、How（提供価値）、Why（志・存在意義）の順で整理します。

尾崎友香（以下、尾崎）：実際にフレームに当てはめてみたのですが、どうしても説明的になってしまって、抽象度を上げるのが難しいと感じました。

稲田：スペックや一般的な提供価値は「分かりきっているもの」として省略してしまって構いません。先ほど書かれたWhyの部分を起点に、そこからHowやWhatを積み上げていくと、視座が上がり、ストーリーとしてのまとまりが出てきます。

例えば今回の産業用ロボットの例で整理すると、以下のように考えられます。

尾崎：キャッチコピーをつくるような感覚が近いと感じました。異なる業界の人にも理解される抽象度が必要なんですね。

稲田：そうですね。専門的な知識を持つ人だけではなく、初めて企業を知る人にも伝わる表現にすることが重要です。

Why・How・Whatをストーリーマップに落とし込む

稲田：コーポレートサイトの情報設計を考えるにあたっては、このWhy・How・Whatを基点にします。Why（志・存在意義）はトップページ、How（提供価値）はAbout、What（スペック）はProductsの情報に対応すると捉えてください。

Why・How・Whatは「抽象から具体へ向かう情報体系」です。これを縦にブレイクダウンしていくことで、サイト全体の構造が見えてきます。

例えば先ほどの架空の産業用ロボット企業で考えると、Why には「人がより人らしく生きるために」など、企業が掲げる大きな方向性が入ります。How は「現場に思考する力を与える」といった価値の裏付けとなる考え方、What は「リアルタイム品質フィードバック」といった具体的な機能や特徴が当てはまります。

こうして整理したものが、ストーリーマップの基本形になります。

稲田：これらをサイトマップに落とし込むと、Whyは企業紹介やトップメッセージ、ブランドストーリーなどに相当し、Howは事業紹介・技術紹介、プロジェクト紹介になります。Whatは製品サービス紹介や活用事例の領域です。会社概要・IR・採用・問い合わせのような一般情報は別軸でまとめると整理しやすいでしょう。

「選ばれる」Webサイトの体験価値をどう設計するか

藤岡：Webサイトは今や営業基盤、オンライン上の営業マン的な存在になっており、顧客へのアプローチにおいても非常に有効なタッチポイントです。

Webサイトではエンゲージメントやコンバージョンのような定量指標はもちろん重要ですが、それだけでは営業基盤として機能しきれません。定性的なサイト体験、つまり「どう受け取られるか」の部分も合わせて設計することで、商談につながる土台がより強くなるでしょう。

では、「選ばれる」ためのサイト体験とは何か。ここで一つ、フレームワークとして「UXハニカム」を紹介します。

藤岡：UXハニカムとは、図に記載の6つの視点を満たすことで、ユーザーが「価値がある」と感じる状態をつくるという考え方です。

これを先ほどのストーリーマップと重ねると、「役に立つ」は What、「使いやすい」「探しやすい」は How、そして「信頼できる」「アクセスしやすい」「好ましいは」 Why に紐づきます。Webの接点でも、この三層がきちんとユーザーに示せることで、サイト体験を向上させ、価値あるWebサイトと認識してもらえるようになると考えられます。

事例：キーエンスのサイト設計

藤岡：このUXハニカムの構造を満たしながらWebサイトの体験設計を実装している事例の一つに、キーエンスさんが挙げられます。

キーエンスさんの自社サイトでは、会社情報のページでブランドメッセージを明確に打ち出し、Whyを伝えています。Howでは強みやユーザーのメリットを整理し、Whatには事例や技術資料、商品ページが豊富に用意されています。情報コンテンツから商品ページへ、または会社情報から商品ページへと、複数の導線で自然に遷移できるような構造です。遷移した先の商品ページも、単にスペックを並べるのではなく、関連情報やサポート、事例を配置することでユーザーの行動を自然と促すつくりだといえます。

藤岡：さらに、UXハニカムの視点でキーエンスさんのサイトを分解してみましょう。

まず「役に立つ」の観点では、多様な事例や用途別情報、ダウンロード資料が豊富に揃っています。

藤岡：「使いやすい」「探しやすい」では、検索機能がどのページからも使えたり、カテゴリー軸や用途軸で情報を探せたりと、ユーザーフレンドリーな設計です。さらに、Web接客ツールを活用しユーザーを迷わせないような導線設計がなされています。

藤岡：「信頼できる」では、お客様の声などの第三者視点を掲載。「アクセスしやすい」では検索流入の広さや、触れたコンテンツから確実に製品へ誘導する構造が見られました。「好ましい」に関しては、行動を促すボタンの色分けや、会社ページとそれ以外のページでメリハリを付けるなどで伝えたい世界観を表現している点など、細かいところまで配慮が行き届いている印象でした。

成果につながるサイト体験設計のポイント

藤岡：サイトの体験設計におけるポイントを下図の通りまとめました。

藤岡：主要項目としてはまず、ストーリー設計ができているかどうかが、ユーザーの行動につながるかを大きく左右するという点です。Webサイトは資料ダウンロードだけを目的とするのではなく、サイト内の回遊を促すことも重要です。その視点でみると、ストーリー設計がきちんとできていれば、ユーザーの行動アクションにつながりやすいサイトが設計できると考えます。

次に、目的の情報へ迷わずたどり着けるように、UXハニカムの視点を改めて見直すこと。

そして、サイト全体の導線とアクションの一貫性を持たせることも重要です。このような情報設計によって、ユーザーのサイト体験の価値が高まります。

加えて、検索機能やタグ、目的別メニュー、Web接客ツールなど、ユーザーの行動を補助する仕組みを活用することで価値をさらに高めることができます。ニュースや取り組み紹介など、情報発信と営業機能をどう連動させるかも重要な考え方だと思っています。

稲田：ストーリーというと企業理念のような大きな話と思われがちですが、実はそうではなくて、「今ここで働いている人たちのリアル」を言語化することが大事だと考えています。そのリアルは顧客にも求職者にも見られる部分なので、そこを可視化することが大切です。

抽象度を少し上げて、企業と社会の接点をどこに置くのかを言語化できると、その企業が理解されやすくなりますし、採用や他業界からの注目にもつながります。そこに藤岡さんの情報設計がうまく組み合わさることで、より効果が最大化されると思っています。

ストーリーを営業資料・採用・Web全体へ拡張

尾崎：本日の内容はストーリーマップのコーポレートサイトへの落とし込みが中心だったと思います。ただ、稲田さんの Why・How・What の考え方は、日々の営業資料の作成や、採用サイト単体を作るときにも流用できるのかなと思っていて。抽象化やブレイクダウンの仕方に、用途によって違いが出たりするのでしょうか？

稲田：基本的には、どんな営業資料にも先ほどの考え方は当てはまると思っています。むしろ、すべてのコミュニケーションをその考え方で統一しちゃったほうが一貫性も出ますし、やったほうがいいですね。

尾崎：本日のタイトルにもあるように、BtoB商談で自社の魅力をストーリーとして伝えていく。そのための設計思想として活きるということですね。

稲田：はい。自社サイトの役割は、営業ツールそのものなんです。まずは顧客に見つけてもらわなきゃいけない。見つけてもらって、展示会などでコミュニケーションしたときに、思い出してもらえる情報が必要になる。だからリマインドとなるアーカイブや資料を置くことも重要です。

さらに、受注してもらうための導入説明やデモも必要ですし、受注後も中長期のパートナーとして課題提起を続けていく必要がある。そういう営業フェーズ全体を、サイト上でちゃんと支えられるかどうか。そこがポイントだと考えています。

ストーリー設計が現場の設計判断を支える

尾崎：藤岡さん、普段Webサイトの設計をされる立場として、稲田さんのストーリー設計があると、構築しやすいと感じる場面ってありますか？

藤岡：全体を見直す場合と部分だけを見直す場合で関わり方は変わりますが、新規や潜在層を獲得したいときは、まずWhyの現在地をどう見せるかが重要になります。そこから肉付けして画面設計に落としていきます。

逆に、製品ページなど具体側から広げたい場合は、What から Why に逆算して設計すると、より立体的な体験になります。そういう意味で、このフレームワークはとても効いてくると感じています。

尾崎：一方で、なかなか設計まで意識してインプットするのは難しいなとも思うんですが、稲田さんのフレームなら、具体から抽象を自社で考えることもできそうだなと感じました。

稲田：絶対にやってはいけないのは、サイトマップから作り始めることです。形式から入ると、その形式を超えることはできません。

尾崎：形式や予算に縛られて具体化しすぎると、本来伝えたいことが伝わらなくなるということですよね。

稲田：その通りです。前提や前例に縛られると超えられません。真面目な方ほど「できていないことは言うべきじゃない」と考えがちですが、理想のイメージと現実の両方をサイトで押さえられていれば、理想は語っていいんです。

尾崎：先ほど自分でもやってみたときに、Whyでは「できていないことを書いていいのかな」と悩みました。Howも、実現できていない価値をどこまで言っていいのかと。

稲田：Whatの部分でリアルが抑えられていれば嘘にはならないんですよ。Whyで理想を語って、How・Whatで現実との接点を示す。この構造があれば問題ありません。

尾崎：Whatは具体なので、確かに嘘のつきようがないですね。すごくよく分かりました。本日はお二人とも、ありがとうございました。