• Skip to primary navigation
  • Skip to main content

石崎力也のコンサルティング「いしこん」

年収1000万円以上のネットビジネス経営者を対象にデジタルコンテンツの販売方法とマーケティングオートメーションの導入方法に関する情報を発信するブログ。

  • いしこん 2.0
  • 無料ウェビナー
  • もう1本読む?
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • オンラインコース(講座)ビジネスの作り方・やり方
    • 会員制サイトの作り方とサブスクリプションの導入方法
    • 動画広告の作り方マスター講座|種類、活用方法から効果測定のコツまで
    • 短くて成約率の高いVideo Sales Letter(VSL)の作り方
    • エバーグリーンローンチとは?ツールの使い方を詳しく解説!
    • 個人でKindle電子書籍を出版して利益を得る方法
    • Teachable(ティーチャブル)の使い方・操作方法
    • ClickFunnels(クリックファネル)の使い方・操作方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • ログイン
    • 新規登録はこちら
    • アカウントを持っている
  • Show Search
Hide Search
現在の場所:ホーム / ClickFunnels / 5-25 クリックファネルでナビゲーションメニューを入れる

5-25 クリックファネルでナビゲーションメニューを入れる

Last updated on 2021年4月14日 By 石崎 力也

今回はClickFunnelsでナビゲーションメニューバーを作っていきます。

今回お届けするノウハウはこちら

  • ナビゲーションメニューバーとは
  • Step1. 「NAVIGATION」を挿入する
  • Step2. SETTINGSタブを設定する
  • Step3. ADVANCEDタブを設定する
  • やり方を動画で見る

ナビゲーションメニューバーとは

ナビゲーションメニューバーはClickFunnelsやZapierなどのツール系のホームページによくあるのですが、「Features」「Pricing」「Order Now」のような感じでページのトップに各Sectionのメニューが表示されています。今回はこれを応用して、ページ内に各Sectionの見出しのようなものを表示して、クリックするとこの長いセールスページの一部に飛んでいくようなメニューバーを作っていきます。

Step1. 「NAVIGATION」を挿入する

「ADD NEW ELEMENT」をクリックします。ナビゲーションメニューバーは正式名はナビゲーションメニューです。「NAVIGATION」というエレメントを選択してください。ボタンをクリックしてから設定画面が表示されるまで少しタイムラグがあるので、焦らずに待ってください。

今は3つのメニューが表示されていますが、本当は最大で5つ設定することができ、デフォルトでも5つ設定されています。「Features」「Pricing」「Order Now」「About Us」「Resources」がデフォルトで設定されているのですが、今は3つしか表示されていません。これはADVANCEDタブの「STYLES」で「# OF LINKS」を「5 Links」に変えることで設定した5つを全て出せます。これは後で変えていきます。

Step2. SETTINGSタブを設定する

  • TOP MARGIN:エレメントの上の余白を調整できます。
  • LINK TEXT:クリックする所に表示されるテキストです。今回は用意したものがあるので、これを全部コピーしていきます。「LINK TEXT」の1つ目に「お客様の声」、2つ目に「価格」、3つ目に「About Me」、4つ目に「今すぐ参加する」をコピーします。そうしたらここに表示されたのがわかると思います。次にここのURLの設定をしていきたいのですが、まず始めに内部リンクでスクロールをかけていくので、そのリンク先を設定します。他のページに飛ばすこともできるので、その場合は「LINK URL」に「http://」というURLを普通に入れていただいたらいいのですが、今回は同じページ内の各セクションに飛ばします。そのためにセクション名をわかりやすいものに変更しておきましょう。
    • お客様の声:「SETTINGS」から右下の「#」をクリックして「Title:」を「Section-Testimonial」に変更します。
    • 価格:価格が書いてあるSectionまで行きます。そうしたらまた「SETTINGS」から右下の「#」をクリックして「Title:」を「Section-Pricing」に変更します。
    • 「About Me」と「今すぐ参加する」:同様に「SETTINGS」から右下の「#」をクリックして「Title:」をそれぞれ「Section-aboutme」と「Section-OrderNow」に変更します。この際は必ず「UPDATE」をクリックしてください。

では、もう一度「SETTINGS」に入ります。1つ目の「お客様の声」についての設定をしていきます。「LINK URL」の入力欄をクリックすると自動的にショートコードを表示してくれるので便利です。ClickFunnelsでスクロールも想定していて、スクロールのショートコードも出してくれます。最初に「Testimonial」という名前を付けたので、「#scroll-Section-Testimonial」を選択します。「LINK TARGET」が「Same Window」になっているので、ページ内でジャンプしてくれると思います。

「価格」は「#scroll-PurchaseSection」、「About Me」は「#scroll-Section-aboutme」、「今すぐ参加する」は「#scroll-Section-OrderNow」を選択します。今回は「Resources」は使わないのでそのままにしておきます。

  • FONT SIZE:フォントのサイズを変更できます。4つ出すことを想定して少し大きめに設定しておきます。
  • LINK COLOR:リンクのカラーを設定できます。今回は緑にしておきます。

Step3. ADVANCEDタブを設定する

STYLESタブです。

  • # OF LINKS:「4 Links」にします。
  • TEXT WEIGHT:「Normal」でもいいのですが、「Bold」のほうがしっかりした感じが出るので「Bold」を選択します。
  • ALIGN:左右の位置を変更できます。今回は中央でいいと思います。

ANIMATIONタブではディレイの設定ができます。大きく上と下に分かれていて、上のほうは1秒以上の比較的大きなディレイを入れることができ、例えば60分のウェビナーで30分のところでピッチが入ったときに、同時に申し込み関係のフォームを出したりする場合に使えます。下のほうはJavaScriptでいうLazy Loadingのような考え方になると思います。ページを読み込むときにふわっとディレイで表示させるような機能です。

「TIMED DELAY」のほうは1秒以上の大きなディレイでしたね。これは効果を2つから選べます。「Fade In」と「Fade In With Scale」のどちらか好きなほうを選んでください。プレデューでテストできるので、例えば時間を1秒に指定するなどしてどのような感じで表示されるのかを確認してみるといいと思います。

「MINUTES」と「SECONDS」の所は、例えば「MINUTES」を「30」、「SECONDS」を「15」にして30分15秒に指定したりできます。

「ANIMATION」の「TYPE」は「On Page Load」と「On Page Scroll (becomes visible)」の2つがあります。「On Page Load」はページの読み込みから起算してディレイを表示してくれる機能です。「STYLE」は「Fade In」の他にも選択肢があるので試してみてください。「DELAY (MS)」はミリセカンド単位で、デフォルトでは500ミリセカンドになっています。「On Page Scroll (becomes visible)」は長いページなどをスクロールしていってそのエレメントの場所まで来たときから起算してディレイを出すという機能です。「STYLE」と「DELAY (MS)」は先ほどと同様です。

うまくいくかどうか見てみます。セーブしてからプレビューしましょう。「お客様の声」をクリックしてみます。ちゃんと該当箇所に飛びました。「価格」「About Me」「今すぐ参加する」も飛びました。ぜひやってみてください。

やり方を動画で見る

ClickFunnels(クリックファネル)の使い方・操作方法の一覧ページに戻る

Filed Under: ClickFunnels

知っていることはお金になる…1度限りのウェビナーをご用意しました

石崎力也のコンサルティング「いしこん」

Copyright © 2023 · Rikiya "Sales Funnel" Ishizaki