StoryBrandフレームワークを使用してより良いホームページを設計する

ホームページは店の窓のようなものです。 彼らは消費者に、ビジネスが何をしているのか、誰がビジネスを運営しているのか、そして少なくとも実際の販売、情報、娯楽のいずれであるかを問わず、それが提供する製品やサービスのヒントを与える必要があります。

ショーウィンドウのように、ホームページのデザインは、人々をより深く見るように誘惑するか、訪問者の注意を引くことができない（またはさらに悪いことに、積極的に彼らを追い払う）可能性があります。 ブランドストーリーを明確に伝えることは、UXデザイナーが人々をサイトにとどめ、ホームページを超えて探索するのに十分なエンゲージメントを維持するために使用できる1つの方法です（StoryBrandフレームワークはこのための優れたロードマップを提供します）。

ホームページの目標は何ですか？

ランディングページの目標は訪問者をコンバージョンさせることであり、ホームページの目標は訪問者をブランドに引き付け、問題の解決策を提供することです。 効果的に行われた場合、ホームページの訪問者は顧客、潜在的にはリピーターになることができます。

ホームページは、分析と、そのデータに基づいてパフォーマンスを改善したマーケティングおよび設計チームのおかげで、過去数十年で急速に改善されました。

1993年に600のWebサイトしか存在しなかったとき、Webサイトのトラフィックを測定する唯一の方法は、訪問者の数をカウントするサーバーログでした。 次にヒットカウンターが登場し、最終的には、ユニークな訪問者、ページビュー、バウンス率などの洞察を提供する、より包括的な分析スイートが登場しました。

その分析データを使用して、UXデザイナーは、召喚状の配置を最適化し、サイトの速度、A / Bテストを改善し、ビデオを使用して訪問者を引き付け、高品質の画像を使用して人々の注意を引き付け、メッセージングツールを組み込んでホームページ。 しかし、これは消費者からの忠誠と信頼を保証しますか？

ホームページをデザインする際の3つの一般的な落とし穴

ホームページを作成する際に、企業、および拡張機能の設計者は、次の3つの主な落とし穴に遭遇します。

1. 彼らは重要なことに焦点を合わせていません。 彼らは人々に彼らのサービスや製品の特徴についてすべて話します。 人々はこれを気にしません。 彼らは、ビジネスが彼らの問題を解決し、彼らの生活を改善することを知りたがっています。
2. 企業はメッセージを明確に伝えていません。 ChartbeatのTonyHaileが言うように、Webサイトは訪問者の注意を引くのに15秒もかかりません。
3. 彼らは誰の問題も解決しない悪い製品を持っています。 この場合、デザイナーがビジネスのためにできることはあまりありません。

StoryBrandフレームワークとは何ですか？

一部の企業が信じているように見えますが、ロゴはブランドと同じではありません。 それからは程遠い。 ブランドは、ブランドが存在する理由の背後にある約束です。

人々は、合理的および感情的な理由の両方で、あるブランドを別のブランドよりも選択します。 強力なブランドメッセージングは​​、ブランドが作成する個々の製品だけでなく、ブランド自体への忠誠心を生み出すことができます。 その目的を達成するには、明確で一貫性のあるメッセージが不可欠です。 ブランドを競合他社と一線を画すのは、ブランドのストーリーです。

ストーリーテリングは、起業家が売り込みやソーシャルネットワーキングで投資家を誘惑するために広く使用されています。 Appleのような企業は、明確でシンプルなストーリーテリングの力を理解し、すべての業務に統合しています。 彼らはそれが彼らについてではないことを知っています。 それは彼らの顧客についてです。

StoryBrandフレームワークは、企業が最も強力なメッセージを簡単かつ明確に伝達できるようにするために、ドナルドミラーによって作成されたストーリーテリング方式です。 Millerは、著書 『 Building a Story Brand 』で、次のように述べています。「顧客は、ブランドではなく、ストーリーのヒーローである必要があります。 これは、驚異的に成功するすべてのビジネスが理解している秘密です。」

クライアントでStoryBrandを使用する方法

それが小さな会社であろうと数百万ドルのブランドであろうと、クライアントは彼らの顧客を混乱させることは彼らにお金がかかることを理解しなければなりません。 StoryBrandの公式を通じてメッセージを明確にすると、ミラーが言うように、「思考を整理し、マーケティングの労力を減らし、混乱をなくし、競争を恐れ、最終的にビジネスを再び成長させることができます」。

ミラーは、StoryBrandの作成を、脚本のストーリーを書くことと比較しています。 彼はそれを7つのプロットポイントに分解します。

何かを欲しがっているキャラクター（ウェブサイトを使用している人）は問題（彼らの必要性）に遭遇し、次に彼らに計画を与え（次のステップを示します）そして彼らに行動を呼びかけます（行動を促すボタン）ガイド（ビジネス）に会います、これはサクセスストーリー（彼らは製品を購入する）をもたらし、失敗を回避するのに役立ちます（彼らが購入しない場合に何が起こるかを思い出させます）。

この構造は、ほぼすべての成功した映画で認識できます。 また、企業とその顧客にも適用できます。 次のステップは、クライアントがこの構造に従ってブランドストーリーを書くことです。

1. キャラクター：顧客は常にストーリーのヒーローであり、ブランドではありません。 通常はUXの調査とユーザーテストを通じて、顧客がブランドに何を求めているかを理解するのはUXデザイナー次第です。 彼らは、財源の節約、時間の節約、ソーシャルネットワークの構築、ステータスの獲得など、人々を駆り立てる欲求に焦点を当てる必要があります。
2. 問題があります：StoryBrandアークの悪役はキャラクターの問題です。 その問題を擬人化し、会社の製品は顧客がそれを打ち負かすために使用できる武器のようなものであることを理解することは有用です。 企業は外部の問題の解決に集中する傾向がありますが、顧客は内部の問題の解決策を購入します。 人々には3つのレベルの対立があります。
   -外部（ほとんどの企業は外部の問題を解決しようとします）
   -内部（欲求不満、脅迫、不安など）
   -哲学的（なぜこの話が重要なのですか？）
3. そしてガイドに会います：ガイドはビジネスまたはブランドです。 顧客は問題の世話をする誰かを必要としています。 ブランドに対する彼らの認識は、彼らの信頼にとって非常に重要です。 2つのことを伝える必要があります。
   -共感（顧客が感じるかもしれない痛みの理解を示す）
   -権限（ブランドが彼らを助けることができるという顧客の自信を与えるでしょう）
4. 誰が彼らに計画を与えるか：ビジネスは顧客に彼らが次に何をする必要があるかを示します。 顧客は、簡単な行動計画が示されるまで、購入するかどうかまだわかりません。 UXデザイナーは、顧客のために正確な次のステップを詳しく説明することができます。 また、製品やサービスに関連する懸念に対処することで、顧客の不安を和らげることもできます。
5. そして、彼らに行動を呼びかけます：効果的な行動への呼びかけは、購入や申し込みを容易にします。
6. それは彼らが失敗を避けるのを助けます：顧客にとって何が危機に瀕していますか？ このブランドから購入しない場合、彼らは何を失うでしょうか？
7. そして成功に終わります：この特定の行動がどのように彼らの人生を変えることができるかを顧客に伝えてください。 彼らが製品を購入した後の彼らの生活がどのようになるか、そしてその決意が彼らにどのように感じさせるかを彼らに示してください。 ストーリーテラーがストーリーを終わらせる3つの確実な方法は、キャラクターに次のことを許可することです。
   -勝利の力または地位
   -誰かまたはそれらを完全にする何かを見つけます
   -彼らを完全にする何らかの形の自己実現を体験してください

ホームページでStoryBrandフレームワークを使用する方法

ホームページは決してビジネスに関するものであってはなりません。 それは潜在的な顧客に関するものでなければなりません。

初デートのように、印象は重要であり、目標は興味を生み出すことです。 UXデザイナーは、どのコンテンツが含まれ、どのように配置されるかについて戦略的である必要があります。 前のセクションで説明したフレームワークに従うと、設計者は適切なメッセージが適切な場所に配置されるようになります。

単純に聞こえるかもしれませんが、ホームページを設計する際に留意すべき重要な要素は5つだけです。

見出し

魅力的な画像と組み合わせて使用​​されることもある見出しは、ホームページの上部に配置されます。 ほとんどすべての場合、見出しは顧客中心であり、ブランドが彼らに利益をもたらす何かを持っていることを訪問者に示す必要があります。 見出しは次のいずれかである必要があります。

• メリットを顧客に伝える
• 訪問者が抱えている問題を特定し、ブランドが問題を解決できることを彼らに安心させます
• ビジネスが何をしているのかを明確かつ簡潔に説明してください

権威を示して信頼を築く

ビジネスを顧客の問題のガイドおよび解決策として位置付けることが不可欠です。 信頼を築く技術を習得したUXデザイナーは、この特定のブランドが問題の正しい解決策であることを人々に納得させるのに時間がかかります。 彼らはこれを行うことができます：

• ブランドを推薦する重要な顧客からの推薦状を含む
• ブランドが協力している企業のロゴを表示する
• ユーザー数、トランザクションなどに関する特定のデータを表示します。
• 賞と称賛、出版された作品、メディア出演、および同様の成果をフィーチャー
• チームまたは会社の本社の画像を表示する

アクションの呼び出し

ホームページの訪問者との感情的なつながりを構築することは、訪問者を顧客に変えるための最初のステップです。 その感情的なつながりができたら、それは取引を封印するための行動の呼びかけ次第です。

行動を起こすには2種類あります。

1. 直接の召喚状は、購入または登録の準備ができていることを知っている人を対象としており、「購入」、「登録」、「開始」などの言葉が含まれています。 これらのCTAをクリックすると、購入者はフォームに直接移動して取引を完了できます。
2. 暫定的な行動の呼びかけは、まだ購入の準備が整っていない訪問者を対象としています。 コミットする前に、より多くの時間と情報が必要になる場合があります。 これらは、「詳細」、「無料で試す」、または「連絡を取る」タイプのボタンの形式で提供されます。

一部の召喚状では、2つを組み合わせたり、並べたりする場合があります（多くの場合、[今すぐ購入]ボタンと[詳細]ボタンのペアとして表示されます）。

魅力的な画像

ホームページのコンテンツがどれほど深刻であるかに関係なく、StoryBrandフレームワークはハッピーエンドを要求します。 画像を選択するときは、画像の中には「これまでにない幸せ」な感覚を与えるものもあることに注意してください。

画像は訪問者の感情、特に幸せな人々の画像にアピールします。 幸せな人の写真を見せることは、人々が購入した場合に自分の幸せな結末がどのようになるかを想像するのに役立ちます。

短いテキスト

テキストが少ないほど良いです。 多くの消費者は長いテキストブロックを読まないので、ブランドメッセージをできるだけ少ない単語で伝えるのが最善です。

UXデザイナーは、クライアントが最も簡単な方法でストーリーを共有できるように支援する必要があります。

成功したホームページは重要な質問に答えます

成功したホームページは、5秒未満で訪問者の関心を捉えることができます。 そこから、ホームページにアクセスするときに人々が（多くの場合無意識のうちに）自問する3つの質問に答えるのに約15秒かかります。

• 彼らは何をしますか？
• 彼らはどのように私を助けることができますか？
• 購入または契約するには何をする必要がありますか？

UXデザイナーは、StoryBrandフレームワークを使用して、興味を即座に捉え、それらの質問に効果的に答えるホームページを作成できます。 それは、デザイナーとブランドの両方に成功への明確な道を提供します。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

Toptal Designブログでさらに読む：

• すべてのトレンドは価値がありますか？ Webデザイナーが犯す最も一般的なUXの間違いトップ5
• 効果的なランディングページをデザインする方法
• 変換するように構築–ランディングページデザインのベストプラクティス
• eコマースウェブサイトデザインの究極のガイド
• 情報アーキテクチャの包括的なガイド