今回はClickFunnelsでページにボタンを追加していきます。
今回お届けするノウハウはこちら
Step1. ボタンを追加する
ボタンを付けるだけならシンプルなのですが、ボタンにいろいろな役割を持たせることができるので、その点も含めて見ていきましょう。では「EDIT PAGE」に入ります。今回はこのビデオの下にボタンを付けましょう。「ADD NEW ELEMENT」をクリックして「BUTTON」を選択することでボタンが付きます。この場合はデフォルトで「WARNING」が表示されています。「ボタンのアクションがセットされていません」と出ているので、調整していきましょう。
Step2. ボタンにアクションを追加する
SETTINGSタブのうち、主に「EDIT ACTION」について設定します。
TOP MARGIN：ボタンの上の余白の部分を変えられるので、デザインなどで重宝します。
EDIT ACTION：一番大事なのが「EDIT ACTION」です。「EDIT ACTION」も順番に見ていきます。
- SUBMIT ORDER / SUBMIT FORM：「SUBMIT ORDER」は決済ページで決済を送信するとき、「SUBMIT FORM」はオプトインページでEメールアドレスを入れてオプトインするときにフォームの送信に使います。
- OPEN THE POP UP：「POP UP」の「SHOW POP UP」で設定したポップアップを表示することができます。
- GO TO WEBSITE URL：例えば「https://rikiyaishizaki.com/」というように外部のリンクを出してもいいですし、ClickFunnelsの別のページのURLを指定してどこか別のページにジャンプさせることもできます。これも同じウィンドウで開くか新しいウィンドウで開くかを選択できます。
- GO TO NEXT STEP IN FUNNEL：「Seles Page」から「Order Form」に飛ばすというように、ファネル内の次のファネルステップに飛ばすボタンです。
- SCROLL TO ROW / SECTION ON PAGE：例えばページの中にいろいろなSectionやRowがありますが、その中でクリックすると目的のSectionの中にページ内でジャンプやスクロールをしてくれるという機能で、これもけっこう使えます。ページの中のSectionや名前については「1 column row」や「section」のように似通っているのですが、この名前の付け方も別の動画で出しているので見ていただけたらと思います。
- SHOW / HIDE ACTION：ボタンを押したときに何かのSectionの表示・非表示を切り替えたりすることができます。「SHOW THESE」でどれを表示するか、「HIDE THESE」でどれを非表示にするかというボタンアクションを設定できます。
Step3. SETTINGSタブのその他の設定をする
SETTINGSタブのうち、「EDIT ACTION」以外の設定をします。
- BUTTON TEXT：メインのボタンのテキストです。例えば「今すぐ登録する」というふうに入力します。
- SUB TEXT：メインのボタンのテキストの下の小さい文字です。例えば「期間限定のご案内です」というふうに下に薄い字でサブテキストを出すことができます。
- ARIA-LABEL：HTMLメールの中で要素にタグ付けする項目になっているので、わかる人だけ設定してください。
- FONT FAMILY：フォントを変えることができます。
- FONT SIZE：フォントサイズかなり選べる幅があります。マックスで「72」と出ていますが、これを例えば「150」というふうにかなり大きくすることもできます。今回は「72」にしておきます。
- MOBILE SIZE：モバイルで見たときのフォントサイズをデスクトップ版と変えたい場合にクリックして変更できます。もし「MOBILE SIZE」をデスクトップ版と同じに戻したい場合はもう一回クリックして戻してください。
- SUB TEXT SIZE：サブテキストのサイズも変えられます。これも同様に「72」より大きく設定することができます。
- MOBILE SUB SIZE：先ほどの「MOBILE SIZE」と一緒です。これはサブテキストのサイズの設定です。
- TEXT COLOR：メインのテキストの色を選択することができます。
- BG COLOR：バックグラウンドカラーを選択することができます。
Step4. THEMESタブを設定する
THEMESタブにはClickFunnelsがあらかじめ作ってくれたプリセットのようなものがあります。デザインが苦手な方でもこれを適用すればけっこういい感じにしてくれます。例えば「Orange 3D Button」にして後から「BG COLOR」だけ変更すると、ちゃんとボタンの縁の所が3Dっぽくなったまま色を変えることができるので、テーマを選んでからカラーを変えるというのも一つの手です。
Step5. ADVANCEDタブを設定する
- BUTTON TEXT SHADOW：ボタンのテキストの中のシャドウを変更できます。
- BUTTON SHADOW：ボタンの背景に落とすシャドウを変更できます。
- BUTTON WIDTH：ボタンの幅を変更できます。SectionやRowに関してフルの幅にしたり、ボタンの文字数に比例して大きくしたりできます。
- INLINE / BLOCK：ブロックとして配置するのかインラインとして配置するのかを設定できるので、デザインに合わせてみてください。
- STYLE：デザインに合わせて調整してみてください。
- VERTICAL SPACE：テキストとボタンの上下の幅を変更できます。
- HORIZONTAL SPACE：ボタンの横幅とテキストのマージンが変更できます。
- CORNERS：ボタンの角の曲率を設定できます。
- BORDER：ボタンの周りの枠の太さを設定できます。
- BOX SHADOW：ボタンの背景に落とすシャドウを変更できます。
- TEXT SHADOW：ボタンの中のテキストにかかるシャドウを調整できます。
- TEXT TRANSFORM：日本語の場合だとあまり関係ないかもしれませんが、英語にすると「Uppercase」で大文字、「Lowercase」で小文字、「Capitalize」だと先頭だけ大文字になります。例えばわざと「submit」と小文字にしておいてから「TEXT TRANSFORM」で「Uppercase」にすることで大文字に、「Lowercase」で小文字になります。
- LETTER SPACING：ボタンの文字と文字の余白部分を詰めたり空けたりできます。
- ICON PICKER：けっこうよく使う要素で、このアイコンを表示するとすごく見栄えが良くなります。例えば購入ページであれば「cart」と入力して出てきたアイコンを選択すると購入ボタンに使えたりします。
- ICON PICKER (AFTER)：文字の右側に出るアイコンを選ぶことができます。上の「ICON PICKER」は文字の左側に出るアイコンです。
- BUTTON EFFECT：ボタンをバウンスさせたり、いろいろなエフェクトを選べるのですが、私はあまり使っていません。
- BUTTON ALIGN：見えないボックスのような部分に対してどこに配置するのかを設定できます。
ADVANCEDタブのうち、ANIMATIONは他のエレメントと共通するところが多いのですが、一応解説しておきます。
- TIMED DELAY：「Fade In」と「Fade in With Scale」があり、何分何十秒後にボタンを表示するかを選択できます。「Fade in With Scale」はスケールしながらフェードインする機能です。
- 「ANIMATION」の「On Page Load」：ページがロードされたときに指定した時間だけ遅れてフェードインする機能です。「On Page Scroll (becomes visible)」はよく使う機能で、例えばボタンの所までスクロールしていったときに指定した時間が経過したらフェードインでボタンが表示されるというものです。ちょっとおしゃれに見せたいときはこれを使ったりします。今回は以上です。
