ページでスタイルガイドを使用する

スタイルガイドは、事前定義されたスタイルをフォント、色、ボタン、その他のデザイン要素に適用することで、ページのデザインの一貫性を維持するのに役立ちます。個々のコンポーネントを手動で調整する代わりに、スタイルガイドを使用すると、ページ全体に変更をすばやく均一に適用できます。この記事では、スタイルガイドとは何か、ページ編集中にスタイルガイドにどのようなメリットがあるか、ClickFunnels ページエディター内でスタイルガイドを適用またはアクセスするさまざまな方法について説明します。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ

スタイルガイドとは何ですか?

スタイルガイドは、同じガイドを使用しているすべてのページで、フォント、色、間隔、その他の表示スタイルなどのデザイン設定を定義および管理できる一元化されたツールです。スタイルガイドを使用すると、各要素を個別にカスタマイズする代わりに、一貫したデザインルールが自動的に適用され、統一感のあるプロフェッショナルな外観が作成されます。

例えば：

ブランドが見出し、ボタン、リンクに特定の色を使用している場合は、スタイルガイドでこれらの設定を行うことができます。
フォントを更新したり、ボタンのスタイルを調整したりすると、変更は同じスタイルガイドに接続されているすべてのページに自動的に適用されるため、時間と労力を節約できます。

スタイルガイドの詳細については、「スタイル入門」の記事を参照してください。

スタイルガイドはどこに適用できますか?

スタイルガイドは、一貫したブランディングとデザインを維持するために、さまざまな領域に適用できます。内訳は次のとおりです。

サイト全体: スタイルガイドをサイト全体に適用して、システムページ(ホームページ、ブログホーム、ストアフロント、コースホームなど)を含むすべてのページに同じスタイルが反映されるようにします。
目標到達プロセス： オプトイン、セールス、サンキューページなど、特定のファネル内のすべてのページにスタイルガイドを割り当てて、まとまりのあるデザインを確保します。
コース： スタイルガイドをコースホーム、モジュール、レッスンに適用して、一貫したコーススタイルを実現します。
ブログ: スタイルガイドを使用して、ブログホームページと個々のブログ投稿のスタイルを設定します。
ストアページ: ストアホーム(ストアフロント)と個々の製品ページにスタイルガイドを割り当てて、シームレスなショッピング体験を実現します。
ランディングページ: 独自のデザイン要件を満たすために、スタイルガイドを特定のページ(例:会社概要や連絡先)に適用します。

スタイルガイドの適用方法

スタイルガイドをページに適用するのは簡単で、Web サイトや目標到達プロセスのさまざまな部分でデザインの一一性が保たれます。さまざまなコンテキストでスタイルガイドを適用する方法は次のとおりです。

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

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

ファネルへのスタイルガイドの適用

[ ファネル ] メニューからカスタマイズするファネルに移動します。
目標到達プロセスの右側にある 歯車⚙ アイコンをクリックします。
ファネル設定パネルの スタイル ドロップダウンまで下にスクロールします。
ドロップダウンメニューから目的のスタイルガイドを選択します。
[ 目標到達プロセスの更新 ] をクリックして、目標到達プロセス内のすべてのページにスタイルガイドを適用します。

個々のファネルページへのスタイルガイドの適用

カスタマイズするページを含むファネルに移動します。
ファネルワークフローで目的のページを見つけます。
ページの横にある 3 つのドット (⋮) アイコンをクリックします。
ドロップダウンメニューから[ 設定 ]を選択します。
スタイル ガイドドロップダウン を見つけて、そのページに必要なスタイルを選択します。
[送信] をクリックして変更を適用します。

コースへのスタイルガイドの適用

ダッシュボードの左側のメニューにある コース アプリに移動します。
リストから編集するコースを見つけます。
コースタイトルの横にある歯車⚙アイコンをクリックします。
コース設定で、[ 詳細設定 ]セクションまで下にスクロールします。
[詳細設定] の横にある [設定] をクリックします。
設定パネルで [スタイル] ドロップダウンを見つけます。
ドロップダウンメニューから希望のスタイルガイドを選択します。
[コースの更新]をクリックして、選択したスタイルガイドをコース全体に適用します。

ブログへのスタイルガイドの適用

サイトとブログアプリに移動します。
[ ブログ] を選択します。
ブログダッシュボードの右上にある 歯車(⚙) アイコンをクリックします。
[ブログ情報] セクションで、[スタイル] ドロップダウンを見つけます。
そのページに必要なスタイルガイドを選択します。
[ ブログの更新] をクリックして、変更を適用します。

ブログページへのスタイルガイドの適用

サイトとブログアプリに移動します。
[ ブログ] を選択します。
目的のブログ投稿を見つけて、ページの右側にある編集アイコン ( ⚙ ) をクリックします。
[ 詳細設定 ] セクションで、[ スタイル] ドロップダウンを見つけます。
目的のスタイルガイドを選択し、[ ページの更新]をクリックします。

ストアページへのスタイルガイドの適用

ストア アプリに移動し、[概要] に移動します。
右上隅にある [ストアのカスタマイズ ] ボタンをクリックします。
ストアエディターで、スタイルガイドを適用するストアページ(ストアフロント、製品、チェックアウトなど)を選択します。
ページ名の横にある歯車⚙アイコンをクリックして、その設定を開きます。
[ 詳細設定 ] セクションで、[ スタイル] ドロップダウンを見つけます。
ドロップダウンメニューから希望のスタイルガイドを選択します。
[ ページの更新 ] をクリックして、選択したスタイルガイドをそのページに適用します。

ランディングページへのスタイルガイドの適用

左側のメニューから ランディングページ アプリに移動します。
目的のランディングページを見つけて、その横にある歯車アイコン( ⚙ )をクリックします。
[ 詳細設定 ] セクションで、[ スタイル] ドロップダウンを見つけます。
目的のスタイルガイドを選択し、[ ページの更新]をクリックします。

セクション、行、および要素からのスタイルガイドへのアクセス

スタイルガイドには、ページの個々のセクション、行、または要素から直接アクセスして更新できます。

警告
スタイルガイドに変更を加えると、同じスタイルガイドを使用するサイトの他のすべての領域が自動的に更新されます。

セクションからスタイルガイドにアクセスする

エディタで、アウトラインがハイライト されるまでセクション にカーソルを合わせます。
セクションの境界線に表示される歯車⚙をクリックします。
設定パネルで、[ ペイント] ドロップダウンを見つけます。
ドロップダウンの下にある [スタイルの色を編集 ] をクリックします。
スタイルガイドパネルが開き、ページエディターから直接更新できます。

行からのスタイルガイドへのアクセス

エディターで、アウトラインがハイ ライト表示される まで行にカーソルを合わせます。
行の境界線に表示される歯車⚙をクリックします。
設定パネルで、[ ペイント] ドロップダウンを見つけます。
ドロップダウンの下にある [スタイルの色を編集 ] をクリックします。
スタイルガイドパネルが開き、ページエディターから直接更新できます。

要素からスタイルガイドにアクセスする

ページ上の任意の要素(見出し、ボタン、画像など)を選択します。
要素の設定パネルで、[ スタイルの編集] オプションを探します。要素の種類によっては、これは異なる設定(タイポグラフィ、ボタンスタイルなど)に表示される場合があります。
[ スタイルの編集] をクリックして、スタイルガイドに従って要素の外観を更新します。