ブログ記事一覧

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

Contrast

メリハリが全てを決める 

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

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

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

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

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プロダクト構築力を身につけたい方はこちらから受講できます


グロースハック Know-how ブログ:ビジネスを劇的に成長させよう

グロースハックを知ろう 

グロースハックとは何か 最もホットな仕事 グロースハッカーとは?
グロースハックとは何か グロースハックに市民権を与えし者たち
グロースハックとは何か グロースハック成功の方程式

グロースハックをあなたの組織に導入しよう 

グロースハック導入編 前提条件であるProduct-Market-Fitを検証しよう
グロースハック導入編 グロースハック文化を組織に組み込む
グロースハック導入編 Actionable Metrics(行動できる経営指標)を導入する 

グロースハックを実践しよう

グロースハック実践編 デザインハック Less is More
グロースハック実践編 ”メリハリ”でデザインハックする
グロースハック実践編 最も影響力があるランディングページ
グロースハック実践編 最強のツールABテスト ① ABテストとは何か?
グロースハック実践編 最強のツールABテスト ② ABテストのフローを極める
グロースハック実践編 最強のツールABテスト ③サイトを診断しよう
グロースハック実践編 最強のツールABテスト ④ 改善施策の検証

Webdev top2

田所 雅之

シリコンバレーと日本で起業経験があります。
アメリカ・アジア・日本の起業家/投資家との
ネットワークをもっているのが強み

Skillhubの購読にはFacebookが便利です

Twitterでお得な情報配信中


コメントするにはユーザー登録が必要です。ユーザー登録するとすべての講座を受講する事ができます。

ユーザー登録(無料)