連絡先プロフィール: ユーザにプロファイルの管理を許可する

公開日: 2024年11月16日更新日: 2026年10月27日

連絡先プロフィール 要素を使用すると、使いやすいプロファイルアイコンをページに追加できます。これにより、ユーザーはアカウントの詳細を管理し、プロファイル設定にアクセスし、カスタマーセンターダッシュボード、コミュニティダッシュボード、その他のナビゲーションなどの重要なセクションに移動できます。この要素はユーザーのステータスに基づいて動的に調整され、ゲストには「サインイン」リンク、ログインしているユーザーにはプロフィールアイコンが表示されます。この記事では、連絡先プロフィール要素をページに追加し、その設定をカスタマイズしてシームレスでパーソナライズされたユーザーエクスペリエンスを実現する方法について説明します。

必要条件

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

ページエディタでの連絡先プロフィール要素の追加

ページエディタ内で、要素を 配置するセクション を追加します。
そのセクション内に行を追加します。
行内のオレンジ色の + (プラス) または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
その他 カテゴリから、連絡先プロフィール 要素を選択します。

連絡先プロフィール 要素を追加すると、ページデザインに合わせて外観をカスタマイズできます。

連絡先プロフィール要素の仕組み

連絡先プロフィール 要素は、サイトページ、ファネルページ、コース、ランディングページなど、ワークスペース内の任意のページで使用できます。これは、さまざまなワークスペース領域間でシームレスなエクスペリエンスを確保しながら、ユーザーアカウントを管理するための多用途ツールです。ログイン状態でレンダリングされたときのプレビューの例を次に示します。

ユーザーがすでにログインしている場合:

連絡先プロフィールのアイコンは、ログイン 状態を自動的に検出します。
ユーザーの プロフィールアイコン または アバターが表示され、「サインイン」テキストが置き換えられます。
アイコンをクリックすると、 プロファイルモーダルが開きます。

ユーザーがログインしていない場合:

この要素には、ログインしていないユーザー向けに サインイン テキストが表示されます。
サインイン テキストをクリックすると、ユーザーは カスタマーセンターのサインイン ページにリダイレクトされます。
サインイン後の移動先はサイトの設定によって異なります。たとえば、ユーザーがアクセスしようとしていたページや、カスタマーセンターに移動します。

連絡先プロフィール要素の動的な動作:

この要素は非常に動的であり、ユーザーのログイン状態とアクセスするドメインに基づいて適応します。ユーザーが 1 つのページ (サイトドメインのカスタマーセンターなど) にログインし、同じドメイン内の別のページ (ファネルページなど) にアクセスすると、連絡先プロフィール要素はログイン状態を自動的に認識し、適切なプロファイルアイコンを表示します。この動的な動作により、一貫したユーザーエクスペリエンスが保証され、ユーザーは異なるページ間を移動するときに繰り返しログインする必要がなくなります。

連絡先プロフィール要素のカスタマイズ

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

上マージン

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

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

サイズ & スペーシング

サイズ & スペーシング 設定は、連絡先プロフィール要素のサイズと位置を制御するのに役立ちます。内訳は次のとおりです。

幅: パーセンテージ (%) またはピクセル (px) 値を使用して要素の幅を調整します。
上: 要素の上のスペースをパーセンテージ (%) またはピクセル (px) で設定します。
下: 要素の下のスペースをパーセンテージ (%) またはピクセル (px) で設定します。
整列: 要素をコンテナの左、中央、または右に揃えます。

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

ゲストとログイン済み状態の設定

ゲスト 状態と ログイン済み 状態を使用すると、ユーザーのログインステータスに基づいて連絡先プロフィール要素の表示方法をカスタマイズできます。

ゲスト状態: ログインしていないユーザーの「サインイン」テキストと外観をカスタマイズします。
ログイン済み状態: ログインしたユーザーのプロフィールアイコン、アバター、ドロップダウンオプション、その他の設定を構成します。

詳細なカスタマイズ手順については、以下の「ゲスト状態設定」および「ログイン済み状態設定」セクションを参照してください。

タイポグラフィ

タイポグラフィ設定 では、要素内のテキストの外観を制御できます。連絡先プロフィール要素では、ゲストの「サインイン」リンクとナビゲーションリンクの ホバー状態 設定、および 連絡先名 と 連絡先メール コンポーネントに表示されます。上部で、スタイルガイドのテキストスタイルのプリセット (S、M、L、XL) を選択します。プリセットを選択した状態で スタイルを編集 をクリックするとスタイルガイドでそのプリセットを変更でき (そのプリセットを使用するすべての要素に反映されます)、上書き をクリックするとこの要素だけのフォント設定を調整できます。プリセットを使わずにフォント設定を直接行うには、… を選択します。

「サインイン」リンクとナビゲーションリンクの ホバー状態 のタイポグラフィには、行の高さ、不透明度、整列はありません。

フォントファミリー: このオプションを使用すると、テキストのフォントタイプを選択できます。ClickFunnels は、Google Fonts ライブラリからさまざまな人気のあるフォントを提供します。さらに、ワークスペース設定 > マイアセット > フォント に移動して、独自のカスタムフォントをアップロードして使用できます。アップロードすると、カスタムフォントが選択リストに表示され、使用できるようになります。
ウェイト: このオプションは、テキストの太さを定義します。フォントごとにサポートされているウェイトだけが表示されるため、選択できるウェイトは選択したフォントによって異なります (例: 薄い、レギュラー、セミボールド、ボールド)。細いウェイトは控えめな印象を与え、太いウェイトはより視覚的なインパクトを生み出します。
フォントサイズ: スライダーを使用するか、特定の値を手動で入力してテキストサイズを調整できます。さらに、サイズ測定には 2rem や 32px など、rem または px から選択できます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。
- Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem に選択し、スタイルガイドでデスクトップ用の基本フォントサイズを 16px に指定した場合、結果のテキストサイズはデスクトップビューで 32px になります (つまり、2rem × 16px = 32px)。
- Px は絶対測定値であり、テキストサイズを正確に制御できます。
文字間隔: 個々の文字間のスペースを調整します。スライダーを使用して値を増減するか、特定の値(レム単位で測定)を入力できます。間隔を長くすると文字が広がり、間隔を小さくすると文字が近づきます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの文字間隔値を個別に設定することもできます。
行の高さ: テキストの行間の垂直方向のスペースを制御します。これは通常、フォントサイズのパーセンテージとして表されます。パーセンテージを大きくすると、行間のスペースが増え、特に大きなテキストブロックの場合、読みやすさが向上します。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで行の高さの値を個別に設定することもできます。
色: カラーピッカーを使用して、テキストの色を選択します。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。さらに、2 番目のスライダーを使用して不透明度(アルファ値)を調整できます。左に動かすと不透明度が下がり、色がより透明になり、右に動かすと完全に不透明になります。
テキストの大文字小文字: テキストの大文字と小文字の表示方法を選択します。
- 小文字: すべてのテキストが小文字です。
- 大文字: すべてのテキストが大文字です。
- 大文字にする: 各単語の最初の文字を大文字にします。
装飾: 次のようなテキスト装飾を追加します。
- 下線: テキストの下に線を引きます。
- 取り消し線: テキストを水平線で取り消します。
- 下線 + 上線: テキストの下と上の両方に線を引きます。
不透明度: テキストの不透明度を調整します。スライダーを使用すると、テキストを多かれ少なかれ透明にすることができます。スライダーを 左 (0) に動かすと不透明度が下がり (テキストの透明度が高くなります)、右 (1) に動かすとテキストが完全に不透明になります。
整列: コンテナ内のテキストの配置を設定します。ページのデザインに基づいて、テキストを左、中央、または右に揃えることを選択できます。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで異なる配置を設定できます。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。
デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。
モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。
目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。
コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。
ごみ箱 (🗑️) アイコン: ページエディターからコンテナーを完全に削除します。

詳細設定

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

詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。

ゲスト状態設定

ゲスト状態 の設定では、ログインしていないユーザーに対して連絡先プロフィール要素の表示方法をカスタマイズできます。構成できる主な設定は次のとおりです。

リンク名:
- この設定では、「サインイン」リンクに表示されるテキストを定義できます。
- たとえば、「ログイン」、「サインイン」、または好みに基づいてカスタムテキストとしてラベルを付けることができます。
リンクパディング (上/下):
- 「サインイン」テキストの周囲の縦方向の間隔を調整します。
- スライダーを使用するか、特定の値をピクセル (px) 単位で入力して、バランスの取れた間隔を作成し、要素の視覚的な配置を改善します。
ホバー状態:
- ユーザーが “サインイン” テキストにカーソルを合わせたときの表示方法をカスタマイズします。
- デフォルト 状態と ホバー 状態を切り替えて、テキストの色、サイズ、またはフォントを変更して、インタラクティブなフィードバックを実現します。
アイコン前:
- 「サインイン」テキストの前にアイコンを追加して、より魅力的な外観にすることができます。
- 以下を設定します。
  - アイコンピッカー: アイコンリストからアイコンを選択します。
  - アイコンサイズ: デスクトップビューとモバイルビューのアイコンサイズを調整します。
  - アイコンの色: ブランドに合わせて色を設定します。
  - 左/右の余白: アイコンとテキストの間の間隔を微調整して、洗練されたレイアウトにします。

ログイン済み状態設定

ログイン済み状態 の設定は、すでにアカウントにログインしているユーザーに対して連絡先プロフィール要素がどのように表示されるかを制御します。以下は、主な機能とカスタマイズオプションの内訳です。

プレビューオープンプロファイル

隠す/プレビュー: これらのボタンを使用すると、ユーザーがプロファイルアイコンを操作したときにプロファイルモーダルがどのように表示されるかをシミュレートできます。
- 隠す: 編集中にプロファイルモーダルを非表示にします。
- プレビュー: モーダルを表示して、そのデザインと内容を確認できます。

コンポーネント設定

プロファイルモーダルには、ニーズに合わせてカスタマイズできるいくつかのコンポーネントが含まれています。

プロファイルモーダル

プロファイルモーダルコンポーネントには、その外観とレイアウトを制御できるさまざまな設定が用意されています。これらの設定により、ページのブランディングやユーザーインターフェイスに合わせたモーダルデザインを作成できます。利用可能な設定とその影響の概要は次のとおりです。

一般的なレイアウト

サイズ 設定では、デバイスアイコン ( 🖥️ & 📱 ) を使用して、幅、アイコンサイズ、パディングサイド、垂直パディング をデスクトップとモバイルで個別に設定できます。

上マージン: モーダルの上のスペースを調整して、ページ内に正確に配置します。
幅: モーダルの幅をピクセル単位 (0～320px) で定義し、モーダルが占める画面スペースの量を決定します。
アイコンサイズ: モーダル上部に表示されるプロフィールアイコンまたはアバターのサイズ (0～150px) をカスタマイズして、コンテンツに比例していることを確認します。
パディングサイド と 垂直パディング: コンテンツの周囲の内側の間隔 (左右は最大 40px、上下は最大 100px) を調整して、モーダル内の呼吸スペースを制御するのに役立ちます。

ボーダー

モーダルの周囲のボーダーを有効または無効にします。
スタイル: 事前定義されたボーダースタイルから選択するか、デザインに合わせてカスタマイズします。
ボーダー: モーダルのどの辺にボーダーを表示するかを選択します (例: すべての側面、上部のみなど)。
色とストロークサイズ: ブランディングに合わせてボーダーの色と太さをカスタマイズします。

バックグラウンド

画像 URL: モーダルに背景画像を追加して、視覚的に魅力的なデザインを実現します。
画像のスタイルとフィット感: 画像の表示方法(ストレッチ、繰り返し、配置など)を制御できます。
色: 背景色と前景色をスタンドアロンとして設定するか、イメージと組み合わせて設定します。

コーナー

スタイル: 角の半径を調整して、正方形、丸みを帯びた、または完全な円形のエッジを作成します。
すべてのコーナー: 均一なコーナーの丸みを適用するか、個別のエッジを有効にして各コーナーを個別に調整します。

シャドウ

スタイル: 定義済みのシャドウスタイルから選択して、モーダルに視覚的なレイヤーを追加します。
シャドウスタイル: アウトセット (モーダルの外側のシャドウ)または インセット (モーダルの内側のシャドウ)のいずれかを選択して、目的の効果を作成します。
X方向とY方向: シャドウの水平方向と垂直方向の位置を調整して、モーダルを基準にした配置を制御します。
ブラー: シャドウのぼかしの量を設定し、シャープまたはソフトな外観を作成します。
広がり: シャドウがどこまで伸びるかを制御し、ページ上でのシャドウの目立ち具合に影響を与えます。
カラー: シャドウの色をカスタマイズして、ページデザインに合わせて、またはモーダルの背景と対照します。

連絡先名と連絡先メール

連絡先プロフィール要素の 連絡先名 と 連絡先メール コンポーネントは、ログイン時にユーザーの名前とメールアドレスを動的に表示します。各コンポーネントには個別の設定があり、どちらにも以下のオプションがあります。

タイポグラフィ

フォントファミリと太さ: フォントスタイルを選択し、太さを調整します。
フォントサイズと行の高さ: デスクトップビューとモバイルビューのフォントサイズと間隔を設定します。
文字間隔: デスクトップとモバイルの両方で文字間の間隔を制御します。
色: ブランディングに合わせてテキストの色をカスタマイズします。
テキストの大文字と小文字と装飾: 大文字、小文字、または大文字のテキストを適用し、下線、取り消し線、下線 + 上線などの効果を追加します。
配置と不透明度: テキストを左、中央、または右に揃え、透明度を制御します。

テキストシャドウ

テキストシャドウを有効にする: シャドウ効果のオンとオフを切り替えます。
オフセット-Xおよびオフセット-Y: シャドウの水平位置と垂直位置を調整します。
ブラー: シャドウのエッジのシャープさまたは柔らかさを定義します。
カラー: テキストを引き立てるシャドウの色を選択します。

ナビゲーションリンク

連絡先プロフィール要素の ナビゲーションリンク コンポーネントを使用すると、ファネルまたは外部リンク内でシームレスにナビゲーションするためのメニュー項目を表示できます。デフォルトのメニュー項目が事前に構成されていますが、ニーズに合わせてさらにカスタマイズできます。

デフォルトのメニュー項目

ClickFunnels は、ナビゲーションリンク コンポーネントに 4 つのデフォルトメニュー項目 を自動的に含めます。これらは 追加ナビゲーションリンク に表示されます。

ダッシュボード: カスタマーセンターへのリンク。デフォルトでは非表示です。
アカウント設定: 顧客のアカウント設定へのリンク。
コミュニティ: サイトのコミュニティへのリンク。デフォルトでは非表示で、サイトにコミュニティがある場合にのみ公開ページに表示されます。
サインアウト: ユーザーをサインアウトさせます。

これらのメニューはそれぞれのセクションに事前にリンクされており、手動セットアップを必要とせずに機能が保証されます。ただし、これらのメニューをクリックして、名前とアイコンをカスタマイズできます。デフォルトのメニュー項目にカーソルを合わせて目のアイコンをクリックすると、表示/非表示を切り替えられます。デフォルトのメニュー項目は非表示にできますが、削除はできません。

カスタムメニュー項目の追加

追加のナビゲーションオプションを含めるには:

+ メニュー ボタンをクリックします。
新しいメニュー項目をクリックし、Link name を入力します (例: ヘルプ、FAQ、サポート)。
Link To で、項目をクリックしたときの動作 (ページや URL への移動など) を選択します。
必要に応じて、Icon でアイコンを選択します。

カスタムメニュー項目を削除するには、項目にカーソルを合わせてごみ箱アイコンをクリックします。メニュー項目はドラッグして並べ替えることができます。

スペーシング

リンク間の隙間: ナビゲーションコンテナ で、メニュー項目間の間隔を調整して、レイアウトを改善します。

ホバー状態

ホバー状態機能を使用すると、ナビゲーションリンクを 2 つの異なる条件でどのように表示するかを定義できます。

デフォルト状態: これは、メニュー項目が操作されていないときの外観を制御します。これは、ページ上のリンクの規則的で静的な外観を表します。
ホバー状態: これは、ユーザーがメニュー項目の上にマウスを置いたときにメニュー項目がどのように表示され、インタラクティブな効果を作成するかを定義します。テキストの色、フォントの太さ、下線などの要素をカスタマイズして、リンクを強調して注意を引くことができます。

これらの状態のいずれかを選択すると、フォントサイズ、文字間隔、テキストの色、装飾などのタイポグラフィ設定を個別に調整して、状態ごとに独自のスタイルを作成できます。この柔軟性により、インタラクティブ性とユーザーエクスペリエンスを向上させながら、プロフェッショナルなデザインを維持できます。

タイポグラフィ

フォントファミリと太さ: フォントスタイルを選択し、太さを調整します。
フォントサイズ: デスクトップビューとモバイルビューのフォントサイズを設定します。
文字間隔: デスクトップとモバイルの両方で文字間の間隔を制御します。
色: ブランディングに合わせてテキストの色をカスタマイズします。
テキストの大文字と小文字と装飾: 大文字、小文字、または大文字のテキストを適用し、下線、取り消し線、下線 + 上線などの効果を追加します。

アイコン/アバター

ユーザーがアバターをアップロードしていない場合は、代わりに プロフィールアイコン が表示されます。このアイコンには、ユーザーの姓名の最初の 2 つのイニシャルが含まれます (たとえば、John Doe は “JD” と表示されます)。ユーザーに姓がない場合は、名の最初の 2 文字が表示されます。
表示状態 で、エディターのプレビューを アイコン と アバター の間で切り替えます。これはプレビューのみで、公開ページでは連絡先がアバターをアップロードしている場合にのみアバターが表示されます。そのうえで、アイコン設定 で以下を調整します。
- アイコンサイズ: アイコンまたはアバターのサイズをピクセル単位 (0～150px) で設定します。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで異なるサイズを設定できます。
- 背景色: アイコンの背景色をカスタマイズします。表示状態 が アイコン の場合に使用できます。
- 色: プロフィールアイコンのイニシャルのテキスト色を設定します。表示状態 が アイコン の場合に使用できます。
- ボーダー: アイコン/アバターの周囲のボーダーを有効または無効にします。
- コーナー: コーナーの半径を調整して、アイコン/アバターを円形または正方形にし、各エッジを細かく制御します。

例 1: プロファイルアイコンがユーザーに対してレンダリングされると、次のようになります。

例 2: アバターがユーザーのレンダリングされた場合(アバターがカスタマーセンタープロファイルのユーザーによってアップロードされた場合のみ):