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

画像: 画像の追加と管理

公開日: 更新日:

画像は、ページのデザインを強化し、訪問者を惹きつける上で非常に重要です。ClickFunnels ページ エディターを使用すると、 画像 要素を使用して画像を簡単に追加およびカスタマイズして、コンテンツに合わせて画像を簡単に追加およびカスタマイズできます。この記事では、ページのデザインやブランディングに合わせて画像を追加、カスタマイズ、管理する方法を説明します。

必要条件

Section titled “必要条件”

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

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

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

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

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

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

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

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

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

画像要素のカスタマイズ

Section titled “画像要素のカスタマイズ”

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

上マージン

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

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

画像ソース

ClickFunnels に画像要素を追加する場合、[ ソース ] セクションには、画像を管理するためのオプションが表示されます。各部分の仕組みは次のとおりです。

  1. ソース:

    • アップロード: デバイスから画像をアップロードするか、画像ライブラリに以前にアップロードした画像をアップロードするには、このオプションを選択します。

    • ダイナミック: サイトロゴを使用するには、このオプションを選択します。画像には常に現在のサイトロゴが表示されるため、ロゴを変更すると、使用しているすべての場所で自動的に更新されます。

  2. 画像/画像URL:

    • 画像 (ダイナミック を選択した場合): 使用できるダイナミック画像は サイトロゴ のみです。サイトロゴを変更すると自動的に更新されるため、一貫性が保たれます。

    • 画像URL (アップロード を選択した場合): このフィールドは、アップロード を選択すると表示されます。 画像アイコン をクリックして 画像ギャラリーを開き、次の操作を行うこともできます。

      • ClickFunnels 画像ギャラリーから画像を選択します。又は

      • 画像をアップロード オプションをクリックし、管理を改善するために フォルダー に整理することで、デバイスから新しい画像を直接アップロードできます。
        画像をアップロードのタイルを強調表示した画像ギャラリー。発見にMagnific、Marketing.ai、Pixabay、Pyks、Unsplash

    • 発見セクション:
      発見 セクションでは、Magnific、Pixabay、Unsplash から画像を直接インポートできます。これにより、ページエディターを離れることなく、ロイヤリティフリーの画像をすばやく見つけて使用できます。このセクションには、Marketing.ai (下記参照) と、新しいブラウザタブで開く Pyks も表示されます。

    • Marketing.ai: さらに、ClickFunnels は、指示に基づいてカスタム画像を生成できる Marketing.ai と呼ばれる AI を活用したツールを提供します。たとえば、「 グラデーションの青と紫の色でダウンロードアイコンの透明な画像を生成する」 ように依頼できます。これは、コンテンツに合わせたユニークな画像を作成する優れた方法です。

  3. 代替テキスト: この短い説明は、画像が見つからないか、接続が遅いなどの問題が原因で画像を読み込めない場合に表示されます。また、検索エンジンが画像を理解し、SEO を改善するのにも役立ちます。

サイズと位置

サイズと位置の設定では、画像のサイズ、縦横比、フィット感、コンテナ内の配置を制御できます。

  • 比率: 幅と高さの特定の比率を維持するために、正方形、横向き、縦向きなど、画像の事前定義された縦横比を選択します。3 つのドットのアイコンをクリックすると、幅と高さをカスタム設定でき、個別に調整できます。

  • 画像の幅と高さ: px、 %、または autoを使用して画像のサイズを制御します。デスクトップとモバイルのトグルを使用して、レスポンシブデザインのデバイスごとに異なる値を適用します。

    • px (ピクセル) – 正確な制御のために固定サイズを設定します。

    • % (パーセンテージ) – 画像をコンテナに対して相対的に応答します。

    • auto – 画像の自然な寸法または利用可能なスペースに基づいて自動的に調整されます。

  • フィット: コンテナ内でのイメージの表示方法を定義します。

    • 塗りつぶし: 画像を拡大してコンテナ全体を埋め、画像の一部がトリミングされる可能性があります。

    • 含む: トリミングせずにコンテナ内に収まるように画像を拡大縮小し、画像全体の可視性を維持します。

    • カバー:画像を拡大してコンテナ全体を覆い、エッジをトリミングして塗りつぶすこともできます。

    • スケールダウン: 画像を元のサイズで表示し、コンテナのサイズを超えた場合にのみ縮小します。

  • 位置: フィット で 含む または スケールダウン を選択すると、位置 オプションが使用可能になります。この設定により、コンテナ内の画像の配置 (中央、左上、右下など) を制御して、使用可能なスペース内で正確に配置できます。

  • 整列: 画像は左、中央、または右に揃えることができます。デスクトップとモバイルのアイコンを使用して、デスクトップまたはモバイルのビューに異なる配置を設定することもできます。

画像設定

これらのオプションを使用すると、ページ内で画像の読み込み、表示、操作の方法を制御できます。

  • レイジーローディング？: この設定は、新しい画像ではデフォルトで オン になっています。レイジーローディングは、画像がユーザーの画面に表示されるまで画像の読み込みを遅らせることで、ページのパフォーマンスを向上させます。有効にすると、最初はページの表示領域にある画像のみが読み込まれ、さらに下の画像はユーザーがスクロールするまでアンロードされたままになります。これにより、ページの読み込みに必要なデータ量が減り、初期読み込み時間が短縮され、ユーザー エクスペリエンスがよりスムーズになります。遅延読み込みは、複数の画像を含むページや、スクロールした長さのレイアウトがあり、フォールド下の画像をすぐに読み込む必要がない場合に特に効果的です。

    遅延読み込みは、画像の読み込み時間を最適化することで、コンテンツの表示速度を向上させるだけでなく、特に低速ネットワーク上のユーザーにとって、ページ全体のパフォーマンスも向上させます。この機能は、重要な画面上のコンテンツを優先し、重要な要素を迅速に読み込むことができます。遅延読み込みは、読み込み時間が速いと検索エンジンに好まれ、ランキングの向上につながるため、SEO の向上にも貢献します。目に見えるコンテンツを最初に配信し、必要な場合にのみ重要でない画像をロードすることで、ユーザーにシームレスなエクスペリエンスを提供します。

  • 品質: [品質] 設定を使用すると、画像の解像度と圧縮レベルを制御して、視覚的な鮮明さとページ パフォーマンスのバランスをとることができます。画質を下げることで、ファイル サイズを効果的に縮小し、ページの読み込みを高速化します。これは、モバイル デバイスのパフォーマンスを向上させる場合や、インターネット接続が遅いユーザーにとって特に役立ちます。たとえば、狭いスペースで高解像度の画像を使用している場合、品質を下げても外観に目立った影響はありません。これにより、画像の読み込みが速くなり、全体的なユーザー エクスペリエンスが向上します。

    たとえば、商品画像をアップロードする場合は、画像品質を 80% 以上に保つことを検討してください。この高品質により、ユーザーは複雑な製品の詳細を確認できるようになり、信頼を築き、購入を促進するために非常に重要です。鮮明で高品質の画像により、潜在的な顧客は機能、テクスチャ、その他の詳細を詳しく調べることができ、製品に対する信頼が高まり、売上の促進に役立ちます。

    一方、詳細にする必要のない 背景画像や装飾画像 を追加する場合は、品質を 約50〜60% に下げることを検討できます。これらの画像は主な焦点ではないため、品質を下げてもユーザー エクスペリエンスに大きな影響はありませんが、ページの読み込み速度の向上に役立ちます。

  • リンクアクションまたはURL: この設定では、ユーザーが画像をクリックしたときに何が起こるかを指定できます。いくつかの定義済みアクションから選択することも、カスタム URL を挿入することもできます。利用可能なオプションの内訳は次のとおりです。

    • #open-popup: 画像をクリックすると、ページポップアップが開きます。

    • #submit-form: このオプションは、画像をクリックしたときにオプトインフォームを送信します。

    • ?next_funnel_step=true: 画像をクリックすると、ユーザーはファネルの次のページにリダイレクトされます。

    • #close-popup: このアクションは、すでに開いているポップアップを閉じ、ポップアップを開くアクションとは逆の役割を果たします。

    • ?page_action=mark_complete: コースレッスンエディタで画像を使用している場合、このアクションを選択すると、クリックするとレッスンが完了としてマークされます。

  • ターゲット: リンクアクションまたはURLを追加したら、リンクを 同じウィンドウ と 新しいタブ のどちらで開くかを選択します。

フィルター

フィルター セクションでは 、ページ エディターで画像の視覚的な外観を直接調整できます。利用可能なフィルター オプションは次のとおりです。

  • ぼかし: イメージにぼかし効果を追加します。

  • 明るさ: 画像全体の明るさを調整します。

  • コントラスト: イメージの明るい領域と暗い領域のコントラストを制御します。

  • グレースケール:画像を白黒に変換します。

  • 色反転: イメージの色を反転します。

  • 不透明度: イメージの透明度を調整します。

  • 彩度: イメージの色の強度をコントロールします。

  • セピア: ヴィンテージ効果のためにイメージにセピアのトーンを追加します。

パディング

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

パディングオプション:

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

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

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

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

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

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

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

コーナー

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

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

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

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

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

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

ボーダー

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

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

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

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

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

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

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

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

シャドウ

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

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

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

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

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

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

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

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

コントロールパネル

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

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

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

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

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

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

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

詳細設定

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