JetEngineで比較サイトを作るならフィールド設計が重要な理由

比較サイトは、見た目だけならElementorでも作れます。カードを並べて、星を置いて、表を作れば、それっぽく見えます。ただ、あとから商品やサービスが増えたときに、価格、対象者、強み、注意点を全部手作業で直すなら、比較サイトというより「更新が大変な固定ページ」になってしまいます。

JetEngineで比較サイトを作るなら、最初に考えるべきなのはランキング演出ではなく、比較項目の分け方です。この記事では、ツール比較サイトを例に、データの箱（CPT）、入力項目、一覧テンプレート、比較表、絞り込み、任意の比較リストUIまでを整理します。比較の信頼感は、デザインより先にフィールド設計で決まります。

たとえば「予約管理ツール比較」のようなページです。各ツールに、月額料金、無料プランの有無、向いている業種、予約タイプ、サポート、注意点を持たせます。これを本文欄に長く書くのではなく、項目として分けることで、一覧、表、詳細ページ、絞り込み検索に使い回せます。

JetEngine公式ページを見てみる

この記事で分かること

• 比較サイトでJetEngineに持たせるデータの考え方
• ツールCPTと比較項目フィールドの具体例
• Elementorのカード一覧と比較表の作り分け
• Query Builderや絞り込み検索を使う前の注意点
• 比較リストUIを任意で足すJSスニペットの考え方

今回作る比較サイトの前提

サンプルでは、予約管理ツールを比較するミニサイトを作ります。データの箱（CPT）は comparison_tool、管理画面の表示名は「比較ツール」です。1件の投稿が1つのツール情報になります。カテゴリのような分類は、必要に応じて「用途」や「業種」で作ります。

大事なのは、比較したい内容を文章ではなく入力項目として分けることです。たとえば「月額料金は安いです」と本文に書くのではなく、monthly_price に数値で入れます。「無料プランあり」は has_free_plan をSwitcherにします。「サロン向き」「士業向き」のような対象はSelectやCheckboxにします。

ここで少し迷うのが、数値とテキストの使い分けです。月額料金を「2,980円〜」というテキストで入れると読みやすいのですが、料金順に並べ替えにくくなります。表示用の price_label と、並び替え用の monthly_price を分ける方法もあります。小さな比較サイトでも、この分け方は後から効いてきます。

入力項目は読者の判断順に並べる

比較サイトのフィールド設計では、制作者が管理しやすい順番だけでなく、読者が判断する順番も意識します。予約管理ツールなら、まず料金、次に対象業種、次に予約タイプ、最後に注意点を見る人が多いはずです。管理画面の入力項目もその順番に近づけると、投稿を追加するときに抜けが見つけやすくなります。

たとえば、上から「基本情報」「料金」「向いている人」「機能」「注意点」のようにメタボックスを分けます。最初から項目を細かくしすぎると、1件登録するだけで疲れます。逆に、全部を長い本文に入れると、一覧や表に使い回せません。ここは少し地味ですが、比較サイトの作りやすさを左右します。

内部値にも注意します。画面に出すラベルは「サロン向き」で構いませんが、内部値は salon のように揺れない文字列にしておくと、絞り込み条件で扱いやすいです。「サロン」「美容サロン」「サロン系」のように表記が揺れると、あとで検索条件が合わなくなります。小さな比較表でも、内部値の揺れは意外と面倒です。

JetEngineは比較データの土台になる

JetEngineは、比較サイトでいうと「カードをかっこよくするプラグイン」ではなく、比較対象の情報をきちんと持たせる土台です。CPTで比較対象を作り、入力項目で評価軸を分け、一覧テンプレートでカード化し、必要な条件で表示します。

公式のJetEngine情報でも、カスタム投稿タイプ、カスタムフィールド、Listing、Query Builder、Dynamic Tableなど、データを作って表示する機能が中心です。比較サイトでは、この特徴がそのまま役立ちます。手入力の表を1枚作るより、データからカード・表・詳細ページを作る方が、後で情報を直しやすくなります。

ただし、JetEngineを入れれば比較サイトの中身が自動で正しくなるわけではありません。価格や機能は変わりますし、ランキングの根拠も必要です。更新日、確認方法、対象範囲を運用ルールとして決めることは、プラグイン設定とは別の仕事です。

Elementor側ではカードと表を別に考える

Elementor側では、まず1件分の一覧テンプレートを作ります。ツール名、価格ラベル、向いている業種、無料プランの有無、詳細ページへのリンクを置いたカードです。Listing Gridでカードを並べると、比較対象が増えても同じ見た目で一覧に出せます。

カードでは、すべての項目を出しすぎない方が読みやすいです。月額料金、対象者、ひとこと強み、詳細リンクくらいに絞ります。比較サイトを作ると、つい1枚のカードに情報を詰めたくなりますが、スマホではかなり読みにくくなります。詳細な注意点や細かい条件は、詳細ページや比較表に回す方が現実的です。

比較表は、カード一覧とは別の目的です。カード一覧は「ざっと候補を見る」場所。比較表は「項目ごとの差を横に見る」場所です。JetEngineのDynamic Tableやテーブル系の表示を使う場合も、列に何を置くかを先に決めます。月額料金、無料プラン、予約タイプ、向いている業種、注意点。この5列だけでも、読者は判断しやすくなります。

Query Builderと絞り込み検索の使い方

比較サイトでは、Query Builderを使って表示順を作る場面があります。たとえば、recommend_score の高い順に表示する、monthly_price の安い順に並べる、has_free_plan = true のものだけ出す、といった使い方です。

絞り込み検索を入れる場合は、読者が本当に使う軸だけに絞ります。業種、料金帯、無料プランの有無くらいなら分かりやすいです。逆に、サポート形式、決済連携、通知方法、スマホ対応、API有無、権限管理まで一気にフィルター化すると、初見の読者は選ぶ前に疲れます。ここは少し欲張りやすいところです。

設定例としては、Query Builderで対象投稿タイプを comparison_tool にし、初期表示は recommend_score の降順にします。料金順ページを作るなら monthly_price の昇順にした別クエリを用意します。無料プランありだけのページなら、メタ条件に has_free_plan = true を入れます。

ここで注意したいのは、おすすめ度の作り方です。recommend_score を数字で持たせるのは便利ですが、根拠が曖昧だとただの主観ランキングになります。読者に見せるなら、価格、機能数、導入しやすさ、サポートなど、評価軸を別途説明する必要があります。JetEngineは表示の仕組みを作れますが、比較の公平性までは自動で作ってくれません。

おすすめ順を使う場合は、スコアを1つだけ持たせるより、判断材料を分けておく方が後で説明しやすいです。たとえば ease_score、price_score、support_score を内部メモとして持ち、最終的な recommend_score を決めます。読者に全部見せる必要はありませんが、運営側が見返せるようにしておくと、順位変更の理由を忘れにくくなります。

ただし、スコア項目を増やすほど管理は重くなります。最初は「初心者向け」「低価格重視」「予約機能重視」のように、読者が選びそうな軸を3つ程度に絞るのが現実的です。比較サイトは、項目の多さよりも、迷わず選べる整理の方が大切です。

比較表は空欄を減らす設計にする

比較表でありがちな失敗は、項目を増やしすぎて空欄だらけになることです。データがない項目が多いと、読者は比較しにくくなります。最初は全ツールで入力できる項目だけを列にします。月額料金、無料プラン、対象者、予約タイプ、注意点。このくらいから始めると管理しやすいです。

もし詳細項目を増やしたい場合は、表ではなく詳細ページに逃がすのも手です。たとえば「外部カレンダー連携」「複数店舗対応」「決済機能」は、比較表の列にすると横幅が足りなくなります。詳細ページに補足として表示し、一覧や表には主要判断軸だけを残す。地味ですが、スマホで読む比較サイトではかなり大事です。

表に出す項目は、更新頻度も見て決めます。価格や無料プランは変わりやすいので、更新チェックの対象にします。一方で「向いている業種」のような項目は、頻繁には変わらないかもしれません。更新頻度が高い項目ほど、入力場所を分かりやすくし、確認日を一緒に残した方が安全です。

確認日用に checked_on というDateフィールドを作るのも有効です。カードや表に必ず出す必要はありませんが、管理画面で「この情報はいつ見直したか」を追えます。公開側に出すなら「情報確認日：2026年5月」のように軽く出す程度で十分です。ここを作っておくと、古い比較記事を更新するときに助かります。

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

フィールド設計ができている比較サイトは、更新が単純になります。価格変更があれば monthly_price と price_label を直す。対象業種が変われば best_for を更新する。非推奨にしたいツールがあれば recommend_score を見直す。Elementorの表を直接いじるより、修正箇所が分かりやすくなります。

さらに、同じデータから複数のページを作れます。初心者向け一覧、無料プランあり一覧、サロン向け一覧、安い順一覧。ページごとに手でカードを並べ替えるのではなく、クエリ条件を変えて出す形です。静的ページのまま運用するより、情報の揺れが減ります。

更新時の流れも決めておくと、比較サイトは崩れにくくなります。新しいツールを追加したら、まず必須項目を全部埋めます。次にカード一覧で表示崩れがないか確認します。最後に比較表で空欄が増えていないかを見ます。この3段階だけでも、公開後の雑さはかなり減らせます。

逆に、運用担当者が毎回Elementorの表を直接直す形だと、表には反映されたけれど詳細ページは古いまま、というズレが起きます。JetEngineに寄せる意味は、このズレを減らすことです。完全自動ではありませんが、直す場所を管理画面に寄せられるのは大きいです。

公開前チェックも、できれば項目化しておきます。料金が税込か税抜か、無料プランの条件が古くないか、公式ページへのリンク先が切れていないか、注意点が強すぎたり弱すぎたりしないか。比較記事では、こういう細部のズレが信頼感に直結します。JetEngineの設定とは別に、人が見る確認表を残すくらいがちょうどいいです。

もう一つ、削除のルールも決めておきます。提供終了したツールをすぐ消すのか、記事内に「現在は受付終了」として残すのかで、内部リンクや比較表の見え方が変わります。何も決めずに消すと、過去記事からのリンクが切れることがあります。非公開、下書き、受付終了表示のどれにするかを、先に運用メモへ書いておくと迷いません。小さな比較サイトでも、この判断は後回しにしない方が楽です。

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

比較サイトは、項目を増やせば増やすほど良くなるわけではありません。30項目の比較表、10個の絞り込み、毎週変わる価格、根拠のないスコア。ここまで行くと、読む側も更新する側も疲れます。最初は5〜8項目程度で、読者の判断に直結するものだけに絞る方がいいです。

また、アフィリエイト記事では、紹介したい商品に寄りすぎると比較として読みにくくなります。良い点だけでなく、向かないケースや注意点も項目として持たせた方が、結果的に記事全体が自然になります。ここをきれいに見せすぎると、広告っぽさだけが残ります。

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

向いているのは、WordPress内で比較対象を少しずつ増やしたい人です。ツール、スクール、サービス、店舗、教材など、同じ型の情報を複数扱うならJetEngineのCPTと入力項目が役立ちます。Elementorでカードの見た目を作りたい人にも合います。

向いていないのは、データ更新をする予定がほとんどない1枚だけの比較LPです。対象が3つだけで、年に1回も変わらないなら、固定のElementor表でも十分かもしれません。JetEngineを入れる意味は、情報を増やす、直す、並べ替える、別ページで再利用する場面で強くなります。

まとめ

JetEngineで比較サイトを作るなら、最初に比較項目をフィールドとして分けます。今回の例では、comparison_tool というデータの箱を作り、月額料金、無料プラン、対象業種、予約タイプ、おすすめ度、注意点を入力項目にしました。Elementor側では、カード一覧と比較表を分けて作り、Query Builderでおすすめ順や料金順の表示を作ります。

運用面では、価格変更、対象者変更、非推奨化、ページ別の並び替えがしやすくなります。逆に、比較軸を増やしすぎると管理が重くなり、読者にも伝わりにくくなります。最初は少ない項目で、判断に必要な情報だけを分ける。そこから静的ページを一歩進めるのが、JetEngineを使う比較サイトの現実的な始め方です。

JetEngine公式ページを見てみる