グロースハック実践編:デザイン編

23日 12月

グロースハックを実現するためのサイトのデザインをまとめてみました。
今日から、劇的にコンバージョンをあげて見たい方はすぐに使えるテクニックになっています。

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


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

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

次は、サイト内でユーザー動線の方向性を支持するようなデザインを検討してみてください。矢印というのは”ほかは無視していいですよ、ここを注目してください”とユーザーに訴えかける効果があります。
あなたのランディングページの中で最も重要なCall-to-Actionのエレメントに対してユーザーの視点が向かうように矢印を活用してみてください

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

Web制作のプロになろう!スキルハブの無料ビデオ

無料ビデオ12講座/84レッスンが受け放題!

わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。

無料申し込み期限: 9月22日 まで
募集人数: 100名(残りわずか)

今すぐ12講座を受講する(無料)