• 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-26 クリックファネルで再生可能な音声ファイルを埋め込む

5-26 クリックファネルで再生可能な音声ファイルを埋め込む

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

今回はClickFunnelsで埋め込み式の再生可能な音声ファイルを埋め込んでいきます。

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

  • 音声ファイルをアップロードする
  • Step1. 「AUDIO PLAYER」を挿入する
  • Step2. SETTINGSタブを設定する
  • Step3. THEMESタブを設定する
  • Step4. ADVANCEDタブを設定する
  • やり方を動画で見る

音声ファイルをアップロードする

今回はクリックするとすぐに再生が始まるような感じのものを作っていきます。

再生したい音声ファイルをどこかに置いておく必要があります。候補を3つ考えました。「Dropbox」「Amazon S3」「YouTube」です。

  • Dropbox:注意が必要で、だいたい共有URLを出すと「https://www.dropbox.com/s/xxxx/sample.mp3?dl=0」のように最後が「?dl=0」というふうになりますが、「https://www.dropbox.com/s/xxxx/sample.mp3?dl=1」のように「dl」の値を「1」にしなければうまく使えません。また、MP3ファイルであれば「mp3」の所の「?」の前までで区切った場合も使えないので、必ずこれを付けるようにしてください。
  • Amazon S3:「Amazon S3」の料金は従量制になっていたりするので、ご自身で調べてよく理解してからやってみてください。アクセスが大きい場合などは「Amazon S3」を使われる方がいるかと思います。「Amazon S3」は全体公開で誰でも見ることができるような公開設定にしなければちゃんと聞くことができないので、その点は注意してください。
  • YouTube:YouTubeは動画ですが、このClickFunnelsのエレメントにURLを入力すると自動的に音声だけを再生するという機能があるので、何も考えずにYouTubeにビデオをアップロードしている方であれば、そのままYouTubeを音声ファイルの置き場として使うことができます。

Step1. 「AUDIO PLAYER」を挿入する

「ADD NEW ELEMENT」をクリックして「AUDIO PLAYER」というエレメントを選択します。

Step2. SETTINGSタブを設定する

  • TOP MARGIN:エレメントの上の余白を調整できます。
  • AUDIO FILE URL:先ほどの「Dropbox」のサンプルの例を入れます。普通にURLを入力してください。YouTubeの場合は普通のYouTubeのリンクを入力すればOKです。
  • CONTROLS:再生コントロールの「On」「Off」を選択することができ、「AUTOPLAY」でオートプレイを「On」にすることもできます。これはページを読み込むと再生ボタンをクリックしなくても自動で音声が流れる機能ですが、けっこうブラウザ側に嫌われたりします。Google Chromeも何度もアップデートしていて、こういう自動再生のものに関しては自動再生はしますがミュートで再生を始めるので、クリックしないと音が出なかったりします。ブラウザ側は勝手に動画などで音が出たりするのをなるべく排除しようという動きがあるようで、「AUTOPLAY」を「On」にして最初はうまくいっていても時間がたつとアップデートなどで無効になっていたりすることもあるので、この辺は随時テストして様子を見ながらやってみてください。
  • LOOP:「On」「Off」を選択できます。

Step3. THEMESタブを設定する

テーマに関してはClickFunnelsがデザインのプリセットを作ってくれているので、好きなデザインを選ぶといいと思います。デザインを選ぶとSETTINGSタブの「TOP MARGIN」の設定が変わって詰まってしまうようなので、プリセットを選んだ後でもう一度「TOP MARGIN」を変更してください。

Step4. ADVANCEDタブを設定する

まずはSTYLESタブです。

  • WIDTH:横幅のことです。「Full Width」「3/4 Width」「Half Width」から選ぶことができます。今回は「Half Width」にしておきます。
  • PADDING:オーディオファイルの外側の枠の幅を調整できます。
  • ALIGN:横方向の位置を変更できます。

「ANIMATION」は他のエレメントでも共通しているのですが、ディレイの設定ができます。いろいろな条件でディレイを表示できるのですが、基本的には上と下に分かれています。上は1秒以上の比較的大きなディレイを入れることができ、下はJavaScriptでいうLazy Loadingのような考え方になると思いますが、ミリセカンド単位の比較的小さなディレイを入れることができます。

上のほうは例えば60分のウェビナーの開始から30分くらいで決済ボタンなどのエレメントを出したりする場合に設定します。「TIMED DELAY」で表示する際の効果を選択できます。「Fade In」と「Fade In With Scale」のどちらか好きなほうをプレビューして選んでください。

「MINUTES」と「SECONDS」の所は、ページの読み込みからどのくらいの時間を空けてディレイを表示するかを指定できます。今回は10秒にしておきます。

「ANIMATION」ではまず「TYPE」を選択します。こちらは1秒未満のディレイを設定することができます。「On Page Load」は上と同様にページの読み込みからどれくらい時間を空けるかを設定する機能です。「STYLE」は先ほどよりも選択肢が多いのでいろいろ試してみてください。「DELAY (MS)」はデフォルトで500ミリセカンドになっています。これも調整してお好みの設定にしてみてください。

「On Page Scroll (becomes visible)」は例えば長いセールスページなどの場合に、ずっとスクロールしていってこのエレメントが出てきた時点を起算点として指定した時間でディレイを表示するという機能です。「STYLE」と「DELAY (MS)」の設定に関しては先ほどと同様です。

決済ページやセールスページなど、いろいろなページでこの音声は使えると思うのでやってみてください。今回は以上です。

やり方を動画で見る

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

Filed Under: ClickFunnels

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

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

Copyright © 2023 · Rikiya "Sales Funnel" Ishizaki