オーディオ: ページにオーディオを追加する

  • 更新日 Nov 11, 2025
  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

オーディオ要素を使用すると、オーディオ ファイルを ClickFunnels ページに簡単に追加でき、サウンドによるユーザー エクスペリエンスが向上します。この記事では、ページのデザインとコンテンツに合わせてオーディオ ファイルを追加、構成、管理する方法について説明します。

必要条件

  • アクティブなClickFunnelsアカウント

  • ワークスペースで作成されたページ

  • 音声 URL

ページエディタでのオーディオ要素の追加

  1. ページエディタ内で、要素を 配置するセクション を追加します。

  2. そのセクション内に 行 を追加します。

  3. 行内のオレンジ色の + プラスまたは [新しい要素を追加 ] ボタンをクリックして、新しい要素を挿入します。

  4. [ メディア ] カテゴリから、[ オーディオ] 要素を選択します。

オーディオ要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。

オーディオ要素の仕組み

Audio 要素は、外部 URL を使用してオーディオ ファイルを再生するように設計されています。オーディオ ファイルをホスティング サービス (Dropbox、YouTube、Amazon S3 など) にアップロードし、オーディオ要素内にリンクを提供できます。追加すると、訪問者はページから直接音声を再生できます。

オーディオ要素のカスタマイズ

要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車⚙️アイコンをクリックするか、要素を直接クリックします。

上マージン

「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

オーディオファイルのURL

オーディオファイルのURLを指定します。この URL は、MP3、MP4、WAV、AAC、OGG、WEBM などのサポートされている形式でホストされているオーディオ ファイルにリンクする必要があります。スムーズな再生ができるように、オーディオ ファイルが正しくホストされ、アクセス可能であることを確認してください。

ClickFunnels オーディオ プレーヤーでオーディオ ファイルが正しく再生されるようにするためのホスティング ガイドラインをいくつか示します。

  1. Dropbox: Dropbox でオーディオ ファイルをホストしている場合は、URL を dl=0 から dl=1 に変更してください。この変更により、直接ダウンロードして再生できるようになります。

    • 例: 変更
      https://www.dropbox.com/scl/fi/u1j4emngv8tlsrdqlh652/piano.mp3?rlkey=zit..&st=7nsqnvg1&dl=0
      宛先
      https://www.dropbox.com/scl/fi/u1j4emngv8tlsrdqlh652/piano.mp3?rlkey=zit..&st=7nsqnvg1&dl=1

  2. YouTube: オーディオソースとして使用する場合は、公開および限定公開のYouTube動画のみが機能します。プライベートYouTube動画はサポートされておらず、ClickFunnelsでは再生されません。

  3. Amazon S3: Amazon S3 を使用してオーディオファイルをホストしている場合は、ファイルアクセス許可を [ パブリック ] に設定して、適切な再生を有効にします。これにより、ClickFunnels プレーヤーがファイルにアクセスできるようになります。

  4. ClickFunnels アセット:最大 1,000 MB (1 GB) のオーディオ ファイルを ClickFunnels アセット ライブラリに直接アップロードできます。オーディオアセットは通常コース内で使用されますが、[マイアセット]でオーディオプレーヤーを右クリックして[オーディオアドレスをコピー]を選択することで、アップロードされたオーディオのURLを取得できます。このURLをオーディオ要素設定の「オーディオファイルのURL」フィールドに貼り付けると、ページ上で直接ファイルを再生できます。詳細については、「How to Use Audio Asset Files with the Audio Element」セクションをご覧ください。

  5. その他のホスティング サービス: 別のホスティング サービスを使用している場合は、次のことを確認してください。

    • ファイルはパブリックにアクセス可能です。

    • URL はオーディオ ファイル (.mp3 など) に直接リンクします。

    • 一部のサービスではサードパーティ プレーヤーのファイル アクセスが制限される可能性があるため、ホスティング プラットフォームではホットリンクまたは埋め込みが許可されています。

ループ

終了後にオーディオを自動的にループさせるかどうかを選択できます。「オン」を選択すると、オーディオが連続して再生されます。

心地

[パディング] 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペースを制御します。この内部間隔により、コンテンツに呼吸する余地を確保し、視覚的にバランスが取れているように見えます。Use スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

パディングオプション:

  • 上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。

  • 下部: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。

  • 左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します 。

  • ギャップ：アコーディオンなどの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。

デスクトップとモバイル(🖥️ & 📱)カスタマイズ:

パディング設定を使用すると、 デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

  • ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。

  • デスクトップ (🖥️) アイコン: コンテナはデスクトップ ビューでのみ表示されます。

  • モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。

  • 目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。

  • コード (</>) アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。

  • ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

オーディオ要素でのオーディオアセットの使用

  1. ClickFunnelsダッシュボードから、[ワークスペース設定]に移動します 。

  2. [ マイアセット] を選択します。

  3. [ オーディオ ファイル] タブで、新しいオーディオ ファイルをアップロードします。

  4. クリック オーディオファイルをアップロード ボタンをクリックして、新しいオーディオファイルをアップロードするか、使用するオーディオファイルを見つけます。一度に 1 つのファイルをアップロードできます。サポートされているオーディオ形式はMP3、MP4、WAV、AAC、OGG、WEBMであり、最大ファイルサイズ制限は1,000MB(1GB)です。

  5. オーディオ プレーヤーを右クリックし、[オーディオ アドレスのコピー] を選択して ファイルの URL をコピーします。

  6. エディター内の [メディア] カテゴリから [オーディオ] 要素 を選択し、行に挿入します。

  7. コピーしたオーディオ URL を、要素設定内の [オーディオ ファイル URL ] フィールドに貼り付けます

ユーザービュー

ページを表示すると、オーディオ プレーヤーが表示され、オーディオ再生が有効になります。ユーザーは、オーディオ コントロール パネルを介して、オーディオの再生、一時停止、音量の調整、スキップ フォワードまたは巻き戻しを行うことができます。


関連記事