JetTabsとJetEngineで情報量の多い詳細ページを整理する方法

講座詳細ページは、情報を増やすほど読みづらくなります。概要、料金、講師、カリキュラム、申込条件、よくある注意点。全部を縦に並べると、Elementorで見た目は作れても、読者はどこを見ればいいのか迷います。

今回作るのは、JetEngineで講座データを持たせ、JetTabsで詳細ページをタブに分ける構成です。役割を分けると、データはJetEngine、見せ方の整理はJetTabsという考え方になります。

タブは便利ですが、情報を隠すために使うものではありません。読者が「料金だけ見たい」「講師だけ確認したい」と思ったとき、迷わず切り替えられるようにするための整理道具です。

Crocoblock公式サイトを見てみる

この記事で作るもの

• 講座詳細ページをタブで整理する構成
• JetEngineで持たせる講座データの入力項目
• Elementor側でタブ内に動的データを表示する考え方
• 表示条件で申込ボタンや補足情報を出し分ける例
• タブを増やしすぎないための判断軸

まず何を作るのか

例として、スクールサイトの「講座詳細ページ」を作ります。講座ごとに、概要、料金、担当講師、対象者、申込状況を持たせます。静的なElementorページなら、講座ごとにページを複製して文章を差し替える形でも作れます。

ただ、その方法だと講座が増えるたびに同じレイアウトを複製し、料金や講師情報を手で直すことになります。講座が5件くらいならまだ耐えられますが、10件、20件と増えると、修正漏れが起きやすくなります。

そこで、講座の中身はJetEngineのデータの箱（CPT）に入れ、詳細ページの見た目はElementorで作ります。その中で、情報量の多い部分をJetTabsのタブに分けます。

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

まず、講座を入れるデータの箱を course として作ります。表示名は「講座」です。1講座ごとに、詳細ページで使う入力項目を分けます。

料金や申込状況を本文に直接書くと、修正が大変です。入力項目として分けておけば、講座一覧、詳細ページ、申込フォームの案内文などに同じ値を使いやすくなります。後から変わる情報ほど、本文に埋め込まないのがポイントです。

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

Elementor側では、講座1件分の詳細テンプレートを作ります。上部には講座タイトル、概要の短いリード、申込ボタンを置きます。その下にタブを置き、情報を分けます。

タブ構成は、最初は次の3つくらいで十分です。

ここで、タブ名を専門用語にしすぎない方がいいです。「Details」「Curriculum」「Instructor」よりも、「概要」「料金」「講師」の方が日本語サイトではすぐ分かります。読者が探したい情報の名前に寄せます。

JetTabs側にはタブの枠を作り、各タブ内にはElementorテンプレートや動的フィールドを置く考え方です。JetEngineで保存した値をDynamic Fieldなどで表示すれば、講座ごとに中身が変わります。

タブ内テンプレートをどう分けるか

タブの中身は、最初から細かく作り込みすぎない方がいいです。講座詳細ページで大事なのは、読者が必要な情報へ迷わず進めることです。タブ内にさらに見出しやカードを詰め込みすぎると、結局長いページと同じになります。

概要タブでは、講座の目的、対象者、開催日を短くまとめます。ここに料金や講師プロフィールまで入れると、後ろのタブを作る意味が薄くなります。料金タブでは、受講料金、含まれる内容、支払い前に確認することを分けます。講師タブでは、講師名、担当分野、短いプロフィールを出します。

Elementorで作る場合、各タブの中にDynamic Fieldを置くだけでも構成できます。より管理しやすくしたい場合は、概要タブ用、料金タブ用、講師タブ用に内側のテンプレートを分ける考え方もあります。ただし、テンプレートを分けるほど管理箇所も増えます。最初は1つの詳細テンプレート内で完結させ、講座数が増えてから分割を検討する方が安全です。

入力項目の粒度も重要です。course_summary に長文を全部入れると、後から一部だけ別デザインで表示したくなったときに困ります。一方で、細かすぎる項目を作ると入力が大変です。最初は「概要」「料金」「講師」「申込状況」のように、タブの役割と同じ単位で分けると考えやすいです。

静的なタブページとの違い

静的なElementorページでも、タブ表示そのものは作れます。1講座だけなら、それで問題ありません。タブに文章を直接入れて、料金を直接書く方が早いです。

違いが出るのは、講座が増えたときです。静的ページでは、講座Aのタブ、講座Bのタブ、講座Cのタブをそれぞれ編集します。料金表記を変える、申込状況の文言を変える、講師肩書きを直す。こうした小さな修正が増えるほど、作業場所が散らかります。

JetEngineを使う構成では、講座ごとの差分を入力項目に寄せます。見た目は1つの詳細テンプレートで共通化し、講座ごとの値だけが変わる形です。これにより、講座が増えても「新規講座を追加して入力する」という運用に寄せられます。

この考え方は、講座以外にも使えます。士業のサービス詳細、スクールのコース詳細、サロンのメニュー詳細、BtoBサービスのプラン詳細など、情報量が多く、項目が繰り返されるページでは同じ発想が使えます。

JetTabsとJetEngineの役割を分ける

ここは少し迷いやすいです。JetTabsはタブ表示を作る道具です。JetEngineはデータの箱、入力項目、動的表示を作る道具です。タブの中身を毎回手で書くなら、JetTabsだけでもページは作れます。

ただし、講座が複数あるならJetEngineを組み合わせた方が運用しやすくなります。講座ごとに料金や講師が違う場合、タブの見た目は共通にして、中身だけデータから引っ張る方が自然です。

たとえば、「概要」タブでは course_summary と target_reader を出す。「料金」タブでは course_price を表示し、必要なら税込表記や補足文を添える。「講師」タブでは teacher_name と講師プロフィールを出す。こうすると、1つのテンプレートで複数講座を扱いやすくなります。

JetTabsは情報の部屋分け、JetEngineは情報そのものの管理です。この2つを混ぜて考えると、修正する場所が分からなくなります。

講師情報をどこまでデータ化するかも、段階的に決めます。講師名だけでよければ teacher_name のテキストで十分です。講師プロフィールを複数ページで使い回すなら、講師用のデータの箱を別に作り、講座と関連づける設計も考えられます。ただし、最初から関連づけまで入れると、設定の難度は上がります。

まずは、1講座の詳細ページがきれいに表示されることを優先します。そのうえで、同じ講師が複数講座を担当する、講師一覧ページも作りたい、講師ごとの担当講座を自動で出したい、という要望が出てからRelationsを検討すると無理がありません。

表示条件で申込ボタンを出し分ける

講座詳細ページでは、申込状況によって見せる情報を変えたい場面があります。たとえば、application_status が「受付中」のときだけ申込ボタンを出し、「満席」のときはキャンセル待ち案内を出す形です。

この場合、表示条件（Dynamic Visibility）を使うと考えやすくなります。設定例は次の通りです。

表示条件は便利ですが、権限管理やセキュリティの代わりではありません。公開してはいけない情報は、そもそも公開ページに出さない設計にします。会員限定講座や個別契約の料金を扱う場合は、表示条件だけで雑に隠さない方が安全です。

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

この構成にすると、講座ページの更新作業がかなり分かりやすくなります。静的なElementorページでは、料金を変えるたびに各ページを開いて、本文のどこに料金を書いたか探す必要があります。タブ内に同じような文章があると、修正漏れも起きます。

JetEngineで入力項目を分けておけば、管理者は講座データを編集します。Elementorのテンプレートは、入力された値を表示します。JetTabsは、その情報を見やすく区切ります。

運用フローは次のようになります。

• 新しい講座を追加する
• 概要、料金、講師、開催日、申込状況を入力する
• 詳細ページでタブ表示を確認する
• 申込状況を変更したときの表示条件を確認する
• 公開前にスマホでタブの押しやすさを確認する

これなら、ページの見た目を壊さずに講座情報を増やしやすくなります。Elementor編集画面に入る人を減らせるのも、運用面では大きいです。

修正依頼を受けたときの確認場所も明確になります。「料金が違う」と言われたら course_price を見る。「申込できない」と言われたら application_status と申込ボタンの表示条件を見る。「講師名が古い」と言われたら teacher_name を見る。このように、問題の切り分けがしやすくなります。

静的ページでは、どのテキストがどこに書かれているかを毎回探すことがあります。データ化しておけば、確認すべき場所が入力項目に寄ります。これは派手な機能ではありませんが、更新が続くサイトではかなり大きな差になります。

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

タブは便利ですが、増やしすぎると逆に読みにくくなります。「概要」「料金」「講師」「会場」「特典」「注意事項」「受講後の流れ」「申込条件」まで分けると、読者は全部のタブを開く必要があります。

まずは3つ、多くても4つくらいから始めるのが現実的です。短い情報はタブにしないで、概要内にまとめた方が読みやすいこともあります。特にスマホでは、横並びタブが詰まりやすいので、タブ名を短くします。

もう一つの複雑さは、データ構造です。講師をただのテキストにするのか、講師用のデータの箱を別に作って関連づけるのか。最初は teacher_name のテキストでも十分です。講師一覧ページも作る、講師ごとに担当講座を自動表示する、という段階になってからRelationsを検討すれば大丈夫です。

最初から会員機能、決済、予約、マイページまでまとめて作ろうとすると、設計範囲が急に広がります。JetEngineやJetTabsだけで、セキュリティ設計や個人情報管理まで自動的に完成するわけではありません。

スマホ表示で確認したいこと

タブ表示は、PCではきれいに見えてもスマホで扱いにくくなることがあります。タブ名が長い、タブ数が多い、タップ範囲が狭い、切り替えたあとに現在位置が分かりにくい。このあたりは、実際の画面で触らないと気づきにくいです。

講座詳細ページでは、読者が料金や申込状況を確認する場面が多いはずです。スマホで「料金」タブがすぐ見つからないなら、タブの順番を変えるか、上部にも料金の短い要約を置く方がよい場合があります。タブの中にすべてを閉じ込めるのではなく、重要な判断材料だけはページ上部にも軽く出しておく、という考え方です。

また、申込ボタンをタブ内だけに置くと、読者が見落とすことがあります。申込状況が受付中の場合は、ページ上部と料金タブ内の両方に導線を置く構成も考えられます。ただし、ボタンを増やしすぎると押し売り感が出ます。申込導線は分かりやすく、でも邪魔にならない位置に置きます。

スマホ確認では、タブの切り替えだけでなく、戻りやすさも見ます。料金タブを開いたあと、概要に戻れるか。講師タブを読んだあと、申込ボタンにたどり着けるか。ここを確認すると、単なる見た目の整理ではなく、実際に読まれる詳細ページになります。

安全面と公開前チェック

講座ページでは、申込フォームや受講者情報とつながる可能性があります。この記事の例は、講座詳細ページの表示整理が中心です。個人情報を扱うフォーム、決済、会員ページを組み合わせる場合は、別途プライバシーポリシー、同意文、アクセス権限、バックアップを確認します。

公開前には、次の点を確認します。

• 公式プラグインを使い、ライセンスとアップデートを維持している
• 料金や申込状況の表示が最新か確認した
• 満席時に申込ボタンが出続けていない
• スマホでタブが押しやすい
• タブ内の情報が長すぎない
• 会員限定や個別料金の情報を表示条件だけで隠していない
• 本番反映前にステージング環境でテンプレートを確認した

タブ表示は見た目の整理には強いですが、情報の正確性は運用ルールに依存します。特に料金と申込状況は、更新担当者が迷わず直せる項目名にしておくことが大切です。

納品後に更新しやすい項目名にする

制作する側は、英語のフィールド名や機能名に慣れているかもしれません。しかし、更新担当者が見る管理画面では、日本語の表示名を分かりやすくしておく方が安全です。内部名は course_price でも、管理画面では「受講料金」と見えた方が迷いません。

申込状況も同じです。「status」だけでは意味が広すぎます。「申込状況」と表示し、選択肢を「受付中」「満席」「募集前」くらいに絞ると、更新担当者が判断しやすくなります。選択肢を増やしすぎると、どれを選ぶべきか分からなくなります。

タブ内の文章も、全部を自由入力にしない方がよい場合があります。概要は自由入力でよくても、料金、開催日、申込状況は分けておく。こうすると、表示条件や一覧ページにも使い回せます。更新しやすいサイトは、見た目だけでなく入力場所の設計も丁寧です。

この構成が向いているケース

• 講座詳細ページの情報量が多く、縦に長くなっている
• 料金、講師、開催日など後から変わる情報がある
• 複数講座で同じ詳細ページレイアウトを使いたい
• 申込状況に応じてボタンや案内文を出し分けたい
• Elementorの静的ページ複製から一歩進めたい

逆に、講座が1つだけで、情報も少ないならタブにしない方が読みやすいです。短いページを無理にタブ化すると、読者はクリックしないと情報を見られなくなります。

まとめ

JetTabsとJetEngineを組み合わせると、情報量の多い講座詳細ページを整理しやすくなります。JetEngineでは course という講座のデータの箱を作り、概要、料金、講師、申込状況などを入力項目として分けます。Elementor側では、詳細テンプレートにJetTabsを置き、概要、料金、講師のように情報を区切って表示します。

大事なのは、タブを増やすことではありません。読者が探したい情報へ早くたどり着けることです。料金や申込状況のように後から変わる情報は、本文に直接埋め込まず、JetEngineの入力項目として管理する。これだけでも、静的なElementorページより運用しやすくなります。

最初は3タブ程度で十分です。講座が増え、講師一覧や申込フォームとつなげたくなったら、RelationsやJetFormBuilderなどを段階的に考えれば大丈夫です。

Crocoblock公式サイトを見てみる