こんにちは、下坂栄里子です。
この記事では、前回ゼロから作ったまっさらなページに、実際に要素を配置しながらデザインを組み立てていく実演を解説します。
テンプレートの要素を配置する
まず画像を配置します。入れたばかりの画像は大きすぎることが多いので、画像幅を調整して小さくします。続いて、見出し・サブ見出し・ボタンといったパーツを、テンプレートから貼り付けていきます。文字が中央揃いになっている場合は、左寄せなど好みの配置に調整しましょう。
スタイルを細かく調整する
要素の上下の余白が詰まりすぎていると感じたら、歯車アイコンから「スタイルを編集」を開きます。ここでは、行の高さ（マージン・パディング）や文字の大きさを細かく調整できます。見づらい場合は文字サイズを大きくする、余白が窮屈な場合は上マージンを広げる、というように、少しずつ整えていきましょう。
ボタンをカスタマイズする
ボタンの文言は「今すぐ無料で受け取る」のように、具体的な行動を促す言葉に変更します。フォントサイズや行の高さ、色も調整しましょう。ボタンが横幅いっぱいに広がりすぎている場合は、歯車アイコンから「フル幅」の設定を確認します。
また、ClickFunnelsにはあらかじめ用意されたボタンテンプレートもあります。角丸やドロップシャドウのついたデザイン性の高いボタンを、クリック一つで適用することもできます。テンプレートを適用したあとに配色を調整すれば、影の色が浮いてしまうといった細かい違和感も直せます。
AI生成HTMLを崩さずにパーツごとに再構築するテクニックはこちらの記事でも解説しています。
2列セクションを追加する
次に、左にテキスト、右に画像を配置する2列のセクションを作ります。「セクションを追加」から「空白セクション」を選び、レイアウトで「2列」を選択すると、左右にボックスが配置されます。左側にはテキストと見出し、右側には画像を入れていきます。
完成した2列セクション
テキストの色やアイコンの色が意図せず青くなっている場合は、それぞれ黒などお好みの色に変更します。チェックリストの項目は1つずつ入力していく必要がありますが、地道に整えていくことで、このようにベネフィットが伝わるセクションが完成します。左右のバランスが気になる場合は、列の境界線をドラッグして幅を調整しましょう。
まとめ
テンプレートの要素（見出し・サブ見出し・ボタン）を配置し、配置と余白を整える
スタイル編集パネルでマージン・パディング・文字サイズを調整する
ボタンは文言・色に加えて、用意されたテンプレートでデザイン性を高められる
2列セクションを使えば、テキストと画像を並べたベネフィット紹介などが作れる
色や余白は一度で完璧にせず、少しずつ調整しながら仕上げていく
次回も引き続き、ページ作成の実演を解説していきます。
ファネルデザイナー® 下坂栄里子でした。
SNSをやめても、あなたの知識は売れ続けます。
眠っている間に世界中で売れ続ける仕組み「5つのデジタル導線」の作り方を、16分の無料動画で公開中です。
▶︎ 無料動画を視聴する