ホットリンクのサイトリニューアル戦略資料を公開（8,000字の解説付）

最終更新日：2019年12月20日

どうも、ホットリンクCMOの飯髙です。

2019年12月16日に、弊社（ホットリンク）のコーポレートサイトをリニューアルしました。

このリニューアルは、BtoBに強いWeb制作会社である株式会社ベイジさんにお願いしました。目に見える変化はもちろん色々あると思いますが、ここでは見た目だけでは分からない、サイトリニューアルの検討プロセスや背景にある意図などを、ベイジさんが作ったサイト戦略資料を元に、詳しく解説していきたいと思います。

※全スライドはページの最後に掲載しています。
※当記事はベイジの枌谷さんとの共同制作です。
※提案資料は提案当時のものをあまり変えず公開しています。古い情報や誤字脱字などが含まれているかもしれませんが、ご了承ください。

旧サイトの課題とベイジさんを選んだ理由

リニューアル前の私たちのコーポレートサイトには、主に以下のような問題がありました。

• 何の会社かがうまく伝えられていない
• 顧客、IR、採用などのターゲットが曖昧
• 事業戦略とサイトがかみ合っていない
• ナビゲーションに一貫性がなく迷いやすい

特に大きな課題となっていたのは、コーポレートサイトとは別に突貫工事で制作したTwitterマーケティングのサービスサイトでした。本当にコーポレートサイトとは別サイトのままでいいのか、コンテンツやコピーはこれでいいのか、といった判断が私たちだけではできず、ただ課題意識だけがある状態でした。

そこで真っ先に声をかけたのが、web制作会社のベイジさんです。

BtoBマーケティングに強く、BtoBの情報を積極的に発信しているweb制作会社はベイジさん以外に存在せず、お願いするならベイジさんしかいない、と考えていました。個人的にferret時代から枌谷さんの記事はよく読んでいました。また、SNSマーケティングをビジネスにしている私たちにとっては、社長さんが積極的にTwitterを活用しているというのも大きなポイントでした。

ベイジさんにお声がけをした最初の顔合わせは30分ほどで終わり、すぐに具体的な契約の話をしました。それくらい、私たちの中ではベイジさん一択でした。

プロジェクトは、ベイジさんのやり方に私たちが合わせる形で進めました。サイト制作は私たちの専門領域ではなく、プロに声をかけたのならプロに任せた方がいい、というのが私たちの考えです。もちろん、事業の方向性に関することは私たちの意向を伝え、文章などには細かくチェックを入れましたが、サイトの戦略やコンテンツ、デザインの方向性、さらにはプロジェクト管理など、基本的にはベイジさんのやり方に任せていきました。

リニューアルの進め方

ベイジさんのプロジェクトは、大きく分けると「戦略フェーズ」「設計フェーズ」「制作フェーズ」の3つに分かれており、それぞれ毎にさらに細かくタスクが設定されています。一番細かい粒度まで落とすと140くらいのタスクが設定されているらしいですが、もう少し大まかにまとめると、以下のような感じです。

この中でベイジさんの最大の特徴といえば、戦略フェーズが分厚いことでしょう。自分たちの課題は自分たちで分かっていたし、自社で戦略を立てることもできました。それでもベイジさんにお願いしたのは、第三者の目線で私たちの課題を整理し、サイトリニューアルの方向性を明確にしてくれる、戦略フェーズがあったからでした。

この戦略フェーズの中を大きく分けると、「調査」と「戦略立案」に分かれます。

調査はヒアリングシートを使った一般的なヒアリングから、ペルソナやジャーニーを作るワークショップ、実際の私たちの顧客に会ってもらったうえでのユーザーテストやユーザーインタビュー、旧サイトのアクセス解析、専門家視点による競合サイトの分析など、定性/定量を組み合わせて、網羅的に現状を分析していきました。

それぞれに膨大な資料が存在しているのですが、簡単にサマリーすると以下のようなことが見えてきました。

これらのインプットを元に、次に行ったのが、「戦略立案」です。ここでは、調査で得られた情報からビジネス要件の詳細な整理を行い、サイトリニューアルの方向性を定めていきました。

この戦略立案は、大きく「事業特性」「顧客特性」「商材特性」「ブランド特性」の観点から分析していきました。

これらの切り口に分解することで得られた考察から、サービスを訴求するための共通ストーリー、コンテンツや機能、デザインのアイデアを導き出していき、具体的なサイトの設計図に落とします。

この戦略立案だけでも膨大な情報量であるため、ベイジさんの資料では最初に6ページほどにまとめたサマリーが用意されていました。

ここからは、「事業特性」「顧客特性」「商材特性」「ブランド特性」「ストーリー」について、もう少し詳しく解説していきます。

事業特性

今回のサイトリニューアルにあたっては、顧客やサイトに訪問するユーザーを特に重視していきましたが、しかしそれも、企業側の明確な意思や方針、あるいは事業の背景を反映させたものでないと、うまくビジネスにはつながりません。この「事業特性」の章では、そういった企業側の思惑を中心に、サイトが満たすべき条件を決めています。

まずこのページでは、ホットリンクが行っている様々な事業の整理を行っています。旧サイト上では並列に並んでいた事業について、「ソーシャル」「ビッグデータ」「マーケティング」を会社の大きな軸としたときに、どのように体系立てられるか、というものを整理してもらいました。

具体的には、サービス/プロダクト/データと、国内/海外の視点から整理し、その上で、今回のサイトリニューアルではTwitterマーケティング事業を重点的に訴求することが改めて明確にされています。

そしてこのページでは、ホットリンクのTwitterマーケティング事業が、どの市場を前提とするかが明確にされています。この市場定義はとても重要です。なぜなら、「マーケティング」をターゲット市場とするか、「デジタルマーケティング」をターゲット市場とするかで、同じTwitterマーケティング事業でも、訴求の仕方、マーケティングやセールスのストーリー、コンテンツやコピーの作り方が大きく変わるからです。

ここでは、デジタルマーケティングをターゲット市場としつつ、デジタルマーケティング全般を狙うのではなく、その中でもアーンドメディア領域を取っていく、定義しています。

続いて、アンゾフ・マトリクス、アドバンテージ・マトリクス、競争優位の戦略などの著名なフレームワークを用い、Twitterマーケティング事業の今後の方針や一般的な特性を整理したうえで、コーポレートサイトに反映すべき条件を洗い出していきました。

このように、事業特性からコーポレートサイトが満たすべき前提条件をまとめ、それを「アイデアの種」として、サイトの構成案やコンテンツ案に繋げていくというのが、戦略立案の目的です。

顧客特性

ここからは、ユーザーテストなどの結果も踏まえながら、改めてコーポレートサイトが対峙するユーザーや顧客についての条件を整理します。

特定の商材を売るためのサイトと違い、コーポレートサイトは、企業のすべてのステークホルダーが訪れる可能性がある、公共性の高いサイトです。

しかしながらこのステークホルダーすべてに応えようとすると、メッセージは抽象的になっていきがちです。かといって解像度の高いコンテンツをすべてのステークホルダーに向けて個別に用意するのは、コストの面でも時間の面でも現実的ではありません。

そこでここでは、コーポレートサイトに訪問するステークホルダーを洗い出し、それぞれに対してどんなコンテンツを用意するかを整理するとともに、顧客化する前の「見込み顧客」を特に重視すると改めて定義しています。

「見込み顧客」を重視するのがコーポレートサイトの基本路線としながらも、上場企業である弊社において、投資家の皆様はとても大事な存在です。

コンテンツ単位でいえば投資家の皆様が関係するのはIR情報だけですが、多くのステークホルダーが最初にランディングすると考えられるホームについては、見込み顧客と投資家を同列に扱い、投資家が訪問した場合速やかにIR情報に誘導できるような導線を配置するということが、このページでは定義されています。

一方、コーポレートサイトのメインターゲットである「見込み顧客」に関しては、ペルソナとカスタマージャーニーを作って、条件を整理していきました。

私たちのTwitterマーケティング事業でいえば、SNSに関する知見がそれなりにあって、自分自身で企業の選択あるいは意思決定できるタイプ（金井さん）と、SNSに明るくなく、責任者の指示で情報収集をしているタイプ（砂田さん）の、2種類の顧客パターンがあるため、ワークショップを行って2つのペルソナを作っていきました。

ペルソナに関しては「作るべきかどうか」という議論がよく起こりますが、今回のサイトリニューアルにおいては、例えばコピーを作る段階で、「この内容では砂田さんには理解されないのでは」といった話になって軌道修正するなど、長いプロジェクトの中で、「誰に届けるか」という軸をブラさないようにする役割を果たしていたように思います。

そしてこの2つのペルソナそれぞれに対して、カスタマージャーニーを作成しました。

架空のペルソナの行動を描いたカスタマージャーニーは、ユーザーの行動を正確に描いたものではありません。実際のユーザーはケースバイケースであり、カスタマージャーニー通りに正確に行動するユーザーなどいないでしょう。

しかしここで私たちが注目したのは、カスタマージャーニーが正確かというより、典型的な行動シナリオから有用なアイデアを導き出せないか、ということです。

例えば、SNSのリテラシーがあまり高くない砂田さんのカスタマージャーニーを描いてみると、最初の段階では、単なるホットリンクのTwitterマーケティング事業の紹介だけでなく、SNSやTwitterに関するそもそもの理解を促すコンテンツが必要、ということがわかります。

さらに砂田さんは一人では意思決定できないため、次のプロセスで上長への説明を行います。ここでは、SNSに詳しくない砂田さんに「ホットリンクはいいですよ」「Twitterマーケティングは良いですよ」と代弁してもらわなければいけません。そのため、砂田さんでも口に出せる分かりやすい言葉で、かつ、意思決定をする上長が関心を持って納得することをサイト上で語ってあげる必要がある、ということが見えてきます。

このように考えを整理することで、コンテンツのアイデアが生まれたり、コピーの方向性が明確になっていったりします。つまり、アイデア発想ツールとして、私たちはカスタマージャーニーを活用したわけです。

このカスタマージャーニーはあくまでユーザー視点での顧客行動をまとめたものですが、それと同時に、企業側視点で見た時の顧客行動をまとめたものとして、マーケティングとセールスのプロセスも整理しています。

サイトは、SEOという手段はあれども、リニューアルしたからといって突然アクセスが伸びたりすることは少なく、基本的に流入経路がないと機能しにくいメディアです。またその流入経路によって、役割も大きく変わります。

それをマーケティングやセールスのプロセスの中で、サイトの流入経路とサイトが引き渡す次のプロセスを明確にすることで、現実的な目標設定やコンテンツのプランニングを可能にしていきます。

そしてこのような顧客の行動特性は、最終的にはサイトの導線にも反映されていきます。その概要を図示したのがこのページです。

この考えを踏襲して、サイト内の構造やナビゲーションの方向性が決定していきます。

また旧サイトでは、Twitterマーケティングは別サイト化されており、そのことが良いのか悪いのか答えが出せずにいましたが、各種の調査や顧客特性の分析の結果、Twitterマーケティング事業はコーポレートサイトの中に内包させることにしました。

ホットリンクが行おうとしているマーケティング戦略を踏まえると、Twitterマーケティング事業に関心を持った見込み顧客は、「ホットリンク」の社名検索で流入することが多いと推測されます。そうすると、検索エンジンで優先的に表示されるのはコーポレートサイトのホームになります。そのためコーポレートサイトのホームに誘導し、コーポレートサイトの中にあるTwitterマーケティングに誘導したほうが、離脱リスク、発見されないリスクを低く抑えることができると考えたためです。

ユーザーテストにおいても、コーポレートサイトから独立展開した「Twitterマーケティング」の個別サイトは発見できない、LPに遷移してしまう、見つけられても何のサイトか戸惑っている、という傾向がうかがえたことも、この決断の理由の一つとなっています。

商材特性

事業特性、顧客特性と来て、次に今回のサイトリニューアルで最も注力したいTwitterマーケティングという商材の特性から、webサイトの方向性を導き出していきます。

まず、一般的なBtoB商材の特性と対比させて、ホットリンクのTwitterマーケティングという商材の特性を浮き彫りにし、サイトやコンテンツの基本的な方向性・方針を固めていきます。

また、事業特性でもホットリンクが展開している各事業を整理しましたが、改めてTwitterマーケティングに焦点を合わせた時の立ち位置と、ホットリンク全体の強みとTwitterマーケティングで一貫するメッセージを導き出します。

さらに、Twitterマーケティング事業のネーミングについても、ベイジさんより再考すべきだと議論を促す提案がありました。

旧サイトでは、Twitterマーケティング事業のサービス名称は「Twitterマーケティング」となっていました。しかしこの名称だと、サイトに到達した時に「Twitterマーケティング」という概念を説明するページなのか、サービスを紹介するページなのか区別がつかないということが、ユーザーテストなどで判明しました。また検索結果に表示された際にも、概念としての「Twitterマーケティング」を探しているユーザーがクリックし、サービスとしての「Twitterマーケティング」を探しているユーザーがクリックしない、というリスクもありました。

さらに、そもそも「Twitterマーケティング」「SNSマーケティング」「ソーシャルメディアマーケティング」のいずれを使うべきか、ということでも私たちは悩んでいました。

まず、「SNSマーケティング」と「ソーシャルメディアマーケティング」は厳密には異なる概念です。そして本質的には、プラットフォームを問わず、ソーシャルメディア上にUGCを発生させることを支援する私たちの活動は、厳密には「ソーシャルメディアマーケティング」に位置付けられます。しかし、ターゲットを含む一般の方の記憶構造の中では「SNSマーケティング」と「ソーシャルメディアマーケティング」の厳格な区別は行われておらず、さらに検索数でいえば、「SNSマーケティング」の方が圧倒的に優位です。

また、「SNSマーケティング」と言ってしまうと、FacebookやInstagramを含めて、すべてのSNSに対して手を打つような印象を与えますが、私たちがソーシャルメディアに刺激を与える手段として注力しているのは、データドリヴンで改善可能なTwitterであり、だからこそ、「Twitterでのマーケティングをどうにかしたい」という企業の方が、圧倒的に親和性が高いという商材特性があります。

このような現実と理想のはざまでの議論を踏まえたうえで、最終的には事業の正式名称を「Twitterマーケティング支援」としたわけですが、こういったサービスの根幹にまつわる検討も、コーポレートサイトをリニューアルする中で行われました。

さらにここからは、Twitterマーケティング事業が直面している市場の課題を整理し、バリュープロポジションキャンバスを使って、顧客の価値（ニーズ）と商材の価値（メッセージ）の整合性を取り、競合や新規参入者、代替品への対抗策として考えるべきことを整理していきました。

このように商材特性から見えてきた各種の要件もまた、コーポレートサイトのアイデアとして持ち込まれています。

ブランド特性

コーポレートサイトには、コーポレートブランドを色濃く反映する必要があるということから、ブランドの要件についても検討を行いました。

ホットリンクには、ミッション・ビジョン・バリューは定義されていましたが、コーポレートブランドからプロダクトブランドまでを一貫するようなブランド定義はされていなかったため、改めて整理していきました。

ブランドというと、カッコいいビジュアルとカッコいいメッセージでカッコよくする、みたいなことを想像しがちですが、大事なのは一貫性です。

より具体的には、まず大前提として、社会課題に対する宣言（ステートメント）があり、その宣言を実行できる企業文化やファクトと、それを組織のエンジンにするためのミッション・ビジョン・バリューがあることです。そこからブランドコンセプトを導き出し、コーポレートやサービスのメッセージやビジュアルに展開させていくことです。

今回はブランディング・プロジェクトではなかったので、これらをゼロから議論することはしませんでしたが、このようなブランドの上流の整理を、ベイジさんが持ついくつかのフレームワークを用いながら行いました。

ここで整理されたコンセプトやメッセージを基本方針としつつ、コンテンツやメッセージ、ビジュアルデザインを作りながら磨き込みをしていきました。

また、戦略の段階で、ビジュアルの基本的な方向性も議論していきました。

このビジュアルイメージの方向性を決めるうえで、面白いことがありました。社内で多数決を取ったところ、「モダンがいい」という声が圧倒的に多かったのですが、それに対してベイジさんより、以下のような疑問を呈する意見が出てきました。

• モダン系はデジタルマーケ系の企業の多くが選択しており、第一印象で埋もれやすい
• 最近は、先進的でインテリジェントなイメージのデジタル系の企業が、その言葉通りのビジュアルを選択せず、曲線や鮮やかな色、イラストを使った親しみやすいビジュアルを選択していることも多い（例：Googleなど）
• サイトからお問い合わせしたクライアントにホットリンクのメンバーが会いに行ったシーンまで想像した時に、クールで先進的なモダン系のイメージで、果たしてホットリンクとしての一貫性が生まれるか？

冒頭でお話ししたように、私たちの基本スタンスは「プロに任せる」でしたので、専門家であるベイジさんの意見を尊重し、社内では少数派だった「カジュアル系」が結果的には選ばれました。

この議論の後、いくつかのデザイン案を提案していただき、最終的には公開しているようなイラストベースのデザインに仕上がりました。今となってはとてもホットリンクらしいビジュアルイメージができあがったと満足しています。

ストーリー

さて、事業特性、顧客特性、商材特性、ブランド特性の観点から私たちのビジネスを分析し、そこからアイデアを抽出した上で、ベイジさんの戦略提案は、最終的にストーリーにまとめていきました。

このストーリーは、コンテンツやメッセージのベースとして、その後のコンテンツプランやコピーライティングに強い影響を与えていくものです。

戦略フェーズを終えて戦術フェーズに入ると、具体的なコンテンツやコピー、デザインの作り込みに入りますが、クリエイティブのディテールにフォーカスして検討していくと、視野が狭くなり、「そもそも何のためだっけ？」というところを忘れてしまいがちです。

ペルソナも同様ですが、このストーリーも同じく、検討を詳細化していっても焦点がブレないようにする、「軸」として作られるものです。

ストーリーの考え方はシンプルで、ダイレクトマーケティングなどで用いられる、人を動かすための基本セオリーを元に作っています。

事業特性、顧客特性、商材特性、ブランド特性の分析を踏まえたうえで、問題提起、結果、実証、信頼、安心の要素を埋めていきます。

このストーリーで定義された情報が、サイト内にコンテンツとしてきちんと格納されるように設計し、また、Twitterマーケティング事業のトップページやLPを作る際にも、これらの情報をベースに、ページ構成を考えていきます。

戦略後の工程

このような戦略を整理した後は、具体的な設計を進めてきます。

まずは、戦略提案の中で生まれたコンテンツや機能、デザインのアイデアをリストアップし、それらを取捨選択・統合しながら、サイトマップの形に落とし込んでいきます。

ここまでできるとページが見えてきますので、あとはワイヤーフレーム、デザイン、HTMLコーディングとさらに精緻に詰めていき、サイトの形を作っていきます。

ワイヤーフレームでは、主要な画面の基本構造を設計し、コンテンツの方向性を見出しレベルで決めていく工程です。ベイジさんはAdobe XDでワイヤーフレームを作っていますが、どういう意図でワイヤーフレームを作ったかの解説資料も添えられていました。

例えば、ホームだと、改めてホームを中心にした導線を説明しつつ、配置する各要素の解説を言語化しています。

こうして主要画面の設計を決めたら、具体的なUIデザインに進んでいきます。

戦略資料の「ブランド特性」の議論で、デザインの方向性は「カジュアル系」に決まったとはいえ、表現の可能性はそれでも無限にありますので、いくつかのプランの提示とともに、その意図や考えの説明も行われました。

こうしてデザインの方向性が決まったら、ワイヤーフレームの内容に合わせて、デザインを展開していきます。

こういったベイジさん側の作業と並行して、ホットリンク側で原稿を作るための元素材を用意していきました。それを元にベイジさん側でリライトを行い、サイトに埋め込んでいきました。

このように詳細に落ちていくほど、最初の戦略の検討からは遠ざかり、担当するメンバーも変遷していきますが、それでも一貫した戦略の意図とコンセプトを保ち続けるうえで、きちんと言語化するための検討や、言語化されたアウトプットは大事だなと、改めて実感しました。

さいごに

私個人としてだけでなく、社内メンバーもリニューアルしたサイトをとても気に入っています。リニューアルに関わってくれた社内メンバー、そして担当してくれたベイジさん、本当にありがとございました！

そして、BtoB企業でサイトリニューアルを考えている企業の皆様。お世辞抜きでベイジさんはめちゃくちゃオススメですよ！