サイトを使い始める:ClickFunnelsでWebサイトを構築する

公開日: 2024年12月11日更新日: 2025年11月6日

ClickFunnels のサイト & ブログアプリを使用すると、単一のプラットフォーム内でブログページ、カスタマーセンターなどを備えたプロフェッショナルな Web サイトを作成できます。直感的なインターフェイスと強力なツールを備えた ClickFunnels は、Web サイトの構築、カスタマイズ、公開に必要なものをすべて提供します。この記事では、サイトとブログアプリを使用してサイトをセットアップおよび管理するための基本について説明します。

必要条件

アクティブなClickFunnelsアカウント
「サイト＆ブログ」アプリがワークスペースに追加されました

ワークスペースへのサイトアプリの追加

左側のメインメニューから、[ + アプリの追加 をクリックして、[アプリ]ページに移動します。
Site app が見つかるまで下にスクロールし、それをクリックします。
[アプリの追加]ボタンをクリックして、選択を確定アプリボタン。

アプリの詳細については、こちらをご覧ください article ClickFunnelsワークスペースにアプリを追加する。

サイト概要へのアクセス

サイトの概要ページは、Web サイトを管理するための中心的なハブとして機能します。ここから、サイトページ、ブログ投稿、カスタマーセンターにアクセスし、サイトのテーマと設定をカスタマイズできます。サイト & ブログアプリは既定のアプリとして ClickFunnels ワークスペースに追加されるため、手動でインストールする必要はありません。

サイト概要にアクセスする手順

ClickFunnelsアカウントにログインします。
左側のメニューの [ アプリ ] セクションに移動します。
[サイトとブログ]をクリックして、[サイトの概要]ページを開きます。

サイト概要で使用できる機能

最近の投稿: 最新のブログ投稿を表示および管理します。
サイトページ: Web サイトのページにアクセスして作成します。
テーマプレビュー: 現在のテーマを確認し、変更を加えます。
クイックリンク: 新しいページや投稿を作成したり、カスタマーセンターを管理したりするためのショートカットオプション。

テーマの選択

ClickFunnels のテーマは、ワークスペース全体のさまざまなページのデザインとレイアウトを決定するページテンプレートの包括的なコレクションです。これらのテンプレートには、サイトのホームページ、404 ページ、近日公開ページなどの重要なページと、ストアフロント、製品ページ、チェックアウトページ、カートページなどのストア固有のページが含まれます。さらに、テーマにはブログ、カスタマーセンター、コース用のテンプレートが含まれており、ワークスペース全体で一貫したデザインを保証します。

適切なテーマを選択すると、サイトのブランディングと機能がすべての領域でシームレスに調整されます。テーマを作成してデフォルトとして選択すると、ワークスペース内のすべてのアプリテンプレートページに一貫したデザインが適用されます。これは、テーマが統一されたブランディング、色、スタイルを維持するページテンプレートで構成されており、サイトやその他のアプリテンプレートページがまとまりのあるプロフェッショナルな外観を表現するためです。

テーマへのアクセス

[ワークスペース設定] > [テーマ] に移動します。
リストで利用可能なテーマを参照するか、新しいテーマを作成します。

サイトへのテーマの適用

ワークスペースから、左側のメニューにあるサイトとブログアプリをクリックします。
[サイト設定] を選択します。
[ デフォルトのテーマ ] オプションまでスクロールし、リストからテーマを選択します。
[ サイトの更新 ] をクリックして、テーマをサイトに適用します。

テーマの詳細については、 ClickFunnelsでのテーマの作成と管理の記事をご覧ください。

スタイルガイドの選択

スタイルガイドは、サイトデザインのレシピブックのようなものです。フォント、色、ボタン、その他のデザイン要素がページ全体でどのように見えるかについての「材料」と「指示」が保存されます。スタイルガイドを使用すると、同じスタイルを繰り返し設定しなくても、ワークスペース内のすべてのページの外観が一貫していることを確認できます。

たとえば、小 (14px)、中 (16px)、大 (18px) などの段落フォントサイズを定義するとします。ページエディタ内で段落要素を挿入し、フォントサイズを「大」に選択すると、保存したスタイルガイドに基づいてフォントサイズが自動的に18pxに調整されます。これにより、時間が節約され、サイト全体の一貫性が確保されます。

スタイルガイドを使用すると、次のことができます。

一貫性を保つには、見出し、小見出し、本文のフォントスタイルとサイズを定義します。
テキスト、背景、アクセントのカラーパレットを確立し、ブランドカラーが一貫して適用されるようにします。
形状、影、境界線、角の半径などの定義済みのスタイルでボタンをカスタマイズします。
デザイン要素の境界線と影を構成して、まとまりのある外観を作成します。

スタイルガイドの作成

ClickFunnelsダッシュボードの左下にある [ワークスペース設定 ]をクリックします。
左側のメニューを下にスクロールし、[ スタイル]をクリックします。
右上の [ 新しいスタイル] ボタンをクリックします。
新しいスタイルの 「名前 」を入力します。
**[スタイルを作成]**をクリックして保存します。

スタイルガイドの作成と管理に関する詳細なガイドについては、スタイルの使用を開始するの記事を参照してください。

サイトへのスタイルガイドの適用

ワークスペースから、左側のメニューにあるサイトとブログアプリをクリックします。
[サイト設定] を選択します。
[サイト設定]パネルの 詳細設定 セクションまで下にスクロールします。
[詳細設定]の下に スタイル ドロップダウンを見つけます。
ドロップダウンをクリックし、目的のスタイルガイド(例:「デフォルトのスタイルガイド」またはカスタムスタイルガイド)を選択します。
ページの上部または下部にある サイトの更新 をクリックして、変更を保存します。

エディターでのサイトのカスタマイズ

サイトのホームページをデザインするには:

サイトの概要の「 サイトの編集 」ボタンをクリックします。
ページエディターを使用して、セクション、行、およびヘッダー、フッター、ヒーローセクションなどの要素を追加します。ページエディターを使用して、セクション、行、および要素を挿入し、サイトページのレイアウトを作成します。これらのコンテナを使用すると、ヘッダー、フッター、ヒーローセクションなど、ページの特定のセクションをデザインでき、構造化された視覚的に魅力的なデザインを確保できます。
[ 保存] をクリックして変更を保存します。

ページエディタの詳細なガイドについては、ClickFunnelsページエディターの使用を開始するの記事を参照してください。

サイトナビゲーションの設定

ナビゲーションメニューは、訪問者がサイトを簡単にナビゲートできるようにする上で重要な役割を果たします。ClickFunnels のナビゲーション要素とユニバーサルセクションを使用すると、ページ全体の一貫性を確保しながら、メニューを効率的に作成および管理できます。

ナビゲーション要素の追加

ナビゲーション要素を使用すると、メニューを作成し、サイト内の特定の宛先にリンクできます。ナビゲーション要素を追加するには:

ページ内のセクションと行に Navigation 要素を挿入します。
メニュー項目を追加し、ページまたはセクションへのリンクを設定します(例:ホーム、バージョン情報、連絡先)。
ナビゲーションメニューの外観をカスタマイズして、サイトのデザインに合わせて調整します。

詳細なガイダンスは、ナビゲーション: ページへのナビゲーションメニューの追加の記事を参照してください。です。

ユニバーサルセクションの追加

ユニバーサルセクションは、サイト上の複数のページに追加できる再利用可能なコンテナです。たとえば、ナビゲーションリンクを含むヘッダーまたはフッターをデザインし、ユニバーサルセクションとして保存できます。ユニバーサルセクションに加えられた更新は、それが使用されているすべてのページに自動的に適用され、一貫性が確保されます。

ユニバーサル断面を作成して挿入するには:

ページエディターでセクションを追加し、セクション内にコンテンツを追加します。
セクションにカーソルを合わせ、[ 保存] アイコンをクリックします。
セクションタイトルを挿入し、「セクションをユニバーサルにする」チェックボックスをオンにします。
「セクション を保存」 をクリックして、セクションをユニバーサル・セクションとして保存します。
この保存したセクションを挿入するページに移動します。
緑色の プラスアイコン をクリックし、[保存済み]カテゴリから保存済みセクションを見つけます。
ページ上の指定された場所にセクションを挿入します。

サイトのヘッダーとフッターに関する詳細なガイドについては、ユニバーサルヘッダーとフッターをサイトに追加するの記事を参照してください。

サイトページの追加

サイトでは、視聴者に完全なエクスペリエンスを提供するためにさまざまなページが必要です。サイトの目的に応じて、一般的なページの種類には、ホームページ、バージョン情報ページ、連絡先ページなどがあります。各ページは特定の機能を果たし、サイトのナビゲーションを効果的に構成するのに役立ちます。

新しいページを追加する方法

サイトとブログアプリに移動します。
左側のメニューで [サイトページ ]をクリックします。
[ 新しいサイトページ ] をクリックして、新しいページを作成します。
使用可能なテンプレートからページテンプレートを選択します。
ページエディターを使用して、ページのコンテンツとレイアウトをカスタマイズします。
変更を保存し、ページをナビゲーションメニューにリンクして、簡単にアクセスできるようにします。

サイトページの追加に関する詳細な手順については、サイトページを追加および管理する方法の記事をご覧ください。です。

ドメインをサイトに接続する

デフォルトでは、ClickFunnels はサブドメイン (workspace.myclickfunnels.com など) を提供するため、サイトはすぐに機能します。このサブドメインは、サイトの機能を探索およびテストするのに最適です。ただし、サイトをより多くの視聴者に宣伝し、ブランドのプロフェッショナリズムを高めるために、独自のドメインを接続することを強くお勧めします。

ドメインをサイトに接続する手順

ワークスペースから、左側のメニューにある サイトとブログ アプリをクリックします。
[ サイト設定] を選択します。
[ ドメイン] フィールドで、サイトに使用するドメインを選択します。
ページの上部または下部にある [サイトの更新] をクリックして、変更を保存します。

ドメインの接続について詳しくは、ドメインの接続 (自動セットアップ)の記事をご覧ください。

サイトの公開

サイトを公開するということは、サイトをライブにして視聴者がアクセスできるようにすることを意味します。サイトが公開されると、訪問者は設定したドメインを使用してサイトにアクセスできます。これは Web サイトを立ち上げるための最後のステップであり、すべてのページ、コンテンツ、ナビゲーションが一般公開される準備が整っていることを確認します。

サイトを公開する手順

ワークスペースから、左側のメニューにある サイトとブログ アプリをクリックします。
[ サイト設定] を選択します。
可用性オプションを [パブリック] に設定します。
ページの上部または下部にある [サイトの更新] をクリックして、変更を保存します。
次に、サイトとブログアプリの [ 概要 ] メニューに移動します。
ドメイン URL を視聴者と共有して、サイトへのトラフィックを促進します。

サイトを公開すると、サイトが確実に表示され、対話の準備が整い、ターゲットユーザーと効果的につながることができます。

サイトに関するよくある質問

サイトをホストするにはホスティングを購入する必要がありますか?

いいえ、ClickFunnelsには、サブスクリプションプランの一部としてすべてのサイトページのホスティングが含まれています。ホスティングサービスを別途購入する必要はありません。

ドメインを購入する必要がありますか?

ClickFunnels は、すべてのアカウントにデフォルトのサブドメイン (yourbusiness.myclickfunnels.com など) を提供し、サイトのテストと探索に最適です。ただし、ブランディングとプロフェッショナリズムのために、独自のドメインを接続できます。さらに、ClickFunnels はアカウントごとに 1 つの無料ドメインを提供します。詳細については、ClickFunnelsで無料ドメインを取得するの記事を参照してください。

テーマとスタイルガイドの違いは何ですか?

テーマは、サイトページ、ストアページ、ブログ、カスタマーセンターなど、ワークスペースのさまざまな領域に適用される、事前にデザインされたページテンプレートのコレクションです。一方、スタイルガイドは、フォントサイズ、色、境界線、影など、個々のページコンテンツに適用できる定義済みのスタイルオプションのセットです。テーマはページの全体的な構造とレイアウトを定義しますが、スタイルガイドはワークスペース全体の要素の視覚的外観の一貫性を保証します。

サイトにトラッキングコードを追加できますか?

はい。ClickFunnels を使用すると、サイト設定で追跡コードを追加できます。トラッキングコードまたはピクセルコードは、サイトのヘッダー()領域とフッター(<body>)領域に挿入できます。

サイトのSEOやソーシャル共有情報を管理できますか?

はい。SEOとソーシャル共有の設定は、[ サイト設定 ]セクションで管理できます。これには、メタタイトル、説明、ソーシャルメディア共有画像の編集が含まれ、サイトの可視性とリーチを向上させます。

サイトにカスタムコードを追加できますか?

はい。 HTML/JS 要素 を使用して、カスタム HTML および JavaScript コードをページに直接追加できます。追跡の目的で、ページエディター内のページのヘッダー領域とフッター領域にカスタムコードを挿入することもできます。

同じヘッダーとフッターを複数のページで再利用できますか?

はい。再利用可能なヘッダーとフッターは、 ユニバーサルセクションとして保存することで作成できます。これらは複数のページに追加でき、ユニバーサルセクションに加えた変更は、使用されているすべてのページで自動的に更新されます。

ウェブサイトにフォームを追加できますか?

はい。ページエディタのフォーム要素(入力、選択ボックス、テキスト領域、ボタン要素など)を使用して、フォームをWebサイトに追加できます。

モバイルユーザー向けにサイトを最適化するにはどうすればよいですか?

ClickFunnels ページエディターでは、モバイル編集モードに切り替えて、モバイルデバイス向けにコンテンツを最適化できます。これにより、小さな画面でサイトにアクセスするユーザーに最適なエクスペリエンスが保証されます。詳細な案内はモバイル最適化手法の記事を参照してください。