レイアウトに背景を追加する
公開日: 更新日:
背景は、ClickFunnels のページのビジュアルアイデンティティを形作るうえで重要な役割を果たします。ページ全体をカスタマイズする場合でも、セクション、行、列、要素などの特定のコンテナをカスタマイズする場合でも、ClickFunnels には色、画像、動画などのさまざまな背景カスタマイズオプションが用意されています。この記事では、ページレイアウトに背景を適用・最適化して、プロフェッショナルで視覚的に魅力的なデザインにする方法を説明します。
-
アクティブなClickFunnelsアカウント
-
ワークスペースで作成されたページ
背景について
Section titled “背景について”ClickFunnels では、背景を使用してレイアウトの見た目や雰囲気を決められます。コンテナの種類に応じて、次のものを適用できます。
-
背景色: セクションから個々の要素まで、ほぼすべてのレイアウトタイプで使用できます。
-
背景画像: セクション、行、列などのコンテナや、一部の要素でサポートされています。
-
背景動画: セクション、行、フレックスコンテナなどの大きなコンテナの背景として動画を埋め込み、動きのある視覚的な魅力を加えます。
これらのオプションを使用すると、ブランドのアイデンティティに沿った、視覚的に優れたデザインを作成できます。
背景設定へのアクセス
Section titled “背景設定へのアクセス”-
カスタマイズするコンテナ（セクション、行、列、フレックスコンテナ、要素）にカーソルを合わせ、設定 アイコンをクリックします。
-
背景 オプションをオンに切り替えて、背景設定を有効にします。
-
背景 設定で、色、画像、または動画をコンテナの背景として適用します。
-
保存 をクリックしてページを保存します。
背景色の適用
Section titled “背景色の適用”ClickFunnels でコンテナに背景色を追加すると、コンテナの外観をカスタマイズしてブランディングに合わせることができます。背景色を効果的に適用するには、次の手順に従います。
-
コンテナ（セクション、行、列、要素など）の 背景 設定を有効にします。
-
背景 の色フィールドをクリックします。
-
色相セレクター と 彩度と明るさのパネル を使用して単色を選択します。ページデザインを引き立て、上に重ねるコンテンツの読みやすさを確保できる色を選んでください。
-
より高度にカスタマイズするには、透明度やグラデーションなどの設定を調整します（以下で説明します）。
-
デザインをプレビューし、保存 をクリックして変更を適用します。
不透明度で透明度を調整する
Section titled “不透明度で透明度を調整する”ClickFunnels では、背景色の不透明度を変更して部分的に透明にすることができます。
-
カラーピッカーの 不透明度スライダー または アルファ フィールドを使用して、透明度のレベルを設定します。
-
不透明度 0% では背景が完全に見えなくなり、100% では背景が完全に不透明になります。50% では背景が部分的に透明になり、その背後にあるコンテンツやデザインが透けて見えます。
グラデーション背景の作成
Section titled “グラデーション背景の作成”グラデーションオプションでは、複数の色をダイナミックにブレンドして視覚的に魅力的なデザインを作成できます。ClickFunnels では、次の手順で簡単にグラデーションを作成できます。
-
カラーピッカー » スタイルセレクター で、背景のタイプを ソリッド から グラデーション に切り替えます。
-
カラーストップを追加してカスタマイズする:
-
グラデーションバーをクリックして カラーストップ を追加します。デフォルトでは、ClickFunnels のグラデーションには 2 つのカラーストップがあります。
-
カラーストップをクリックしてカラーセレクターを開き、その位置の色を選択します。
-
必要に応じてストップを追加し、複雑なグラデーションを作成します。
-
-
方向セレクター（矢印）を使用して、グラデーションの角度を調整します。デザインに合わせて、水平、垂直、斜めを選択します。
-
レイアウト内でグラデーションをプレビューし、デザインを引き立てつつ読みやすさが保たれていることを確認します。
背景画像の適用
Section titled “背景画像の適用”画像を背景として使用するには:
-
背景設定で、画像URL フィールドを使用して画像を追加します。
-
画像URL: 背景画像の URL を入力するか、ClickFunnels の画像ギャラリーに直接アップロードします。
-
画像スタイル: コンテナ内での背景画像の表示方法を制御します。
-
なし: 追加のスタイル設定を行わずに、背景画像を元のサイズと位置で表示します。画像がコンテナより小さい場合は隙間が残ることがあります。
-
フルセンター: サイズを変更せずに画像をコンテナの中央に配置します。画像がコンテナより小さい場合は空白が残ることがあります。
-
フルセンター（パララックス）: 画像を中央に配置し、パララックススクロール効果を適用します。画像がメインコンテンツとは独立して動くことで、奥行きのある見た目になります。
-
幅100%にフィル: 縦横比を維持したまま画像を拡大してコンテナの幅全体をカバーします。縦方向がトリミングされる場合があります。
-
幅と高さ100%にフィル: 画像を引き伸ばしてコンテナの幅と高さの両方を埋めます。縦横比を維持するため、画像の一部がトリミングされます。
-
繰り返さない: 画像を繰り返さずに 1 回だけ表示します。余ったスペースは空白のままになります。
-
繰り返す: 画像をタイル状に並べて、コンテナの幅と高さをカバーします。
-
水平に繰り返す: コンテナの幅方向にのみ画像を繰り返します。
-
垂直に繰り返す: コンテナの高さ方向に画像を縦に並べます。
-
-
画像フィット: 配置を整えるために、コンテナ内での画像の位置（中央、左上、右下など）を指定します。
-
背景: コンテナの一番奥にあるメインの色または画像です。セクション、行、列の見た目を決めるベースレイヤーです。
-
前景: 背景の上に重なる色のレイヤーです。透明なオーバーレイなどの効果を加えて、テキストやその他の要素を読みやすくするのに使用できます。
たとえるなら: 背景は部屋の壁、背景画像は壁を飾る壁紙、前景は壁や壁紙の見え方を和らげたり変えたりする薄手のカーテンのようなものです。壁紙（背景画像）が破れていたり無かったりすると、壁の色（背景色）が見えます。そしてコンテンツは、人々が注目して触れる、手前に置かれた家具のようなものです。
背景画像にオーバーレイを追加する
Section titled “背景画像にオーバーレイを追加する”ClickFunnels で背景画像にオーバーレイ効果を作成するには、まず 背景設定 で画像を追加し、画像スタイル と 画像フィット オプションで位置を調整します。次に、透明度を持たせた 前景色 を適用して、上に重ねるコンテンツの読みやすさを高める控えめなオーバーレイを作成します。画像が読み込まれると背景色は表示されませんが、ソースが見つからない場合や通信が遅い場合など、画像の読み込みに失敗したときのフォールバックとして機能します。これにより、デザインの一貫性と視覚的な魅力が保たれます。
動画を背景として適用する
Section titled “動画を背景として適用する”ClickFunnels では、ページ全体、セクション、行、フレックスコンテナ などのコンテナに、魅力的な背景動画を追加できます。背景動画はページに動きを与えますが、アクセシビリティとパフォーマンスを確保するために慎重に使用してください。
背景動画を適用する手順:
Section titled “背景動画を適用する手順:”-
コンテナ（ページ全体、セクション、行、フレックスコンテナなど）の 背景設定 にアクセスします。
-
背景設定で、背景動画 オプションをオンに切り替えます。
-
動画のリンク（YouTube または Vimeo）を 動画URL フィールドに貼り付けます。
動画 URL を入力すると、次のオプションが表示されます。
-
終了アクション: 動画の終了時の動作を選択します: 動画をループ、URLにリダイレクト（リダイレクトURL を入力し、必要に応じて 新しいタブで開く をオンにします）、または ポップアップを表示。
-
背景スタイル: コンテナ全体をカバーするには 100%をフィル を、背景オフセットY (%) と 背景オフセットX (%) で動画の位置を調整するには 動画をオフセット を選択します。
-
モバイルで動画背景を隠す: モバイルデバイスでは動画をオフにします。
-
カラー背景をオーバーレイとして使用: 動画の上に背景色をオーバーレイとして表示します。
-
-
ページ上で動画がどのように表示されるかを確認し、上に重ねたテキストやボタンの妨げになっていないことを確認します。
-
通信の問題やソースが見つからないことで動画の読み込みに失敗した場合でもデザインが崩れないように、フォールバックとして 背景色 を設定します。
-
保存 をクリックして、背景動画をコンテナに適用します。
動きのある動画背景を追加するには:
-
背景設定で、背景動画 オプションをオンに切り替えます。
-
- 動画のリンク（YouTube または Vimeo）を 動画URL フィールドに貼り付けます。
-
動画をプレビューする:
- 動画がデザインに合っていて、テキストの読みやすさを妨げていないことを確認します。
-
背景動画のベストプラクティス:
-
ユーザーを圧倒しないように、動きの少ない控えめな動画を使用します。
-
背景動画には再生コントロールがないため、重要なコンテンツに動画を使用しないでください。
-
これらの用途別の手順に沿うことで、読者は背景色、画像、動画を重複なくすばやく実装できます。