12 外部リンクとアイコン活用術|黒背景セクションの作り方

執筆者 | 高コンバージョンファネル

こんにちは、下坂栄里子です。

この記事では、有料商品への案内セクションを黒背景で作りながら、ボタンの外部リンク設定と、地味に便利な「アイコン」要素の使い方を解説します。

有料商品への案内セクションを作る

2列のレイアウトで、左側に画像、右側にテキストとボタンを配置します。テキストは「有料商品をお探しですか?」のように、少し大きめの文字で目を引くようにします。

アイコン要素の選択画面。要素追加パネルの「コンテンツ」欄に「アイコン」の項目がある

ボタンには「27,800円で動画講座を受講する」のような文言を入れます。もし自分が販売している別の商品があれば、そちらへ誘導することもできます。

ボタンを外部URLにリンクさせる

ボタンを選択し、「注文」の項目から「移動先」を選ぶと、他のURLに飛ばす設定ができます。ここに、動画講座を販売しているページ(外部のチェックアウトページなど)のURLを貼り付ければ、ボタンを押した人をそのまま購入ページへ誘導できます。

客単価を上げるアップセルの設計ロジックについてはこちらの記事でも詳しく解説しています。

背景を黒にすると文字が見えなくなる問題

完成した黒背景のセクション。「27800円で動画講座を受講する」ボタンと、下部に白いアイコンが配置されている

セクションの設定にある「背景」をONにして黒めの色を選ぶと、雰囲気のあるセクションになります。ただし、このままだと元々黒だったテキストが背景に埋もれて見えなくなってしまいます。該当のテキストを選択し、設定から文字色を白に変更しましょう。

便利な「アイコン」要素

ClickFunnelsには「アイコン」という要素があり、これがとても便利です。要素を追加するパネルから「アイコン」を選ぶと、アイコンピッカーが表示され、さまざまな種類のアイコンから好きなものを選べます。選んだあとは、アイコンの色を背景に合わせて調整しましょう(今回は黒背景なので白に変更しています)。矢印やチェックマークなどをアイコンとして自作するのは大変ですが、この機能を使えば一瞬で用意できます。

最後のCTAセクションを仕上げる

ページ最後のセクション。左に見出し、右に「サインアップするにはクリック」ボタンが配置されている

最後に、左側に見出しテキスト、右側にボタンを配置したセクションを作ります。文字の大きさを調整すれば、ページの締めくくりとなる最終的なCTA(行動喚起)セクションの完成です。

まとめ

有料商品への案内セクションは、画像+テキスト+ボタンの2列構成で作れる

ボタンの「移動先」設定で、外部の販売ページへ誘導できる

背景色を変えたら、テキストの文字色も一緒に確認・調整する

「アイコン」要素を使えば、矢印やチェックマークなどをアイコンピッカーからすぐに選べる

最後にもう一度CTAセクションを置いて、ページを締めくくる

ファネルデザイナー® 下坂栄里子でした。

SNSをやめても、あなたの知識は売れ続けます。

眠っている間に世界中で売れ続ける仕組み「5つのデジタル導線」の作り方を、16分の無料動画で公開中です。

▶︎ 無料動画を視聴する