JetEngine Profile Builderで会員マイページを作る前に考えること

jetengine-profile-builder-thumbnail-simple

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

会員マイページはElementorユーザーにとって魅力的な機能です。ログイン後の画面、プロフィール編集、受講中の講座、資料一覧、問い合わせ履歴のようなページを作れれば、静的なサイトから一気に仕組みのあるサイトへ進めます。ただし、会員ページは見た目より先に、権限とデータの設計を決める必要があります。

この記事ではJetEngineのProfile Builderを使って、講座受講者向けのマイページを作る前に考えることを整理します。いきなり大きな会員サイトを作るのではなく、受講者が自分の講座と資料を確認できる小さなマイページから始める例です。

この記事の結論

Profile Builderはアカウントページとサブページを組み立てるためのJetEngine機能です。最初に決めるべきなのは、メニュー数、表示するデータ、編集できる項目、未ログイン時の動き、ユーザー権限です。

公式情報では、Profile Builderはユーザーの個人アカウントを作り、フロント側から情報を送信・編集できる機能として説明されています。Pages、Account Page、Advancedなどの設定があり、Account Pageにはサブページを追加できます。ContentモードとRewriteモードの違いもあるため、まずは小さな構成で理解するのが安全です。

JetEngine公式ページを見てみる

Profile Builderで作る受講者マイページの全体像

この記事で分かること

  • Profile Builderで最初に作るべきマイページ構成
  • 受講者マイページに持たせるユーザー情報と講座データ
  • Elementor側でメニューとサブページを表示する流れ
  • 表示条件と権限で個人情報を守る考え方
  • 編集フォームで触らせる項目を絞る理由
  • 複雑な会員サイトへ広げる前の判断基準

まず何を作るのか

今回の例はオンライン講座サイトの受講者マイページです。受講者はログイン後に、自分の登録情報、受講中の講座、資料リンク、問い合わせ導線を確認できます。決済、細かな学習進捗、動画配信、権限の多段階管理までは作りません。

静的なElementorサイトでは、講座ページと資料ページを固定ページとして作り、必要な人へURLを送る運用になりがちです。受講者ごとに見せる資料が違う、プロフィールを更新したい、受講中の講座だけ見せたい、という状態になると手作業が増えます。

Profile Builderを使うと、アカウントページの中にサブページを作れます。Elementorで各サブページのテンプレートを作り、JetEngine側でメニューとして登録します。ここで考えるべきなのはページを増やすことではなく、誰に何を見せるかを先に決めることです。

最初のページ構成を小さく決める

Profile Builderのアカウントページとサブページ構成

最初はホーム、プロフィール、受講中の講座、資料一覧、問い合わせの五つでも多いくらいです。お知らせ、請求、領収書、受講証明、予約、チャットを一気に入れると、メニューが増え、権限設定も複雑になります。

メニュー名 スラッグ テンプレート例 役割
ホーム dashboard 受講状況サマリー 最初に見る画面
プロフィール profile 表示名・連絡設定 本人が一部情報を確認
受講中の講座 my-courses 講座カード一覧 自分に関係する講座を表示
資料一覧 materials 資料リンク一覧 受講者向け資料を探す
問い合わせ support 簡単な問い合わせフォーム サポート導線を置く

JetEngineでどのデータを持たせるのか

ユーザー、受講データ、講座ページの関係

マイページで使うデータは大きく3つに分けます。1つ目はWordPressユーザー情報です。2つ目は講座データです。データの箱(CPT)として course を作り、講座名、開催日、資料URL、受講対象を持たせます。3つ目は受講者と講座を結ぶデータです。

メールアドレス、住所、電話番号、支払い情報などを何でも編集可能にするのは危険です。本人確認や通知、外部サービス連携が絡む項目は標準のWordPressユーザー管理や専用プラグインの設計も確認してください。

データ 名前例 サンプル値 使い道
講座CPT course CPT Elementor実践講座 講座カードの元データ
資料URL material_url URL https://example.com/material.pdf 資料一覧に表示
受講状態 learning_status Select active / finished 受講中だけ出す
会員種別 member_type Select basic / pro 表示範囲を分ける
通知設定 notice_optin Switcher true 本人が変更できる項目

Elementor側ではどう表示するのか

Elementor側ではAccount PageにProfile Menuを置き、ContentモードならProfile Subpage Contentを置きます。メニューをクリックしたときにサブページ内容を表示する流れです。受講中の講座ページではListing Gridに講座カードを出します。条件はログイン中のユーザーに関連づく講座だけです。

表示条件は便利ですが、セキュリティそのものではありません。見た目として隠れていても、ファイルURLや固定ページURLに直接アクセスできるなら意味がありません。資料ファイルは保存場所やアクセス制限も合わせて確認します。

会員マイページの表示条件と権限設計

編集フォームで触らせる項目を絞る

Profile Builderではサブページにフォームを置いてユーザー情報を編集する構成も作れます。ただし、最初に編集可能にする項目は絞ってください。表示名、自己紹介、通知設定のような軽い項目から始めるのが安全です。

フォームを置く場合は、JetFormBuilderなどの申し込みフォーム・編集フォーム系の仕組みを使う場面もあります。ここで大切なのはフォームの見た目ではなく、更新できるデータを制限することです。

Profile Builderで編集フォームを置くときの安全な項目設計

任意のコードで未ログイン時の導線を補う

Account Page設定には、未ログインユーザーがアクセスしたときの動きがあります。標準設定で解決できることが多いですが、特定のアカウントページだけ独自のログインページへ送る必要があるなら、WordPressの標準フックで補助できます。Code Snippetsプラグイン、または子テーマの functions.php に追加します。

“`php
add_action( ‘template_redirect’, function () {
if ( is_user_logged_in() ) { return; }
if ( is_page( ‘my-account’ ) ) {
wp_safe_redirect( home_url( ‘/login/’ ) );
exit;
}
} );
“`

運用すると何が楽になるのか

受講者マイページがあると、資料URLや講座情報を毎回メールで探してもらう必要が減ります。受講者はログインして、受講中の講座を開き、資料を確認し、必要なら問い合わせフォームへ進めます。運用担当者は講座データや関連づけを更新すれば、Elementorの固定ページを何度も編集しなくて済みます。

受講者がログインして資料を見る運用フロー

どこから複雑になりすぎるのか

Profile Builderで始めやすいのは、簡単なマイページ、プロフィール確認、受講中講座の一覧、資料リンク、簡単な問い合わせ導線です。逆に、決済、領収書、契約、重要な個人情報、細かな権限分岐、大量ユーザーのパフォーマンス管理まで入ると、標準設定だけで考えるのは危険です。

マイページでよくある失敗は、利用者が本当に見る前にメニューを増やすことです。ホーム、プロフィール、受講中の講座、資料一覧だけでも、初回ログイン時には十分な情報量になります。請求、領収書、予約、サポート履歴を最初から足すと、権限確認と表示条件が増え、テスト項目も一気に増えます。

受講者と講座の関係は、運用担当者が更新しやすい形にしてください。管理画面で講座を選ぶだけで反映されるのか、フォーム送信後に自動で関連づくのか、退会や受講期限切れでどう外すのかを決めます。ここを曖昧にすると、Elementor側の見た目が完成しても、実際の運用で毎回手作業が残ります。

プロフィール編集では変更できる項目を少なくするほど安全です。表示名や通知設定は比較的扱いやすいですが、メールアドレスやパスワードは本人確認や通知が必要です。住所や電話番号を扱うなら、保存目的、削除方法、閲覧できる管理者を明確にします。

静的ページとの大きな違いは、同じテンプレートを全員に使い、表示する中身だけを変える点です。Elementorではカードの形、余白、見出し、資料リンクの見た目を作ります。JetEngineでは、現在のユーザーに関係する講座だけを出す条件を作ります。この役割分担を守ると、ページ数が増えても管理しやすくなります。

マイページでよくある失敗は、利用者が本当に見る前にメニューを増やすことです。ホーム、プロフィール、受講中の講座、資料一覧だけでも、初回ログイン時には十分な情報量になります。請求、領収書、予約、サポート履歴を最初から足すと、権限確認と表示条件が増え、テスト項目も一気に増えます。

受講者と講座の関係は、運用担当者が更新しやすい形にしてください。管理画面で講座を選ぶだけで反映されるのか、フォーム送信後に自動で関連づくのか、退会や受講期限切れでどう外すのかを決めます。ここを曖昧にすると、Elementor側の見た目が完成しても、実際の運用で毎回手作業が残ります。

プロフィール編集では変更できる項目を少なくするほど安全です。表示名や通知設定は比較的扱いやすいですが、メールアドレスやパスワードは本人確認や通知が必要です。住所や電話番号を扱うなら、保存目的、削除方法、閲覧できる管理者を明確にします。

静的ページとの大きな違いは、同じテンプレートを全員に使い、表示する中身だけを変える点です。Elementorではカードの形、余白、見出し、資料リンクの見た目を作ります。JetEngineでは、現在のユーザーに関係する講座だけを出す条件を作ります。この役割分担を守ると、ページ数が増えても管理しやすくなります。

マイページでよくある失敗は、利用者が本当に見る前にメニューを増やすことです。ホーム、プロフィール、受講中の講座、資料一覧だけでも、初回ログイン時には十分な情報量になります。請求、領収書、予約、サポート履歴を最初から足すと、権限確認と表示条件が増え、テスト項目も一気に増えます。

受講者と講座の関係は、運用担当者が更新しやすい形にしてください。管理画面で講座を選ぶだけで反映されるのか、フォーム送信後に自動で関連づくのか、退会や受講期限切れでどう外すのかを決めます。ここを曖昧にすると、Elementor側の見た目が完成しても、実際の運用で毎回手作業が残ります。

プロフィール編集では変更できる項目を少なくするほど安全です。表示名や通知設定は比較的扱いやすいですが、メールアドレスやパスワードは本人確認や通知が必要です。住所や電話番号を扱うなら、保存目的、削除方法、閲覧できる管理者を明確にします。

静的ページとの大きな違いは、同じテンプレートを全員に使い、表示する中身だけを変える点です。Elementorではカードの形、余白、見出し、資料リンクの見た目を作ります。JetEngineでは、現在のユーザーに関係する講座だけを出す条件を作ります。この役割分担を守ると、ページ数が増えても管理しやすくなります。

マイページでよくある失敗は、利用者が本当に見る前にメニューを増やすことです。ホーム、プロフィール、受講中の講座、資料一覧だけでも、初回ログイン時には十分な情報量になります。請求、領収書、予約、サポート履歴を最初から足すと、権限確認と表示条件が増え、テスト項目も一気に増えます。

受講者と講座の関係は、運用担当者が更新しやすい形にしてください。管理画面で講座を選ぶだけで反映されるのか、フォーム送信後に自動で関連づくのか、退会や受講期限切れでどう外すのかを決めます。ここを曖昧にすると、Elementor側の見た目が完成しても、実際の運用で毎回手作業が残ります。

プロフィール編集では変更できる項目を少なくするほど安全です。表示名や通知設定は比較的扱いやすいですが、メールアドレスやパスワードは本人確認や通知が必要です。住所や電話番号を扱うなら、保存目的、削除方法、閲覧できる管理者を明確にします。

静的ページとの大きな違いは、同じテンプレートを全員に使い、表示する中身だけを変える点です。Elementorではカードの形、余白、見出し、資料リンクの見た目を作ります。JetEngineでは、現在のユーザーに関係する講座だけを出す条件を作ります。この役割分担を守ると、ページ数が増えても管理しやすくなります。

マイページでよくある失敗は、利用者が本当に見る前にメニューを増やすことです。ホーム、プロフィール、受講中の講座、資料一覧だけでも、初回ログイン時には十分な情報量になります。請求、領収書、予約、サポート履歴を最初から足すと、権限確認と表示条件が増え、テスト項目も一気に増えます。

受講者と講座の関係は、運用担当者が更新しやすい形にしてください。管理画面で講座を選ぶだけで反映されるのか、フォーム送信後に自動で関連づくのか、退会や受講期限切れでどう外すのかを決めます。ここを曖昧にすると、Elementor側の見た目が完成しても、実際の運用で毎回手作業が残ります。

プロフィール編集では変更できる項目を少なくするほど安全です。表示名や通知設定は比較的扱いやすいですが、メールアドレスやパスワードは本人確認や通知が必要です。住所や電話番号を扱うなら、保存目的、削除方法、閲覧できる管理者を明確にします。

静的ページとの大きな違いは、同じテンプレートを全員に使い、表示する中身だけを変える点です。Elementorではカードの形、余白、見出し、資料リンクの見た目を作ります。JetEngineでは、現在のユーザーに関係する講座だけを出す条件を作ります。この役割分担を守ると、ページ数が増えても管理しやすくなります。

会員ページが複雑になりすぎる境界

この構成が向いている人、向いていない人

向いているのは、Elementorで講座ページや会員向けページを作っていて、受講者ごとの情報表示を少し整理したい人です。静的ページを人数分作るのではなく、ユーザー、講座、表示条件をつなげて共通テンプレートで表示したい場合に向いています。

向いていないのは、会員制サービス全体を一気にJetEngineだけで完結させたいケースです。決済、契約、本人確認、動画保護、細かな権限、監査ログ、サポート履歴まで含むなら、専用サービスやカスタム開発との組み合わせを検討してください。JetEngineはページとデータの土台を作る道具であり、会員ビジネスの安全設計を自動で全部代わりにやってくれるものではありません。

作る前に確認したいこと

未ログイン時の動き、会員ロール、表示できるサブページ、編集できる項目、資料ファイルの保護、退会時のデータ扱いを先に決めてください。公式ライセンス、アップデート、バックアップ、テスト環境での確認も必須です。

まとめ

JetEngine Profile Builderは、Elementorサイトに会員マイページを足すための強力な選択肢です。Account Page、サブページ、Profile Menu、表示条件を組み合わせることで、受講者が自分の講座や資料を確認できる画面を作れます。重要なのは、メニューを増やすことではなく、誰に何を見せるか、何を編集させるかを小さく決めることです。

静的なElementorページから一歩進めるなら、まずは受講者マイページの最小構成から始めてください。ユーザー情報、講座データ、表示条件を分けて考えれば、運用担当者も更新しやすくなります。逆に、決済や重要な個人情報まで扱う段階では、JetEngineだけに寄せすぎず、セキュリティと運用の設計を別枠で確認するのが現実的です。

JetEngine公式ページを見てみる