GemPagesを使ってAI生成HTMLをShopifyに公開する

は何ですか GemPages HTML-to-Shopifyキット?

AIで作成された、あるいは手作業でコーディングされたHTMLページ（広告記事、リスト記事、ランディングページなど）が、ブラウザ上では正しく表示されるとします。しかし、それをShopifyにデプロイすると、テーマがデザインを上書きしたり、レイアウトが崩れたり、あるいは正しく動作させるためにShopify Liquidに変換する必要が生じたりします。

その GemPages HTML-to-Shopifyキット GemPagesは、HTMLをパッケージ化してShopifyに直接公開する無料ツールキットです。HTMLはそのままの状態で送信され、GemPagesがLiquidに変換し、ページURLとタイトルを管理し、ヘッダーとフッターを非表示にし、検索エンジンのインデックス登録を制御します。これらすべてをGemPagesが行わなければ、Shopifyのカスタムテーマコードが必要になります。

このツールキットの機能と非機能

効能は・・・

• HTMLをShopify互換のLiquidに変換します。Liquidを自分で記述する必要はありません。
• テーマによるデザイン変更を起こさずに、ページをShopifyに公開します。
• GemPagesを通じてページURLとページタイトルを管理します。
• ヘッダーとフッターを非表示にします つまり、あなたのページは独立したページとなるということです。
• 必要に応じて検索エンジンのインデックス登録をブロックします（noindex / nofollow）。これは特に有料広告を運用する場合に非常に役立ちます。有料広告では、ページを広告トラフィックのみに表示させ、Googleによるインデックス登録は行わないようにしたいからです。

できないこと：

• インポートされたページは 編集不可 GemPagesのドラッグ＆ドロップ要素を通して。
• まず、AIを使ったり、手作業で行ったり、どのような方法であれ、期待どおりのHTMLになるまで調整し、その後、GemPagesがデプロイを処理します。
• このワークフローは、 プレセールページ、広告記事、および独立したランディングページ — 商品ブロックや他のShopifyアプリとの連携には対応していません。

必要なもの

必要なものは3つです。

1. あなたのShopifyストアにGemPagesがインストールされていること. インストールを開始する GemPages ランディングページビルダー Shopifyストアで。

2. 有料のクロードアカウント: Claude Pro、Team、またはEnterprise。無料プランには含まれません プロジェクトこれは、設定に使用する機能です。購読はこちらから。 クロード・アイ.

3. ツールキットファイル：4つのファイルが入った小さなパッケージ。

以下は、ツールキットパッケージに含まれるGemPagesの追加HTMLテンプレートです。これらを参考にしたり、出発点として使用したりすることで、Claudeを使ってより簡単に独自のコンテンツを作成できます。 AI生成用HTMLテンプレート

エクスポートビルダーを使用する2つの方法

Claudeへのアクセス方法に応じて、2つの設定オプションがあります。

オプションA：ウェブ版Claude（claude.ai）

ステップ1：新しいプロジェクトを作成する

• 店は開いています クロード・アイ サインインします。
• 左側のサイドバーで、 プロジェクト.
• 詳しくはこちら 新規プロジェクト.
• それに名前を付けます： GemPagesエクスポートビルダー （またはお好みの名前でも構いません。）
• 詳細説明 フィールドにこれを貼り付けてください。

HTMLコードを、ShopifyのGemPagesページビルダーに直接インポートできる有効な.gempagesファイルに変換します。

• 詳しくはこちら 創造する.

ステップ2：カスタム指示を追加する

カスタム指示はクロードに伝えてください の このプロジェクト内で適切に行動する。

• 新しいプロジェクト内で、右側のサイドバーを確認してください。 カスタム命令.

• Video Cloud Studioで CLAUDE.md お使いのコンピューター上の任意のテキストエディタでファイルを開いてください。メモ帳（Windows）やTextEdit（Mac）で十分です。特別なものは必要ありません。
• 選択する を 内容をコピーして、プロジェクトの「カスタム指示」フィールドに貼り付けてください。
• 詳しくはこちら Save.

ステップ3：プロジェクト知識ファイルをアップロードする

プロジェクトナレッジとは、Claudeが必要に応じていつでも読み取ることができる参照ファイルのセットです。ここでは3つのファイルをアップロードします。

• プロジェクト内で、 プロジェクト知識 （通常は右側のサイドバーにある）セクション。
• 詳しくはこちら コンテンツを追加 （アップロードボタン）

• 以下の3つのファイルを1つずつアップロードしてください。
  • SKILL.md
  • page_schema.md
  • build_gempages.py

ステップ4：それをテストする

準備は整いました。さあ、使ってみましょう。 プロジェクト内で新しいチャットを開き、以下のプロンプトを試して、すべてが正常に動作していることを確認してください。

簡単なサンプル.gempagesファイルを作成してください。

私のHTMLファイルを.gempagesファイルに変換してください。そうすれば、ShopifyのGemPagesにインポートできます。

オプションB：Claudeデスクトップアプリ（コワーキングモード）

ステップ1：Claudeデスクトップアプリがインストールされていることを確認してください。

それをダウンロードする claude.ai/ダウンロード まだお持ちでない場合は、有料アカウントでログインしてください。

ステップ2：コワーキングモードを有効にする

デスクトップアプリを開き、設定に移動して、 共同作業 有効になっています。（Coworkを使用すると、Claudeは安全なサンドボックス環境であなたのコンピュータ上でコードを実行できます。）

ステップ3：プロジェクトを作成し、ファイルをアップロードする

• 新しいプロジェクトを作成し、名前を付けます。 GemPagesエクスポートビルダー （または、あなたが望むものなら何でも。）
• プロンプトが表示されたら、をクリックします フォルダを選択してください
• コンピューター上のフォルダーを選択（または作成）します。例： GemPagesエクスポートビルダー
• これでクロードはそのフォルダへの読み取り/書き込みアクセス権を持つことになります。

ステップ4：プロジェクトファイルを追加する

このパッケージ内のすべてのファイルを、選択したフォルダにコピーしてください。

• CLAUDE.md
• SKILL.md
• page_schema.md
• build_gempages.py

ステップ5：テストする

プロジェクト内で新しいチャットを開き、オプションAと同じプロンプトを使用してください。今回は、クロードがファイルを自動的にパッケージ化し、チャット内で直接配信します。

インポート方法 .gempages GemPagesにファイルする

クロードがあなたの .gempages ファイル、最終ステップはそれをインポートすることです GemPages ランディングページビルダー.

ステップ1：GemPagesダッシュボードを開く

Shopify管理画面内でGemPagesアプリを開き、 ページ のセクションから無料でダウンロードできます。

ステップ2：アップロード .gempages File

Pages ダッシュボードの上部には、なめます インポートページ。

選択する ファイルを追加します。

まず .gempages コンピューターからのファイル

ステップ3：ページをインポートする

詳しくはこちら インポート 確認します。