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

「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。

14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。

（先着限定、5月3日まで）

» 「司令塔」側に回る14日間プランを見る

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

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

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

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

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

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