コンテンツにスキップ
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterCF クラシックヘルプセンター

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

公開日: 更新日:

ビデオは、訪問者を引き付け、提供内容を説明し、視聴者との信頼を築くための強力なツールとなります。ClickFunnels ページ エディターを使用すると、複数の一般的なビデオ ホスティング プラットフォームの 動画 要素を使用してビデオを簡単に追加できます。この記事では、ページのインパクトとブランディングを強化するために動画を追加する方法について説明します。

必要条件

Section titled “必要条件”

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

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

  • 動画の URL または動画の埋め込みコード

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

Section titled “ページエディタでのビデオ要素の追加”

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

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

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

  4. メディア カテゴリから 動画 要素を選択します。

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

ビデオ要素のカスタマイズ

Section titled “ビデオ要素のカスタマイズ”

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

上マージン

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

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

ビデオURL

サポートされているホストのいずれかからビデオ URL を追加します: YouTube、 Vimeo、 Voomly、 Wistia、 HTML5、または カスタム埋め込み。必要に応じて、 <iframe> タグまたは <script> タグを使用することもできます。お好みの動画ホスティングプラットフォームからリンクまたは埋め込みコードを貼り付けるだけで、動画が自動的にページに表示されます。

ビデオコントロール

ビデオコントロールを有効にすると、ユーザーはビデオの再生、一時停止、巻き戻し、早送りを行うことができます。コントロールがオフの場合、訪問者はこれらのオプションを使用できませんが、これはコンテンツを中断することなく表示するのに役立ちます。ビデオコントロール は YouTube 動画でのみ使用でき、デフォルトではオフです。

自動再生

自動再生をオンに設定すると、ページの読み込み時にビデオが自動的に開始されます。自動再生 は YouTube、Vimeo、Wistia の動画で使用できます。最新のブラウザのほとんどは、自動再生ビデオでオーディオを再生するためにユーザーの操作を必要とするため、自動再生される動画は常にミュートされた状態で開始されます。訪問者に音声をオンにするよう促すには、ミュート解除ラベル 設定を使用します。

レイジーローディング？

レイジーローディング？ では、ユーザーがスクロールしたときに画面に表示されるようになった場合にのみ、ビデオを読み込むことができます。このオプションは、特に複数の動画や重いメディアコンテンツを含むページでのページの読み込み速度を向上させるのに役立ちます。

  • YouTube、Vimeo、Wistia、HTML5 の動画で使用でき、デフォルトは いいえ です。

  • Voomly の動画は常にレイジーロードされます。

  • ポップアップ内の動画は常にレイジーロードされます。

ブロックポーズ

ブロックポーズ 機能は、ビデオの上部にオーバーレイを使用して自動再生を強制します。このオーバーレイには、 オーバーレイテキスト フィールドに追加できるカスタムメッセージが表示されます。

  • この機能は YouTube、Vimeo、Wistia の動画で使用できます。

  • この機能はデスクトップでのみ機能します。

  • ページが読み込まれると(音声がミュートされる)ビデオが自動再生され、上部にオーバーレイメッセージが表示されます。

  • クリックすると、オーバーレイが削除され、ビデオのミュートが解除され、一時停止オプションなしで再生が続行されます。

ミュート解除ラベル

ミュート解除ラベルはアイコンまたはテキストオーバーレイとして表示され、ユーザーにビデオのミュートを解除するように促します。この機能は、バックグラウンドでサイレントに自動再生されるビデオ セットに特に便利で、必要に応じてユーザーがサウンドを有効にするように明確に求めます。アクティブにすると、ClickFunnels はクリック可能なスピーカー アイコンをビデオ プレーヤーに自動的に追加し、ユーザーはオーディオのミュートを簡単に解除できます。

  • YouTube 動画では、自動再生 が オン、ブロックポーズ が いいえ、ビデオコントロール がオフの場合にのみ機能します。

  • Vimeo 動画では、自動再生 が オン、ブロックポーズ が いいえ の場合にのみ機能します。

  • Wistia、Voomly、HTML5 の動画や、埋め込みコードで追加した動画では使用できません。

  • ミュート解除ラベルテキスト フィールドにカスタムラベルテキストを設定して、ユーザーにミュート解除を求めることができます。

ミュート解除ラベルテキスト

ミュート解除ラベル が有効な場合、ミュート解除ラベルテキストを使用して、ビデオにメッセージを表示します。

ブランディング

ブランディング をオンまたはオフにして、動画プラットフォームのブランディング(YouTube チャンネル名やロゴなど)を動画に表示するかどうかを制御します。このオプションは YouTube 動画でのみ使用でき、ブロックポーズ を いいえ、ビデオコントロール を オン に設定した場合にのみ機能します。

アスペクト比

YouTube 動画のアスペクト比を選択します: デフォルトのアスペクト比、または縦長の動画用の 縦（9:16）。この設定は YouTube 動画でのみ使用できます。

オプションの幅と高さ

必要に応じて、オプションの幅 と オプションの高さ でビデオのサイズをピクセル(px)単位で手動で指定します。これにより、特にカスタムサイズのビデオを埋め込む場合に、ビデオサイズを正確に制御できます。これらの設定は YouTube、Vimeo、Wistia の動画で使用できます。YouTube 動画の アスペクト比 が 縦（9:16） の場合は、オプションの幅 のみが表示されます。

整列

埋め込みコードで動画を追加した場合は、整列 を使用して、コンテナ内で動画を左、中央、右のいずれかに配置します。

タイトル

ビデオ設定の [タイトル] フィールドでは、ビデオのわかりやすい名前を指定できます。このタイトルはビデオ要素内にHTML属性として追加され、アクセシビリティとSEOにメリットがあります。タイトルを追加すると、動画コンテンツが検索エンジンに理解されやすくなります。スクリーンリーダーが視覚障害のあるユーザーにコンテキストを伝えるのを支援し、ページ全体のアクセシビリティと視認性を向上させます。

オーバーレイテキスト

ブロックポーズが有効になっている場合、オーバーレイテキストを使用してビデオの上にメッセージを表示します。

HTML5 動画の設定

HTML5 動画 (MP4 などの動画ファイルへの直接リンク) を追加すると、次の設定を使用できます。

  • WEBM URL: 同じ動画の WEBM 版の URL を追加します。エディタには「MP4とWEBMの両方のURLを提供する必要があります」と表示されるため、MP4 のリンクを ビデオURL に、WEBM のリンクをここに入力します。

  • スタート画像URL: 動画の再生が始まる前に表示する画像の URL を追加します。

  • レイジーローディング？: 上記の レイジーローディング？ を参照してください。

パディング

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

パディングオプション:

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

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

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

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

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

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

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

背景

背景 プロパティを使用すると、セクション、行、列、フレックス コンテナ、またはビデオなどの個々の要素など、さまざまなコンテナの背景画像を追加およびカスタマイズできます。[背景] オプションをオンにすると設定がアクティブになり、背景画像のソース、スタイル、フィット、および色のオプションを構成できます。

  1. 画像 URL: 背景画像の URL を入力するか、ClickFunnels 画像ギャラリーに直接アップロードします。

  2. 画像スタイル: コンテナ内での背景画像の表示方法を制御します。

    • なし: 追加のスタイル設定なしで背景画像を元のサイズと位置で表示し、画像がコンテナよりも小さい場合は隙間が残る可能性があります。

    • フルセンター: サイズを変更せずにコンテナ内のイメージを中央に配置します。これにより、イメージがコンテナよりも小さい場合は空白スペースが残る可能性があります。

    • フルセンター(視差): 画像を中央に配置し、視差スクロール効果を適用して、画像がメインコンテンツとは独立して移動するときにレイヤー化された外観を作成します。

      注:

      iOS の制限により、視差効果は Apple モバイル デバイスでは自動的に無効になります。iOS デバイス (Safari やその他の WebKit ブラウザー) は、視差スクロールが CSS で実装される方法の中核部分である background-attachment: fixed のサポートが制限されているか、まったくサポートされていません。レイアウトの整合性を維持するために、背景はデフォルトで静的なスタイル(フルセンターなど)になります。

    • 幅を 100% 塗りつぶす: このオプションは、画像を拡大してコンテナの全幅をカバーし、縦横比を維持し、場合によっては垂直方向にトリミングします。

    • 幅と高さを100%塗りつぶす:これにより、画像が引き伸ばされ、コンテナの幅と高さの両方が塗りつぶされ、画像の一部がトリミングされて縦横比が維持されます。

    • 繰り返しなし: 繰り返しずに画像を 1 回表示します。未使用のスペースは空のままになります。

    • 繰り返す: 画像をコンテナ全体に並べて、幅と高さの両方をカバーします。

    • 水平方向に繰り返す: コンテナの幅全体でのみ画像を繰り返します。

    • 垂直方向に繰り返す: コンテナの高さに沿って画像を垂直に重ねます。

  3. 画像フィット: 画像をコンテナ内に配置し (中央、左上、右下など)、配置を整えます。

  4. 色: このオプションを使用すると、 背景色 と 前景色 を設定できます。

    • 背景色: 背景画像を使用したくない場合は、単色またはグラデーション色を背景として直接適用できます。カスタムカラーのカラーピッカーから選択するか、スタイルガイドから色を選択して一貫性を保ちます。背景画像を使用する場合、背景色は通常表示されませんが、画像の読み込み中に一時的に表示されたり、画像の読み込みに失敗した場合のフォールバックとして機能したりする可能性があります。

    • 前景色: 背景画像の上にオーバーレイを追加し、不透明度を調整して画像に色付きまたは柔らかい効果を作成できるようにします。このレイヤー化により、読みやすさが向上したり、画像に文体の色合いを追加したりできます。

  5. 背景ビデオ: ビデオを背景として使用するには、「背景ビデオ」オプションをオンに切り替えます。YouTube または Vimeo ビデオの URL を入力して、ビデオをコンテナの背景として設定します。

    注:

    「背景ビデオ」オプションは、セクション、行、Flex コンテナでのみ使用できます。

ボーダー

ボーダー 設定を使用すると、要素の周囲にボーダーを追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。

  1. スタイルプリセット(1、2、3): スタイルガイドで定義済みの境界線スタイルから選択します。これらのプリセットは、ページ全体で一貫した境界線スタイルを提供し、要素にすばやく適用できます。

  2. スタイルを編集: スタイルガイドでプリセットの罫線スタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 を選択して、グローバル設定でデザインを調整します。

  3. オーバーライド： [ オーバーライド ]オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用の境界線設定をカスタマイズします。

  4. ボーダー: 要素のどの辺にボーダーを表示するかを選択します。オプションには、上、下、左、右の境界線の任意の組み合わせが含まれます。

  5. ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などの境界線の線のスタイルを選択します。

  6. 色： カラーピッカーを使用して、境界線の色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、境界線の色がデザイン スキームに一致するようにすることができます。

  7. ストロークサイズ: 境界線の太さは、[ ストローク サイズ] スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

シャドウ

シャドウ 設定では、シャドウ効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。

  1. スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。

  2. シャドウ スタイル: インセット (要素内の影) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。

  3. X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。

  4. Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。

  5. ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。

  6. スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。

  7. 色: カラーピッカーを使用して、影の色の設定を選択します。

コーナー

コーナー設定では、要素のコーナーの丸み(境界線半径)を調整でき、丸みを帯びたエッジまたはシャープなエッジを柔軟に作成できます。

  1. スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイック スタイリング オプションを提供します。

  2. スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 をクリックして、グローバル設定でプリセットを調整します。

  3. オーバーライド： スタイルガイドを変更せずにカスタムコーナー設定を適用するには、[ オーバーライド]をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。

  4. すべてのコーナー: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、四隅すべてに均一な境界線の半径を設定します。

  5. エッジを分離する: エッジ を分離(Separate Edges )を有効にして、各コーナーを個別に調整します。 左上隅、 右上隅、 左下隅、 右下 隅に異なる値を設定して、独自の形状を実現できます。

ビデオのスティッキー設定

スクロール時にスティッキー 機能を使用すると、ビデオ要素が表示されたままになり、ページを下にスクロールしても視聴者をフォローできるため、一貫した可視性とエンゲージメントが確保されます。この設定は、高度な タブで表示できます。有効にすると、ビデオは画面上の選択した位置に「固定」され、特に重要なビデオやプロモーション ビデオのユーザー エンゲージメントが向上します。

スクロール時にスティッキー: スティッキー効果を有効にし、ユーザーがスクロールしてもビデオが表示されたままになります。

  1. スティッキーサイズ: スクロール中に目立たせる方法に基づいて、スティッキー ビデオのサイズ (小、中、大、または特大) を選択します。

  2. スティッキーポジション: スクロール中にビデオを画面上に表示する場所を選択します (例: 左上、右上、左下、右下)。

  3. スティッキースタイル: スティッキー ビデオの外観をカスタマイズし、コントラストとスタイルを追加します。オプションは ドロップシャドウ付きブラック、ドロップシャドウ付きホワイト、明るい透明ボーダー、暗い透明ボーダー です。

  4. スティッキーは閉じることができます: ユーザーが固定動画を閉じることができるかどうかを決定します。ユーザーにビデオを非表示にするオプションをユーザーに表示する場合は はい に設定し、常に表示しておくには いいえ に設定します。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
見出しの設定パネル。ヘッダーのコード（</>）アイコンと、下部バーの可視性・すべて・デスクトップ・モバイル・目・ゴミ箱アイコン

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

  • デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。

  • モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。

  • 目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。

  • コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。

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

詳細設定

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