インバウンドなWebサイト

「インバウンドな」Webサイトとは? 第1回では、ユーザーの購買プロセスからWebコンテンツを設計する方法について理解を深めました。ユーザーのライフサイクルにフォーカスし、適切なタイミングで最適なコミュニケーションをとることが重要でしたね。ユーザーと接触する「タッチポイント」には、ソーシャルメディア、ブログ、CTA(コール・トゥ・アクション)ランディングページ、Eメールなどがあります。今回は、それぞれのタッチポイントのフローについて考えてみましょう。

 なぜフローの設計が重要なのか

  • 経験(Experience)は瞬間的なものではありません。常に起こっていることです
  • 私たちは、何度も同じタスクを繰り返すことに時間を費やしています
  • タスクやフローは設計されるべきものです

インバウンドフロー

あなたのWebサイトやタッチポイントで、ユーザーは意図するフローどおりに行動しているでしょうか。

  • ソーシャルフロー
    ソーシャルメディアの投稿を見て、Webサイトを訪れ、次のステップに進む
  • ブログフロー
    ブログ記事を読んで、他に興味のある記事を見つけて、ブログを購読する
  • ランディングページフロー
    ランディングページを見て、コンテンツをダウンロードして、コンテンツを読んだり利用して、次のステップへ進む
  •  購入フロー
    製品の調査をして、金額をチェックして、ケーススタディを読み、担当者に問い合わせる

次に、ブログページとランディングページの構成とフローについて考えてみましょう。

ブログフロー

ブログフロー

ユーザーは、ソーシャルメディア、Eメール、検索、他サイトからのリンクからブログ記事へアクセスします。興味のある関連記事を読んで、ブログの購読者になってもらったり、さらに次のステップへと進んでもらうためには、どのようなページ構成がよいでしょうか。

ブログ記事ページ構成

まずは、タイトルやメインビジュアルでユーザーの注意を引くこと。ブログ記事の冒頭では共感されるエピソードを書いたり、疑問を投げかけるようにしましょう。ユーザーの興味を引くことに成功したら、一気に下まで読み進んでもらいます。記事の下にはCTA(コール・トゥ・アクション)を設置して、次の行動へと促します。

ブログの悪い例1:本文を遮るレコメンド

ブログフロー悪い例

これは悪い例です。まだ記事を読み終える前に、別のブログ記事へ誘導するレコメンドボックスが表示されています。しかも、本文の一部が隠されています。

ブログの悪い例2:本文を読む前のポップアップ

ブログフローの悪い例2

これも悪い例。ページを開いた瞬間にポップアップでブログの購読案内が表示されます。記事を読む前に購読するかどうかは決められませんよね。

ブログの良い例:ユーザーを引き込む構成

ブログフローの良い例

A List Apartのブログは良い例です。本文を読んでいる間に気を散らすバナーや案内は表示されません。本文の下には、ブログ購読の案内、関連記事の紹介、コメント欄を設置するのがよいでしょう。

ビジュアルの割合

ブログ記事ページにおけるビジュアル要素の割合について考えてみましょう。補助的な役割であるサイドバーに大量のビジュアルを使わないことがポイントです。

ビジュアルの割合

サイドバーの良い例:余分なビジュアル要素がない

ビジュアルの割合の良い例

HubSpotcopybloggerの良い例です。大きな見出しと目を引くメインビジュアルと比較して、サイドバーに気をそらすようなビジュアル要素はありません。

サイドバーの悪い例:本文より目を引くバナー広告

ビジュアル悪い例

広告バナーが目立ちすぎて、本文に集中できません。

 ブログフロー設計のポイント

  • ブログの目的は、本文を読むことである
  • 次のアクションを起こす前に、ブログ記事を読み終えてもらうこと
  • 関連記事と人気記事のリンクは効果的である
  • ブログ記事の下には明確で関連性のあるコール・トゥ・アクションを配置する

ランディングページフロー

ランディングページフロー

ユーザーは、ブログ記事、ソーシャルメディア、Eメール経由でランディングページにアクセスします。サンキューページでは、さらに関連するコンテンツを提供しましょう。ユーザーを次のステップに進めるために効果的なランディングページの構成について考えましょう。

ランディングページ構成

ランディングページの良い例

良い例LP

ランディングページフロー設計のポイント

  • ランディングページの目的はオファー(提供するコンテンツ)の価値を伝えること
  • 価値を伝えないものは取り除く
  • CTAはわかりやすく簡潔に
  • パーソナライズされているとさらに良い

フォームがパーソナライズされている例
LPのパーソナライズ例

このランディングページにアクセスしたユーザーが既に顧客だった場合は、フォームの入力を省略できるようになっています。

次のステップに進むように設計する

私たちがユーザーに期待するフロー

ユーザに期待するフロー

私たちは、ユーザーがすぐに購入したり、資料請求をしたり、問合せの電話をしてくることを期待してしまいます。

ユーザーが実際にたどるフロー

img_inboundFlow1

しかし、ユーザーは購入に至るまでに、自身の問題点を見つけ出し、解決方法を探し、製品やサービスについての情報を集めたりと、いくつかのステップを経て最終目的にたどり着きます。

まとめ

  • 最終目的地ではなく、次のステップにフォーカスする

インバウンドマーケティングでは、焦って先を急ぐのではなく、ユーザーのペースに合わせて情報を提供していきましょう。

※参照元:JOSH PORTER氏によるセッション「HOW TO DESIGN AN INBOUND WEBSITE」(INBOUND 2013


インバウンドマーケティング