Morrowfieldケーススタディ：カタログから編集コンテンツの体験へ

ShopifyのカタログとWordPressサイトがあり、商品のグリッドだけでは物足りないとします。コレクション、商品ページ、購入ガイドは、同じ内容を繰り返さずに同じ商品を使えます。Morrowfieldの例では、ページごとに異なる役割を与えています。カタログは訪問者が見て回るため、商品ページは1つの商品を確かめるため、ガイドは決めるためのものです。

Morrowfieldは架空のブランドです。商品、価格、文章はこのデモのために作ったもので、ここに顧客の成果は一切含まれていません。ただし、ご覧いただくページは、ローカルのWordPress検証環境で、無料のFy2Pressプラグイン（バージョン1.0.0）が実際に表示したものです。Shopifyストアは接続しておらず、支払いも写っていません。このページは、Fy2Pressの発行元であるPagupが公開しています。

以下では、注釈付きのデモ、このデモが証明しないこと、そして自分のサイトで再現するためのシートを紹介します。

デモで示したかったことは何ですか？

問いは1つです。FREEエディションだけで、1つの小さなカタログから、それぞれ訪問者の別々の疑問に答える3つのWordPressページを作れるか。デモはこの問いに、モックアップではなく実際の表示結果で、あえて架空のデータを使って答えています。

要素	検証環境で使ったもの
プラグイン	Fy2Press FREE 1.0.0（WordPress.orgの公開パッケージ）
WordPress	WordPress 7.1、PHP 8.4、Twenty Twenty-Fiveテーマ
カタログ	2つのコレクション（CarryとTravel essentials）に含まれる6つの架空の商品
画像	ライセンス取得済みのMorrowfieldの写真3枚をトリミングしたもの。生成した画像はなし
Shopify	未接続。トークン、カート、チェックアウト、支払いはいずれもなし

6つの商品は、Transit 24 backpack（Oliveを含むバリエーションあり）、Transit 24 travel kit、Commuter studio set、Field bottle（2つのサイズ、2つの価格）、Organizer pouch、Packable slingです。カタログはあえて小さくしています。3枚の写真に写っているのが、これらの商品だけだからです。

どのように作ったのですか？

検証環境で実際に行った手順は次のとおりです。

1. 使い捨てのWordPressサイトに、WordPress.orgのパッケージからFREE 1.0.0をインストールしました。このサイトはローカルのマシンからしかアクセスできず、自身の外向きの通信をブロックするように設定しています。
2. Shopifyは未接続のままにしました。そのため、プラグインの画面には、ストアURLと公開Storefront APIトークンの入力を求めるウェルカムメッセージが表示されたままです。
3. 検証用のスクリプトでカタログを書き込みました。バリエーションと価格を持つ6つの架空の商品、2つのコレクションとそのタグを、Fy2Pressの商品レコードとしてWordPressに直接保存しています。同期は実行していません。実際のサイトでは、これらのレコードは、カタログを確認して同期で説明しているとおり、接続したストアとの手動同期によって作られます。
4. ショートコードブロックを使って、通常のWordPressページを2つ作成しました。カタログページには、1文の導入に続けて、[fy2press_product_search]、[fy2press_collection_filter]、[fy2press_collection_sort]、[fy2press_products_loop]を配置しています。ガイドには、2つの短いセクションに続けて、Travel essentialsコレクションに限定した[fy2press_products_loop]を配置しています。商品ページは、Fy2Pressが商品ごとに生成するものです。
5. 自動操作のブラウザーで、各画面をデスクトップの幅で、英語とフランス語で、修正を加えずに撮影しました。商品ページでは、撮影前にOliveのバリエーションを選択しています。

ページはスクリプト自身が作成しました。ページには、エディターで追加できるものと同じ標準のショートコードブロックが含まれていますが、編集の過程は撮影していません。

各ページはどんな役割を果たしていますか？

カタログページ：見て回る

カタログは、何があるのかという幅広い疑問に答えます。画面には、検索欄、「Collection」の絞り込み、「Sort by」の並び替え、そして画像、商品名、価格、「View Product」ボタンを備えた6枚のカードが写っています（日本語表示では「コレクション」「並び替え」「商品を見る」）。Field bottleのカードには価格の幅が表示されています。2つのサイズの価格が異なるためです。ショートコード一覧によると、バージョン1.0.0の検索は商品タイトルを対象にしているため、わかりやすい商品名が大切です。

操作部品は表示されていますが、絞り込みや並び替えの結果は撮影していません。

参考にしたい点：グリッドの上に、ページの目的を伝える平易な1文を置きます。カードに宣伝文の段落は要りません。

商品ページ：1つの商品を確かめる

商品ページは、これが求めている商品かという、より絞られた疑問に答えます。画像、タイトル、価格、コレクション（Carry）、Oliveに設定された「Select Variant」リスト、数量の入力欄、「Add to Cart」と「Buy Now」のボタン、そして説明が表示されています（日本語表示では「バリエーションを選択」「カートに追加」「今すぐ購入」）。

購入ボタンは誰もクリックしていません。ストアを接続していないため、示せるカートやチェックアウトがないからです。接続済みのサイトでは、ブロックとショートコードで公開で説明しているとおり、購入操作によってShopifyへ進み、そこで支払いが行われます。

参考にしたい点：商品ページの役割は詳細とバリエーションを確かめることなので、比較は載せないでください。

購入ガイド：決める

ガイドは、ほかの2つのページでは答えが出ない疑問、つまりどう選べばよいかに答えます。WordPressで書いた本文は2つのステップ（まずバッグを1つ決め、次に小物をまとめる）を示し、最後に商品のグリッドで終わります。

このガイドは、短いデモの限界も示しています。最初のステップではバックパックを勧めていますが、グリッドに表示されるのはTravel essentialsコレクションで、そこではバックパックはトラベルキットの一部としてしか登場しません。実際のサイトでは、各商品を、それを裏付けるおすすめのすぐ後に置いてください。直接リンクを使うか、ショートコード一覧で商品のハンドルとともに説明されている[fy2press_product]ショートコードを使います。このショートコードは、このデモではテストしていません。完全な方法については、WordPressの購入ガイドに関する記事をご覧ください。

ページの裏側：設定画面

「デザイン」タブには、カードの共通設定（グリッド列数、画像比率、角丸、枠線、影）とライブプレビューがあります。レスポンシブ設定にはPROの表示があり、使用していません。

「ページに追加」タブでは、WordPressエディター（Gutenberg）かショートコードを選べます。デモではショートコードを使いました。

「Google と SEO」タブでは、どのページを商品のメインのバージョンにするか（WordPressのページか、Shopifyの商品ページか）と、どのWordPressページのインデックス登録を許可するかを尋ねます。デモでは、検索エンジンが受け取る内容は調べていません。公開ページでの確認方法は正規のカタログ面を選ぶで説明しています。

このデモで証明されないことは何ですか？

• Shopifyとの実際の接続。ストア、トークン、同期のいずれもありません。実際のサイトには既存のShopifyストアとそのサブスクリプションが必要で、FREEでは毎回手動で同期を開始します。同期は即時ではありません。
• 支払い。カート、チェックアウト、注文はいずれも作成していません。支払いは必ずShopifyで行われます。
• パフォーマンス。速度や負荷は測定していません。
• すべてのテーマでの動作。使用したテーマはTwenty Twenty-Fiveの1つだけで、デスクトップの幅で表示しています。その他のテーマ、ページビルダー、スマートフォンでのレイアウトは、ここでは示していません。
• トラフィック、検索順位、売上。検証環境はローカルのマシンからしかアクセスできず、訪問者はいませんでした。そのような成果は存在しないため、何も主張していません。
• PROの機能。使用したのはFREEエディションだけです。

自分のサイトで再現するには？

このシートは上記の方法に沿っています。構成をコピーして使ってください。非公開のデータは必要ありません。

1. ケースの性質を明記する

架空のデモですか、それとも許可を得た顧客事例ですか？　プラグインのエディションとバージョン、WordPressのバージョン、テーマ、目的を記録します。データが架空のものであれば、そのことをページ自体に明記してください。

2. カタログを準備する

既存のShopifyストア、WordPressサイト、FREEプラグインが必要です。できればステージング用のコピーで行ってください。ストアを接続し、「Google と SEO」タブで商品のメインページを選んでから、手動同期を実行します。新しい商品ページはそのまま公開されるため、先に表示の可否を決めてください。

3. 各ページに役割を1つずつ与える

• カタログ：見て回るためのページ。検索、絞り込み、並び替え、グリッドを備えます。
• 商品ページ：確かめるためのページ。バリエーション、価格、画像、説明を備えます。
• ガイド：決めるためのページ。まず基準を示し、次に各基準に応える商品を示します。

読者が次に抱く疑問に沿って、ページをつなぎます。ガイドのおすすめからその商品へ、そして選ぶのに背景の説明が必要なときは、商品からガイドへリンクします。

4. 公開前に確認する

エディターだけでなく、パソコンとスマートフォンで公開ページを開きます。商品を1つShopifyと比べます（価格、バリエーション、在庫状況）。購入操作をたどってShopifyまで進みますが、許可されていない支払いは完了させないでください。

5. 各主張を証拠と対応させる

示したい主張	必要な証拠	Morrowfieldのデモ	あなたのプロジェクト
カタログが表示され、見て回れる	実際の表示結果の画面	表示済み。絞り込みの結果は未撮影	（記入）
商品ページにバリエーションがある	特定の商品でのテスト	表示済み。Oliveを選択	（記入）
ガイドの中に商品が表示される	エディターと公開ページでの表示	表示結果は掲載。エディターは未撮影	（記入）
同期が機能する	許可を得たストアと結果	未実施	（記入）
チェックアウトに到達した	許可を得た購入の流れ	未実施	（記入）
売上が伸びた	一定期間の適切な測定	未実施。主張なし	（記入）

最後の3行を、最初の3行から推測して埋めないでください。商業的な測定がないなら、もっともらしい数字で置き換えるのではなく、その約束自体を取り下げてください。

6. 権利を確認する

実際の顧客事例では、画像、引用、名前、公開について書面で許可を得てください。すべてのスクリーンショットから、注文、顧客データ、トークン、ライセンスキー、非公開のアドレスを取り除いてください。

次はどこへ？

• ShopifyとWordPressの役割分担：概要
• ページを作る：ブロックとショートコードで公開と商品とコレクションをデザイン
• Shopifyに残るもの：データ、認証情報、外部サービス

同じページを自分のカタログで試すには、WordPress.orgから無料プラグインをインストールしてください。PROは、ライセンスと決済を担当するFreemiusを通じて別途販売しています。