グロースハック実践編 デザインをハックする

メリハリが全てを決める　

世の中に何百万と存在するWebサイトの中であなたが作るサイトは突出していますか？
デザインが優れていることや、唯一無二のサービスを提供しているか？ということではありません。

ユーザーが訪問した最初の１０秒で注意を得て、次のアクション（Call-to-Action)につなげていることができていますか？

サービスやサイトをグロースハックするには、その入口のランディングページや、トップページで、あなたのサイトやサービスの価値を突出させるための演出をしなければなりません。

今回は、突出するための必須テクニックを紹介します。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

Picture worthies thousands words(百聞は一見にしかず)

Hiriseというスタートアップは最初、テキストのみで、サイトのランディングページを作っていました。パフォーマンスが思ったより伸ばすことができず、思い切って女性の写真をトップ背景イメージにしてみました。するとコンバージョン率が倍（プラス102%) に跳ね上がりました

その後も、様々な人物イメージでABテストを繰り返しました。数％の差ですがよりサービスのトーン＆マナーに適した人物イメージが見つかり、コンバージョン率を５％上げることに成功しました

2 Encapsulation（エンカプセレーション）

エンカプセレーションとは日本語でユーザーの視点を虜にすることがです。つまり、コンテナを用意して、その中にあるCall-to-Action (アクション動線）をハイライトするというテクニックです。

たとえば、下のアマゾンの商品ページはいかがでしょうか？アマゾンとしては、ユーザーに商品を購入してもらいたいので、1-click Buying ボタンをエンカプセルしています。このように、一番ユーザーにフォーカスしてほしいCall-to-Actionを強調することでコンバージョンを上げることができます。

配色と対照性の活用

色というのは、サイト訪問者に感情を呼び起こします。アマゾンでも活用されているオレンジというのは、ポジティブな感情を換気させる色と言われています。”あなたはこれを購入することは、素晴らしい選択肢です”といった感情を呼び起こします。ランディングページの中で、Call-to-Actionの部分にはオレンジ色を使ってみてください。きっとコンバージョンが今の色よりも上がるはずです。

例えば、下記のサイトなどは、緑色の時よりも赤色のほうがコンバージョン率が２１％も高かったという事例です どのようなサービスや商品を提供しているかによって、適切な色は変わってきます。あなたの提供するサービス・商品にあったトーンの色を見つけてください

方向性を示そう　

サイト内でユーザー動線の方向性を指示するようなデザインを検討してみてください。 矢印というのは”ほかは無視していいですよ、ここを注目してください”とユーザーに訴えかける効果があります。

あなたのランディングページの中で最も重要なCall-to-Actionのエレメントに対してユーザーの視点が向かうように矢印を活用してみてください

下記の事例では、矢印をつけることでコンバージョン率を９％上げることに成功した事例です 単純なテクニックですが、ユーザーをCall-to-Actionに導くのにとても有効なテクニックです。

ホワイトスペース 　

最後にホワイトスペースを県としてみてください。ホワイトスペースで囲むと囲まれたものの重要性が上がるという効果があります。あなたが重視したいCall-to-Actionのエレメントの周りに余分な余白を設けてみてください。

下記は文と文の段落に余白をもけることでコンバージョン率が9.4％上がった事例です

上記以外にも、コンバージョン率を高めるテクニックは色々あります。大事なのは、あなたのサイトのトーン＆マナーに適したメリハリテクニックを施すことです。ユーザーの母数が増えてきたら、上記のメリハリテクニックを実装して、効果があるかを是非試してみてください

グロースハッカーになるのに必要な３つのスキルとは？

グロースハッカーはお金（予算）を使わずに成長エンジンを構築するスキルが必要になります。そのために必要な三つのスキルを上げてみました。

① お金をかけないで高いユーザーエクスペリエンスを設計する力

ユーザーエクスペリエンスの構築力は、グロースハッカーだけではなく、これから価値のあるサービスや商品を生み出そうとする人には必須の能力でしょう。

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テストのフローを極める
グロースハック実践編 最強のツールＡＢテスト ③サイトを診断しよう
グロースハック実践編 最強のツールＡＢテスト ④ 改善施策の検証