JetEngineとElementor Proの違い。動的サイト制作で見るべきポイント

Elementor Proを使っていると、ヘッダー、フッター、投稿テンプレート、アーカイブページまでかなり自由に作れます。静的なLPや通常のブログ型サイトなら、それだけで十分な場面も多いです。では、JetEngineはどこで必要になるのでしょうか。

結論から言うと、Elementor Proは「見た目のテンプレートを作る力」が強く、JetEngineは「サイト内で扱うデータの型を作り、一覧や条件表示に回す力」が強いです。どちらが上という話ではなく、作りたいものが静的ページ寄りか、動的なデータ管理寄りかで見方が変わります。

この記事では、講座ディレクトリを例にします。講座名、料金、対象者、開催日、おすすめ表示をWordPress側に持たせ、Elementorではカード一覧や詳細ページとして表示する構成です。ページを1枚ずつ作るだけならElementor Proで足りますが、講座が増え、一覧、絞り込み、表示条件まで必要になると、JetEngineの役割が見えてきます。

JetEngine公式ページを見てみる

この記事で分かること

• Elementor ProとJetEngineを同じ土俵で比べすぎない考え方
• 講座ディレクトリを例にしたデータの箱と入力項目の作り方
• Elementor側でどこまで表示でき、どこからJetEngineが必要になるか
• Query Builderや表示条件を使う前に決めておく運用ルール
• 複雑にしすぎないための境界線

まず何を作るのか

今回のサンプルは「講座一覧サイト」です。トップページには講座カードを並べ、詳細ページでは料金、対象者、開催日、申し込み導線を表示します。管理者はWordPressの投稿編集画面で講座情報を入力し、Elementorで作った一覧テンプレートに自動反映される、という流れです。

静的な作り方なら、Elementorでカードを3つ作り、講座名と料金を直接入力します。最初はこれで十分です。ただ、講座が10件、20件と増えると、カードの複製、並び替え、古い料金の修正、受付終了の表示切り替えが手作業になります。ここで少し苦しくなります。

JetEngineを使う場合は、講座そのものをデータの箱（CPT）として作ります。サンプルの設定名は course、管理画面の表示名は「講座」です。1件の講座投稿に、料金や対象者の入力項目を持たせます。Elementor側では1件分のカードだけを作り、Listing Gridで複数件を並べます。

Elementor Proの得意なこと

Elementor Proの強みは、サイトの共通パーツやテンプレートを視覚的に作れることです。公式ヘルプでもTheme Builderはヘッダー、フッター、投稿、アーカイブ、WooCommerce関連のテンプレートを作る機能として説明されています。つまり、WordPressテーマ側が担当していた表示部分を、Elementorの画面で組み立てやすくするものです。

Dynamic Tagsも重要です。投稿タイトル、抜粋、投稿URL、カスタムフィールドなど、ページごとに変わる値をウィジェットへ差し込めます。たとえば、見出しウィジェットに投稿タイトルを表示し、画像ウィジェットにアイキャッチ画像を入れ、ボタンのリンクに投稿URLを入れる。こういう表示の差し込みはElementor Proの範囲で扱えます。

ただし、Elementor Proは「どんなデータ構造を作るか」まで全部面倒を見てくれる道具ではありません。投稿タイプ、入力項目、関連データ、一覧クエリ、管理画面での絞り込みまで設計したい場合は、別の土台が必要です。ACFなどで入力項目を作る方法もありますし、JetEngineでデータ作成から一覧表示までまとめて設計する方法もあります。

JetEngineの得意なこと

JetEngineの中心は、動的コンテンツの土台作りです。公式ページでも、カスタム投稿タイプ、カスタムフィールド、メタボックス、Options Page、Listing Grid、Dynamic Tags、Relations、Query Builderなどが紹介されています。要するに、WordPressの中に「扱いやすいデータの型」を作り、それを一覧や詳細ページへ流す方向が得意です。

講座ディレクトリなら、次のような入力項目を作ります。ここでのポイントは、本文に全部書かないことです。「初心者向けで料金は19,800円、開催日は2026年6月12日」と本文に書いてしまうと、料金順の並び替えや開催日順の表示に使いにくくなります。項目として分けるから、一覧や条件表示に使えます。

ここで迷いやすいのが、Selectの値です。画面に出すラベルは「初心者向け」で構いませんが、内部値は beginner のように揺れない名前にしておくと扱いやすいです。「初心者」「初級」「はじめて」などが混ざると、あとで絞り込みや条件表示を作るときに地味に困ります。

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

Elementor側では、まず1件分の一覧テンプレートを作ります。講座名、短い説明、料金、対象者、開催日、詳細ページへのリンクを置いたカードです。JetEngineのListing Templateで「1件のカード」を作り、Listing Gridで複数件を並べる流れです。公式のJetEngine概要でも、Listing Templateは1件分のデザインを作り、Listing Gridがそのデータを並べるものとして説明されています。

カードに出す情報は絞った方が読みやすいです。講座の詳細説明、カリキュラム、注意事項まで全部カードに入れると、スマホでは長くなります。カードは「候補を選ぶ場所」、詳細ページは「申し込む前に確認する場所」と分けると、Elementorの画面も整理しやすくなります。

詳細ページでは、Elementor ProのSingleテンプレートにJetEngineのDynamic FieldやDynamic Imageを差し込みます。講座名は投稿タイトル、料金は price、開催日は event_date、対象者は target_reader です。申し込みボタンは、受付状態が open のときだけ出すように表示条件を設定できます。

どちらを選ぶかはページ数ではなく更新の型で決まる

「ページが多いからJetEngine」という判断は少し雑です。ページ数が多くても、すべて別内容の固定ページならElementor Pro中心で問題ない場合があります。逆に、ページ数が少なくても、同じ型の情報を繰り返し登録し、一覧や条件表示に使いたいならJetEngineの出番です。

判断の目安は、同じ項目を何度も入力するかどうかです。講座名、料金、開催日、対象者、受付状態のような項目が繰り返し出てくるなら、データの箱にした方が運用しやすくなります。手作業のカード複製で済ませると、あとから「受付終了だけ非表示にしたい」「おすすめだけトップに出したい」となったときに直しにくいです。

Elementor Proだけで十分な例もあります。会社概要、サービス紹介、1本のLP、少数の固定ページ、通常ブログのテンプレート調整。このあたりは、無理にJetEngineを入れると管理項目が増えるだけになることもあります。プラグインを増やす前に、まず「どの情報を何回更新するのか」を見た方が安全です。

Query Builderや表示条件が必要になる場面

講座一覧ができた後、次に欲しくなるのが表示条件です。たとえば、トップページにはおすすめ講座だけを3件出す、開催日が近い順に並べる、受付中だけを出す、初心者向けだけを別ページに出す、といった条件です。JetEngineのQuery Builderは、こうした「どのデータを拾って表示するか」を作る機能です。

設定例としては、Query BuilderでQuery TypeをPosts Queryにし、対象を course にします。おすすめ一覧なら、Meta Queryで is_recommended = true、並び順は event_date の昇順。受付中一覧なら accepting_status = open を条件にします。ElementorのListing Grid側ではCustom Queryを有効にして、そのクエリを選びます。

表示条件では、申込ボタンを accepting_status が open のときだけ出す、満席のときは「受付終了」ラベルを出す、会員向け講座はログイン中だけ案内を出す、という使い方が考えられます。ただし、会員別表示や個人情報に関わるものは慎重です。表示を隠すだけで安全になるとは考えず、権限、フォーム、保存データ、アクセス制御を別途確認します。

標準設定で作るときの作業順

実際の作業順は、見た目から入るより、データから入った方が迷いにくいです。最初に course のCPTを作り、次に入力項目を作り、サンプル講座を3件だけ登録します。その後で一覧テンプレートを作ると、Elementorの画面で「この入力項目がどこに出るのか」を確認しながら進められます。空の状態でテンプレートを作ると、Dynamic Fieldを置いても値が見えず、不安になりやすいです。

サンプル講座は、わざと違う値にします。1件目は初心者向け、料金19,800円、受付中。2件目は中級者向け、料金39,800円、受付終了。3件目は法人向け、料金98,000円、おすすめ表示あり。こうしておくと、一覧の並び、表示条件、受付状態のラベルが本当に切り替わるか確認しやすくなります。全部同じ値で登録すると、条件が効いているのか分かりません。

Elementor側では、まずカードの最低限だけを作ります。タイトル、短い説明、料金、開催日、詳細リンク。この5つで表示確認をしてから、対象者ラベルや受付状態を足します。最初から装飾を作り込みすぎると、フィールド名のミス、日付形式のミス、空欄時の表示崩れに気づきにくくなります。見た目を整える前に、データが正しく出ているかを見る方が安全です。

ここまで進めてから、Elementor ProのTheme Builderでどこを担当するかを決めます。ヘッダー、フッター、通常投稿のテンプレートはElementor Pro側で管理し、講座一覧や講座詳細のデータ表示はJetEngine寄りにする。こう分けると、役割が混ざりにくいです。全部を一つのプラグインで考えようとするより、表示テンプレートとデータ設計を分けて見る方が、あとから説明しやすくなります。

もう一つ確認したいのは、空欄時の表示です。たとえば short_summary が未入力の講座、開催日が未定の講座、受付状態をまだ決めていない講座を作っておくと、一覧カードがどう崩れるか分かります。実際の運用では、すべての入力欄がきれいに埋まるとは限りません。空欄のまま公開されても読めるか、非表示にするか、管理者が公開前に気づけるかを見ておくと安心です。

また、一覧ページのURLも早めに決めます。講座一覧を /courses/ にするのか、サービス配下の /service/courses/ にするのかで、パンくずや内部リンクの考え方が変わります。あとからCPTのスラッグを変えるとリダイレクトや既存リンクの確認が必要になるため、ここは少し慎重でいいです。見た目のテンプレートより地味ですが、公開後の修正負担に関わります。

サムネイルやカード画像も、最初は必須にするか任意にするかを決めます。アイキャッチ画像が必須なら、未設定時にカードが寂しくならないよう管理ルールを作ります。任意にするなら、画像なしでも成立するカードデザインにします。Elementor上ではきれいに見えても、実際の投稿データが欠けると急に崩れることがあります。ここは初心者ほど見落としやすいです。

最初はここまで分かれば十分です。動的サイト化は、派手な機能を増やすことではなく、更新する情報をどこに置くか決める作業から始まります。

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

JetEngineで講座データを作ると、更新場所が分かりやすくなります。料金を直すときは price、開催日を変えるときは event_date、受付を止めるときは accepting_status。Elementorのカードを1枚ずつ探して直すより、管理画面の講座投稿を編集する方が迷いにくいです。

同じデータを別の表示に使い回せるのも大きいです。講座一覧、トップのおすすめ枠、詳細ページ、開催日順の一覧、初心者向けの一覧。静的ページではそれぞれ手で作りがちですが、データ構造があれば表示条件を変えて出せます。「同じ情報を別の場所で使う」ことが増えたら、動的化を考える合図です。

一方で、最初から全部を動的化しようとすると重くなります。講座が3件だけなら、CPT、入力項目、Listing、Query、表示条件まで作る方が時間がかかるかもしれません。最初は講座CPTと一覧表示だけ。次におすすめ表示。必要になってから絞り込みや関連データを足す。このくらいの段階分けが現実的です。

複雑になりすぎる境界線

JetEngineは便利ですが、作れるものが多い分、設計を広げすぎることがあります。講座、講師、受講者、申込履歴、会員ページ、決済、メール通知、予約カレンダーまで一気に作ろうとすると、もはや小さなWebサイト制作ではなく業務システムに近づきます。

特に慎重にしたいのは、会員別表示、申込履歴、個人情報、支払い情報、外部API連携です。JetEngineやCrocoblockは土台を作る助けになりますが、セキュリティ設計、権限設計、個人情報の取り扱い、バックアップ、負荷対策まで自動で解決するわけではありません。ここはプラグイン選びとは別の仕事として見た方がいいです。

講座ディレクトリなら、まずは公開情報だけに絞ります。講座名、料金、対象者、開催日、受付状態。申し込みフォームを足す場合も、保存する項目、通知先、スパム対策、管理者の確認フローを先に決めます。小さく始めると、どこから専門的な設計が必要になるかも見えやすくなります。

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

向いているのは、Elementorで見た目は作れるけれど、一覧、詳細、条件表示、更新管理をもう少し整理したい人です。講座一覧、事例一覧、店舗一覧、会員向け資料、比較ページのように、同じ型の情報が増えていくサイトではJetEngineの考え方が合います。

向いていないのは、1枚のLPだけを作る人、数ページの会社案内だけで更新が少ない人、データ構造を考える時間を取りたくない人です。その場合はElementor Proでテンプレートと共通パーツを整えるだけでも十分かもしれません。何でもJetEngineに寄せる必要はありません。

判断に迷うなら、まず「同じ型の情報が5件以上あるか」「その情報を一覧・詳細・条件表示に使うか」「今後も管理画面から追加するか」を見てください。3つとも当てはまるなら、JetEngineを検討する価値があります。

まとめ

Elementor ProとJetEngineの違いは、見た目の自由度だけでは分かりません。Elementor Proはテンプレートや動的タグで表示を作る力が強く、JetEngineはデータの箱、入力項目、一覧テンプレート、クエリ、表示条件を組み合わせて、動的サイトの土台を作る力が強いです。

講座ディレクトリのように、同じ型の情報を増やし、一覧や詳細ページに自動表示したいなら、JetEngineを中心に考えると整理しやすくなります。ただし、会員情報、個人情報、複雑な検索、予約や決済まで広げる場合は、標準設定だけで無理に済ませず、設計・権限・運用を分けて確認してください。

JetEngine公式ページを見てみる