グロースハック実践編 デザインをハックする
メリハリが全てを決める
世の中に何百万と存在するWebサイトの中であなたが作るサイトは突出していますか?
デザインが優れていることや、唯一無二のサービスを提供しているか?ということではありません。
ユーザーが訪問した最初の10秒で注意を得て、次のアクション(Call-to-Action)につなげていることができていますか?
サービスやサイトをグロースハックするには、その入口のランディングページや、トップページで、あなたのサイトやサービスの価値を突出させるための演出をしなければなりません。
今回は、突出するための必須テクニックを紹介します。
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
Picture worthies thousands words(百聞は一見にしかず)
Hiriseというスタートアップは最初、テキストのみで、サイトのランディングページを作っていました。パフォーマンスが思ったより伸ばすことができず、思い切って女性の写真をトップ背景イメージにしてみました。するとコンバージョン率が倍(プラス102%) に跳ね上がりました
その後も、様々な人物イメージでABテストを繰り返しました。数%の差ですがよりサービスのトーン&マナーに適した人物イメージが見つかり、コンバージョン率を5%上げることに成功しました
2 Encapsulation(エンカプセレーション)
エンカプセレーションとは日本語でユーザーの視点を虜にすることがです。つまり、コンテナを用意して、その中にあるCall-to-Action (アクション動線)をハイライトするというテクニックです。
たとえば、下のアマゾンの商品ページはいかがでしょうか?アマゾンとしては、ユーザーに商品を購入してもらいたいので、1-click Buying ボタンをエンカプセルしています。このように、一番ユーザーにフォーカスしてほしいCall-to-Actionを強調することでコンバージョンを上げることができます。
配色と対照性の活用
色というのは、サイト訪問者に感情を呼び起こします。アマゾンでも活用されているオレンジというのは、ポジティブな感情を換気させる色と言われています。”あなたはこれを購入することは、素晴らしい選択肢です”といった感情を呼び起こします。ランディングページの中で、Call-to-Actionの部分にはオレンジ色を使ってみてください。きっとコンバージョンが今の色よりも上がるはずです。
例えば、下記のサイトなどは、緑色の時よりも赤色のほうがコンバージョン率が21%も高かったという事例です どのようなサービスや商品を提供しているかによって、適切な色は変わってきます。あなたの提供するサービス・商品にあったトーンの色を見つけてください
方向性を示そう
サイト内でユーザー動線の方向性を指示するようなデザインを検討してみてください。 矢印というのは”ほかは無視していいですよ、ここを注目してください”とユーザーに訴えかける効果があります。
あなたのランディングページの中で最も重要なCall-to-Actionのエレメントに対してユーザーの視点が向かうように矢印を活用してみてください
下記の事例では、矢印をつけることでコンバージョン率を9%上げることに成功した事例です 単純なテクニックですが、ユーザーをCall-to-Actionに導くのにとても有効なテクニックです。
ホワイトスペース
最後にホワイトスペースを県としてみてください。ホワイトスペースで囲むと囲まれたものの重要性が上がるという効果があります。あなたが重視したいCall-to-Actionのエレメントの周りに余分な余白を設けてみてください。
下記は文と文の段落に余白をもけることでコンバージョン率が9.4%上がった事例です
上記以外にも、コンバージョン率を高めるテクニックは色々あります。大事なのは、あなたのサイトのトーン&マナーに適したメリハリテクニックを施すことです。ユーザーの母数が増えてきたら、上記のメリハリテクニックを実装して、効果があるかを是非試してみてください
グロースハッカーになるのに必要な3つのスキルとは?
グロースハッカーはお金(予算)を使わずに成長エンジンを構築するスキルが必要になります。そのために必要な三つのスキルを上げてみました。
① お金をかけないで高いユーザーエクスペリエンスを設計する力
ユーザーエクスペリエンスの構築力は、グロースハッカーだけではなく、これから価値のあるサービスや商品を生み出そうとする人には必須の能力でしょう。
UXデザインこちらのブログで詳しく書いていますが、プロダクトを作る前に、ペルソナ像を構築して、カスタマージャーニーマップを作り上げ、常に改善をしていくプロセスを身につける必要があります。
② お金をかけないで分析を行う力
グロースハッカーは、まずユーザーエクスペリエンスデザインを行い仮説を立てます。そして、その結果を分析力を駆使して、検証する必要があります。Google Analyticsなどの無料分析ツールは使いこなせるようになりましょう。
③ お金をかけないでプロダクトを改善力
グロースハッカーは、技術にもある程度精通している必要があります。
何が技術的に実現可能なのか、どういう改修・改善が、ローコストでハイリターンのかをすぐに見積もり、開発者に指示を与える必要があるからです。
Webサービスのグロースハッカーになりたい人は、最低限でも、
HTML, CSS, JavaScript, UX Design, Google Analytics, Illustrator/Photoshop
などの知識を身につけましょう。
グロースハッカーに必要なWebプロダクト構築力を無料で身につけよう
グロースハッカーに必要なWebプロダクト構築力を身につけたい方はこちらから受講できます
---------------------------------------------------------
h2. グロースハック Know-how ブログ:ビジネスを劇的に成長させよう
グロースハックを知ろう
グロースハックとは何か 最もホットな仕事 グロースハッカーとは?
グロースハックとは何か グロースハックに市民権を与えし者たち
グロースハックとは何か グロースハック成功の方程式
グロースハックをあなたの組織に導入しよう
グロースハック導入編 前提条件であるProduct-Market-Fitを検証しよう
グロースハック導入編 グロースハック文化を組織に組み込む
グロースハック導入編 Actionable Metrics(行動できる経営指標)を導入する
グロースハックを実践しよう
グロースハック実践編 デザインハック Less is More
グロースハック実践編 ”メリハリ”でデザインハックする
グロースハック実践編 最も影響力があるランディングページ
グロースハック実践編 最強のツールABテスト ① ABテストとは何か?
グロースハック実践編 最強のツールABテスト ② ABテストのフローを極める
グロースハック実践編 最強のツールABテスト ③サイトを診断しよう
グロースハック実践編 最強のツールABテスト ④ 改善施策の検証
まずは無料で14講座から始めましょう!
募集人数には制限があります。サインアップはお早めに。
10月20日まで