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

Prev Next

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


必要条件

  1. アクティブなClickFunnelsアカウント

  2. 「サイト&ブログ」アプリがワークスペースに追加されました


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

  1. 左側のメインメニューから、[ + アプリの追加 をクリックして、[アプリ]ページに移動します。

  2.  Site app が見つかるまで下にスクロールし、それをクリックします。

  3. [アプリの追加]ボタンをクリックして、選択を確定 アプリ ボタン。

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


サイト概要へのアクセス

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

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

  1. ClickFunnelsアカウントにログインします。

  2. 左側のメニューの [ アプリ ] セクションに移動します。

  3. [サイトとブログ]をクリックして、[サイトの概要]ページを開きます。
     

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

  • 最近の投稿: 最新のブログ投稿を表示および管理します。

  • サイトページ: Web サイトのページにアクセスして作成します。

  • テーマプレビュー: 現在のテーマを確認し、変更を加えます。

  • クイックリンク: 新しいページや投稿を作成したり、カスタマーセンターを管理したりするためのショートカットオプション。


テーマの選択

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

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

テーマへのアクセス

  1. [ワークスペース設定] > [テーマ] に移動します。

  2. リストで利用可能なテーマを参照するか、新しいテーマを作成します。

サイトへのテーマの適用

  1. ワークスペースから、左側のメニューにあるサイトとブログアプリをクリックします。

  2. [サイト設定] を選択します。

  3. [ デフォルトのテーマ ] オプションまでスクロールし、リストからテーマを選択します。

  4. [ サイトの更新 ] をクリックして、テーマをサイトに適用します。

手記:

新しいワークスペースを作成すると、デフォルトの ヒーローテーマ が自動的に適用されます。このテーマには、必要なすべてのページとアプリのテンプレートが含まれています。新しいテーマを作成し、ライブとして宣伝することで置き換えることができます。

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


スタイルガイドの選択

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

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

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

  • 一貫性を保つには、見出し、小見出し、本文のフォント スタイルとサイズを定義します。

  • テキスト、背景、アクセントのカラーパレットを確立し、ブランドカラーが一貫して適用されるようにします。

  • 形状、影、境界線、角の半径などの定義済みのスタイルでボタンをカスタマイズします。

  • デザイン要素の境界線と影を構成して、まとまりのある外観を作成します。

スタイルガイドの作成

  1. ClickFunnelsダッシュボードの左下にある [ワークスペース設定 ]をクリックします。

  2. 左側のメニューを下にスクロールし、[ スタイル]をクリックします。

  3. 右上の [ 新しいスタイル] ボタンをクリックします。

  4. 新しいスタイルの 「名前 」を入力します。

  5. [スタイルを作成]をクリックして保存します。

手記:

ワークスペースを作成すると、デフォルトのスタイルガイドがヒーローテーマに含まれています。つまり、新しいテーマを作成すると、対応するスタイルガイドもワークスペースに生成され、テーマにリンクされます。テーマをサイトにプロモートすると、関連するスタイルガイドが自動的に適用され、テーマのテンプレートページがスタイルガイドの事前定義されたスタイルに従うようになります。

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

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

  1. ワークスペースから、左側のメニューにあるサイトとブログアプリをクリックします。

  2. [サイト設定] を選択します。

  3. [サイト設定]パネルの 詳細設定 セクションまで下にスクロールします。

  4. [詳細設定]の下に スタイル ドロップダウンを見つけます。

  5. ドロップダウンをクリックし、目的のスタイルガイド(例:「デフォルトのスタイルガイド」またはカスタムスタイルガイド)を選択します。

  6. ページの上部または下部にある サイトの更新 をクリックして、変更を保存します。


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

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

  1. サイトの概要の「 サイトの編集 」ボタンをクリックします。

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

  3. [ 保存] をクリックして変更を保存します。

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


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

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

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

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

  • ページ内のセクションと行に Navigation 要素を挿入します。

  • メニュー項目を追加し、ページまたはセクションへのリンクを設定します(例:ホーム、バージョン情報、連絡先)。

  • ナビゲーション メニューの外観をカスタマイズして、サイトのデザインに合わせて調整します。

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

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

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

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

  1. ページ エディターでセクションを追加し、セクション内にコンテンツを追加します。

  2. セクションにカーソルを合わせ、[ 保存] アイコンをクリックします。

  3. セクションタイトルを挿入し、「セクションをユニバーサルにする」チェックボックスをオンにします。

  4. 「セクション を保存」 をクリックして、セクションをユニバーサル・セクションとして保存します。

  5. この保存したセクションを挿入するページに移動します。

  6. 緑色の プラスアイコン をクリックし、[保存済み]カテゴリから保存済みセクションを見つけます。

  7. ページ上の指定された場所にセクションを挿入します。

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


サイトページの追加

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

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

  1. サイトとブログアプリに移動します。

  2. 左側のメニューで [サイトページ ]をクリックします。

  3. [ 新しいサイト ページ ] をクリックして、新しいページを作成します。

  4. 使用可能なテンプレートからページテンプレートを選択します。

  5. ページ エディターを使用して、ページのコンテンツとレイアウトをカスタマイズします。

  6. 変更を保存し、ページをナビゲーションメニューにリンクして、簡単にアクセスできるようにします。

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


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

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

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

  1. ワークスペースから、左側のメニューにある サイトとブログ アプリをクリックします。

  2. [ サイト設定] を選択します。

  3. [ ドメイン] フィールドで、サイトに使用するドメインを選択します。

  4. ページの上部または下部にある [サイトの更新] をクリックして、変更を保存します。

大事な:

サイト&ブログアプリに接続されているドメインは、コース、ストア、ブログ、カスタマーセンター、ランディングページ、コミュニティに使用されます。      これらの機能は、サイト設定に接続されているのと同じドメインを共有する必要があります。

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


サイトの公開

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

サイトを公開する手順

  1. ワークスペースから、左側のメニューにある サイトとブログ アプリをクリックします。

  2. [ サイト設定] を選択します。

  3. 可用性オプションを [パブリック] に設定します。

  4. ページの上部または下部にある [サイトの更新] をクリックして、変更を保存します。

  5. 次に、サイトとブログ アプリの [ 概要 ] メニューに移動します。

  6. ドメイン URL を視聴者と共有して、サイトへのトラフィックを促進します。

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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