JetElements Portfolioで制作実績を見せる方法。JetEngineとの違いも解説

制作実績ページは、Elementorだけでもそれらしく作れます。画像を並べて、タイトルを入れて、カテゴリ風の見出しを置く。数件だけなら、それで十分です。

ただ、実績が増えてくると少し変わります。「美容系だけ見せたい」「古い実績は下げたい」「同じカテゴリを別ページにも出したい」となった瞬間に、静的なカードをコピーして並べる運用は崩れやすくなります。

今回作るのは、JetElementsのPortfolioで見た目のよい制作実績ギャラリーを作りつつ、どこからJetEngineでデータ管理に切り替えるべきかまで判断できる構成です。JetElementsを否定する話ではありません。小さな実績ページならJetElementsの方が早い場面もあります。

JetElements公式ページを見てみる

この記事で作るもの

• 制作実績を見せるポートフォリオページ
• JetElements Portfolioで作る静的ギャラリーの設定例
• JetEngineで実績をデータ化する場合の入力項目
• 実績数が増えたときの表示と更新の分け方
• JetElementsとJetEngineを使い分ける判断軸

まず何を作るのか

例として、Web制作会社の「制作実績」ページを作ります。最初の状態では、実績は6件だけです。各カードには、画像、案件名、業種カテゴリ、短い説明、詳細ページへのリンクを置きます。

この段階なら、JetElementsのPortfolioでカードを登録して、カテゴリごとに見せる構成が分かりやすいです。Elementorの通常ウィジェットだけでギャラリーを作るより、ポートフォリオらしい切り替えや並びを作りやすくなります。

ただし、ここで考えるべきなのは「いま何件あるか」だけではありません。今後、月に2件ずつ実績が増えるのか、カテゴリ別の一覧ページも作るのか、担当者がWordPress管理画面から更新するのか。運用の形で、正しい作り方が変わります。

JetElements Portfolioで作る場合の考え方

JetElements Portfolioは、制作実績やギャラリーを見せるためのウィジェットとして使います。役割を日本語で言うなら、見た目つきの実績カードを並べる道具です。データベースを先に設計するというより、ページ上で見せたいカードを作っていく感覚に近いです。

設定としては、次のような項目から始めます。

ここで注意したいのは、カテゴリ名です。「美容」「美容室」「サロン」のように表記が揺れると、見た目も管理も散らかります。静的なPortfolioでも、カテゴリ名だけは先に決めておくと後で楽です。

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

Elementor側では、まず制作実績ページを1ページ作ります。上部に短い説明、その下にPortfolioを置きます。カードの余白、画像比率、ホバー時の動きは、サイト全体のトーンに合わせます。

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

• 上部: 実績ページの説明文
• 中央: カテゴリ切り替えつきのPortfolio
• カード: 画像、タイトル、カテゴリ、短い説明
• 下部: 問い合わせや相談への導線

制作実績は情報を入れすぎると読みにくくなります。実績カードでは「何の案件か」「どんな種類か」「詳しく見られるか」が分かれば十分です。詳細な制作背景や改善内容は、個別の実績ページに逃がした方が整理しやすいです。

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

実績が増える前提なら、JetEngineで制作実績のデータの箱（CPT）を作る方が向いています。たとえば、データの箱を works、表示名を「制作実績」とします。

入力項目は次のように分けます。

このように分けておくと、Elementor側では一覧テンプレート（Listing）を作って、入力された値をDynamic FieldやDynamic Imageで表示できます。実績カードを毎回手で複製するのではなく、WordPress管理画面で1件追加すれば一覧に反映される形です。

ここがJetElements Portfolioとの大きな違いです。JetElementsは見た目を作るのが得意です。JetEngineは、実績をデータとして持ち、複数ページに使い回すのが得意です。

静的Elementorページとデータ管理の違い

静的なElementorページでは、カードそのものがページの中にあります。画像を差し替えたいときは、そのページを開き、対象カードを探し、画像やテキストを編集します。見たまま直せるので分かりやすい反面、同じ実績を別ページにも出していると、修正箇所が増えます。

JetEngineで作る場合は、実績そのものはWordPress管理画面の「制作実績」に保存します。Elementor側では、1件分のカードデザインだけを作ります。そこに「この実績の画像を出す」「この実績の業種を出す」「この実績の詳細リンクを出す」という接続をしていきます。

この違いは、最初は少し回り道に見えます。1ページだけを作るなら、直接カードを置いた方が早いです。ただ、実績を後から増やすなら、データと見た目を分ける方が安定します。デザインを変えたいときも、Listing Itemを直せば全カードの見た目をまとめて調整できます。

たとえば、実績カードに「制作年」を追加したくなった場合です。静的カードなら、全カードにテキストを追加します。JetEngineなら work_year を入力項目にして、一覧テンプレート側にDynamic Fieldを1つ足します。入力されていない実績では非表示にする、という表示条件も考えられます。

ここで大切なのは、JetEngineにすると何でも楽になる、という話ではないことです。最初にデータの箱と入力項目を決める手間はあります。だからこそ、実績数、更新頻度、使い回しの有無を見て判断します。

JetEngineで一覧テンプレートを作るなら

JetEngineに切り替える場合は、制作実績1件分の一覧テンプレートを作ります。これは、実績カードの設計図です。カードの中には、メイン画像、タイトル、業種ラベル、制作範囲、詳細リンクを置きます。

具体的には、次のような構成です。

一覧ページにはListing Gridを置き、このテンプレートを並べます。トップページに出す場合は、Query Builderで is_featured がONの実績だけを3件表示する、という形にできます。制作実績ページではすべて表示し、業種ページでは特定の業種だけを表示する、という分け方もできます。

ここまで来ると、JetElements Portfolioの静的ギャラリーとは作り方が変わります。ページ上にカードを増やすのではなく、データを増やして表示条件で出し分けます。少し難しくなりますが、更新作業は整理しやすくなります。

JetElementsで十分なケース

すべての制作実績ページをJetEngineで作る必要はありません。次の条件なら、JetElements Portfolioで十分なことが多いです。

• 実績が5件から10件程度で、今後あまり増えない
• カテゴリは見た目上の切り替えだけでよい
• 管理者が頻繁に実績を追加しない
• トップページや別ページに同じ実績を自動表示しない
• 検索や絞り込みまで求めていない

この場合、JetEngineでデータ構造を作る方が作業量として重くなることがあります。小さなポートフォリオは、まず見やすく作ることを優先して大丈夫です。

JetEngineへ切り替えた方がいいケース

逆に、実績が増える、絞り込みたい、複数ページで使い回したい、管理者が更新したい。このどれかが強いなら、JetEngineを中心にした方が安全です。

たとえば、トップページには注目実績だけ3件、制作実績ページにはすべて、業種ページには美容系だけを出すとします。静的なElementorカードを3か所に置くと、1件修正するたびに複数ページを直す必要があります。JetEngineなら、入力元は1件の制作実績データに寄せられます。

Query Builderを使えば、is_featured がONの実績だけをトップページに出す、といった表示も考えやすくなります。さらに絞り込み検索（JetSmartFilters）を組み合わせるなら、業種や制作範囲を入力項目として分けておく意味が出てきます。

ただし、ここで一気に複雑にしすぎない方がいいです。最初から「業種」「予算」「担当者」「エリア」「公開年」「使用ツール」まで全部絞り込むと、入力も表示も重くなります。まずは実際に読者が見たい条件に絞ります。

小さく始めて切り替える手順

現実的には、最初からJetEngine構成にするか、JetElements Portfolioで始めるかを一度で決めきれないこともあります。その場合は、段階を分けて考えると判断しやすいです。

最初の公開時点で実績が少ないなら、JetElements Portfolioで見た目を作ります。このとき、カテゴリ名、画像比率、カードに入れる情報だけは後で使い回せるように揃えておきます。たとえば、カテゴリは「業種」なのか「制作タイプ」なのかを混ぜないようにします。美容、士業、スクールのような業種カテゴリと、LP、コーポレート、ECのような制作タイプを同じ場所に入れると、あとでデータ化するときに整理が大変です。

実績が増え始めたら、JetEngineの制作実績CPTを作る準備をします。既存のPortfolioカードを見ながら、どの情報が毎回出ているかを洗い出します。画像、タイトル、カテゴリ、短い説明、詳細リンク。この5つが毎回あるなら、まずはそのまま入力項目にします。無理に最初から高度な項目を足さない方が移行しやすいです。

移行時に気をつけたいのは、古いカードをすぐ消さないことです。ステージング環境でJetEngine版の一覧を作り、同じ実績が同じ順番で出るか、スマホで崩れないかを確認します。問題がなければ本番のPortfolioをListing Gridへ差し替える、という順番にします。静的ページから動的管理へ移るときは、見た目の変更よりも、入力データの漏れを確認する方が大切です。

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

制作実績ページで一番楽になるのは、更新作業です。JetElementsだけで作った静的ギャラリーでは、実績を追加するたびにElementor編集画面でカードを増やします。画像サイズ、余白、カテゴリ名、並び順を人が合わせるので、少しずつ崩れます。

JetEngineでデータ化しておくと、管理者は「制作実績を1件追加する」作業に集中できます。カードの見た目はListing Item側で管理するため、登録した実績は同じデザインで表示されます。

管理者に渡す説明も、静的ページより簡単になります。「Elementorの編集画面でこのカードを複製してください」ではなく、「制作実績から新規追加し、画像と業種と制作範囲を入れてください」と言えます。入力場所が決まっている方が、担当者は迷いにくいです。

さらに、古い実績を下げる作業も分かりやすくなります。たとえば is_featured をOFFにすればトップページから外す、公開年で並び順を調整する、業種ラベルを直して絞り込みに反映する、といった運用ができます。見た目を触らずに、掲載状態を変えられるのが利点です。

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

• 新しい制作実績を追加する
• 画像、業種、制作範囲、公開年を入力する
• 必要なら注目表示をONにする
• 一覧ページとトップページで表示を確認する
• 古い実績は非表示または並び順を調整する

この流れにすると、ページ制作者と更新担当者の役割を分けやすくなります。制作者は見た目と仕組みを整え、更新担当者は入力項目に沿って実績を登録する。小さな違いですが、運用が続くサイトでは効いてきます。

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

制作実績ページでやりすぎやすいのは、データ項目を増やしすぎることです。使う予定のない項目まで作ると、管理画面が入力しにくくなります。実績を1件登録するたびに10項目以上を入力しなければならないなら、担当者は更新を避けるようになります。

最初は、画像、タイトル、業種、制作範囲、短い説明、詳細リンクくらいで十分です。予算や制作期間を見せるかどうかは、サイトの営業方針によります。見せられない情報を無理に項目化しない方が安全です。

また、公開できない実績を扱う場合は注意が必要です。Dynamic Visibilityなどの表示条件だけで機密情報を隠したつもりになるのは危険です。契約上見せられない情報や顧客名を扱うなら、そもそも公開用データに入れない、権限設計を別途行う、といった判断が必要です。

納品後に説明しやすい形にする

クライアントや社内担当者に渡すサイトでは、作った本人だけが分かる構成にしないことも大切です。JetElements Portfolioで作るなら、「このページのPortfolio項目を編集してください」と説明できます。JetEngineで作るなら、「制作実績から新規追加してください」と説明できます。どちらにしても、更新する場所をひとつに絞って伝える方が親切です。

特にJetEngine構成では、入力項目名を日本語で分かりやすくしておくと運用しやすくなります。管理画面で「work_scope」とだけ見えているより、「制作範囲」と表示されている方が迷いません。英語のフィールド名は内部用、管理画面の表示名は更新担当者向け、と分けて考えます。

また、空欄にしてよい項目と必ず入れる項目を決めておくと、一覧表示が崩れにくくなります。画像がない実績をどう扱うか、詳細リンクがない場合はカード全体をリンクなしにするのか、公開年を出さない実績も許可するのか。こうした小さなルールを先に決めるだけで、後からの修正が減ります。

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

• 少数の制作実績を見栄えよく並べたいならJetElements Portfolio
• 実績が増え続けるならJetEngineの制作実績CPT
• トップページやカテゴリページにも同じ実績を出したいならJetEngine
• 業種や制作範囲で探せるページにしたいならJetEngineと絞り込み検索
• まだ6件程度なら、無理に大きな仕組みにしない

最初から完璧なデータベースを作るより、実績の増え方を見て段階的に切り替える方が現実的です。静的ギャラリーで始めて、運用が重くなったらJetEngineに寄せる。この順番でも十分です。

まとめ

JetElements Portfolioは、制作実績をきれいに見せるための近道になります。少数の実績をページ上で見せたいだけなら、静的なギャラリーとして使うのが分かりやすいです。

一方で、実績が増える、複数ページに使い回す、条件で探せるようにする、更新担当者が管理画面から追加する。こうなってきたら、JetEngineで works というデータの箱を作り、画像、業種、制作範囲、公開年などを入力項目として分ける方が運用しやすくなります。

ポイントは、JetElementsとJetEngineを競合させないことです。見た目を早く作りたい場面ではJetElements。データを持たせて育てたい場面ではJetEngine。制作実績ページでは、この使い分けを考えるだけで、静的ページから一歩進めます。

JetElements公式ページを見てみる