TL; DR
GemPages MCPを使用すると、完成したHTMLをGemPages内で編集可能なページに変換できます。
開発者、代理店、AIコーディングツール、FigmaからHTMLへのワークフロー、または完全なHTMLを生成するその他のソースからHTMLを使用できます。
HTMLを提供すると、AIは次のようになります。
- 指定されたHTMLを読み込みます。
- ページ構造とセクションを識別します。
- GemPagesの生成ルールを使用してページを構築します。
- ページをセクションごとに構築し、検証します。
- GemPagesに編集可能なページを作成します。
- ページが完成したら、プレビューとエディターのURLを返します。
基本的なプロンプトは次のようになります。
GemCommerce MCP を使用します。landing-page.html を、ストア上の編集可能な GemPages ページに変換します。
AIはページを作成しますが、公開はしません。GemPagesで結果を確認し、準備ができたら公開してください。
GemPages MCP を使用した HTML ページ生成の仕組み
GemPages MCPは、HTML、画像、URLからのAIページ生成をサポートしています。このガイドでは、特にその使用方法に焦点を当てています。 ソースコードとしてHTMLを使用.
HTMLランディングページは、さまざまなソースから入手できます。
- 社内開発者
- クリエイティブエージェンシーまたはeコマースエージェンシー
- Claude Code または他の AI コーディングツール
- FigmaからHTMLへの変換プロセス
- 既存のキャンペーンワークフロー
- あなたのチームが既に所有しているページ
- 完全なHTMLを生成できる別のシステム
ファイルはブラウザ上では既に完成しているように見えるかもしれませんが、ストアのページワークフローとは依然として別個のものです。
直接接続がない場合、チームはコードを手動で転送するか、開発者にGemPagesでページを再構築するよう依頼する必要があるかもしれません。これにより、別の引き継ぎが発生し、コピー、レイアウト、リンクが変更される可能性が高まります。
GemPages MCPでは、AIが定義されたプロセスを通じてこの転送を完了できます。完成した作業をローカルフォルダに保存するのではなく、ワークフローによって実際のGemPagesページが作成され、チームメンバーはそれをプレビューして編集できます。
GemPages MCPがHTMLからページを作成する方法
GemPages MCPは、HTMLファイル全体を単一の区別のないブロックとして扱いません。
ソースコードを意味的なセクションに分割し、各セクションを個別に構築し、結果を検証してから次の処理に進みます。
1. AIが完成したHTMLを読み込む
ワークフローは、HTMLを会話に貼り付けるか、AIにローカルを指定することから始まります。 .htmlを ファイルにソフトウェアを指定する必要があります。
提供できるもの：
- HTMLランディングページ1つ
- 複数のHTMLファイル
- 複数のページを含むフォルダ
ソースとなるHTMLには、意図したテキスト、レイアウト、画像、スタイルが既に含まれている必要があります。
コンテンツやデザインの主要な変更は、ワークフローを開始する前に完了させておくのが望ましい。安定したHTMLバージョンから始めることで、長時間の変換作業中の混乱を軽減できる。
2. ページは意味的に区分されたセクションに分かれています
AIはHTMLを読み取り、ページの機能的なセクションを識別する。
ソースデザインによっては、これらには以下が含まれる場合があります。
- ヒーロー
- 製品導入
- 公式サイト限定
- 特長
- 仕組み
- 製品比較
- 社会的証拠
- お客様の声
- 提供
- よくある質問
- 最終CTA
正確なセクションリストは、提供されるHTMLによって異なります。
ページを意味的に区分することで、AIは明確な構造に従って処理を進めることができます。また、ページ全体を一括処理するのではなく、特定のセクション内の問題だけを分離して処理するワークフローも可能になります。
3. GemPagesの生成ルールが取得される
ページを作成する前に、AIはGemPagesの生成ルールを取得します。
これらのルールは、HTMLをGemPagesページに変換するために必要な手順を提供します。AIはこれらのルールを一度取得し、実行全体を通して参照として使用します。
これにより、ワークフローが最初のセクションから最後のセクションへと進むにつれて、同じ建築要件が維持されます。
4. 各セクションは構築され、検証されています
AIは一度に1つのセクションずつ処理します。
各セクションについて、以下のことを行います。
- 関連するHTMLをお読みください。
- GemPagesの生成ルールに従ってセクションを作成します。
- 生成された結果を検証する。
- 検証中に発見された問題に対処してください。
- 完成したセクションをページに押し込みます。
- 次のセクションに進んでください。
このセクションごとのプロセスでは、次のような問題が検出される可能性があります。
- 欠落したコピー
- 不完全なページ要素
- レイアウトの違い
- コンテンツが間違ったセクションに配置されています
- ソースと一致しないボタン
- 構築中に省略されたセクション
- HTMLと生成された結果のその他の違い
1つのセクションが構築され検証されると、AIは次のセクションに進みます。
5. GemPagesで完全なページが作成されます
すべてのセクションの処理が完了すると、ワークフローによってGemPagesアプリ内のページが完成します。
HTMLはもはや単なるローカルコードファイルではありません。チームは、開いて作業を続けられるページを受け取ることができます。
6. AIがページリンクを返します
ページが完成すると、AIは以下を返します。
- プレビューURL
- エディターのURL
プレビューURLを使用すると、公開前にページ全体を確認できます。
エディターのURLをクリックすると、GemPagesでページが開くので、チームは引き続き変更を加えることができます。
ワークフローは、ページを作成してこれらのリンクを返すと停止します。AIはページを自動的に公開しません。
HTMLからGemPagesページを作成する手順（ステップバイステップ）
ワークフローは、Claude Code、Claude Desktop内のClaude Cowork、またはGemCommerce MCPとローカルファイルアクセスを備えたその他の互換性のあるAI環境で実行します。
クライアントによってインターフェースは異なる場合がありますが、主要な処理プロセスは同じです。
開始する前に、GemPages MCPセットアップガイドに従って、GemCommerce MCPをAIツールおよびShopifyストアに接続してください。
ステップ1：HTMLを準備する
まずは完成したHTMLランディングページを用意してください。
ソースには既に意図した内容が含まれているはずです。
- ページコピー
- セクション構造
- 画像
- タイポグラフィ
- 色
- ボタン
- リンク
- レスポンシブスタイリング
変換前にファイルを確認し、正しいバージョンを使用していることを確認してください。
明確なファイル名は、特に複数のファイルやバージョンが同じフォルダに保存されている場合に、間違いを防ぐのに役立ちます。
具体的な例を挙げますと、以下の通りです。
- サマーセール承認済み.html
- 製品発売最終版.html
- 比較ページv3.html
次のようなファイル名は避けてください。
- 新しい.html
- テスト2.html
- final-final.html
一括変換を行う場合は、関連するHTMLファイルを分かりやすい名前のフォルダに配置してください。
ステップ2：互換性のあるAI環境を開く
Claude Code、Claude CoworkをClaude Desktopアプリで開くか、または別のAI環境を以下で起動します。
- GemCommerce MCP
- ローカルファイルアクセス
- ワークフローファイルの読み取りと書き込み権限
このワークフローは、セクションファイル、ログ、ビルド成果物を含む実行フォルダを作成します。ワークフローはこれらのファイルを利用して進行状況を追跡し、中断された場合に正しく再開します。
ローカルファイルへのアクセス機能を持たないチャット専用のAI環境では、完全な変換を確実に完了することはできません。
GemCommerce MCPをClaudeまたはCodexに接続する方法については、以下をご覧ください。 GemPages MCP セットアップガイド.
ステップ3：AIにGemCommerce MCPを使用するように明示的に指示する
プロンプトは以下から始めてください。
GemCommerce MCPを使用してください。
この指示は、AIに対し、HTMLをどのように処理すべきかを推測するのではなく、適切なツールに接続するように指示するものです。
具体的な例を挙げますと、以下の通りです。
GemCommerce MCP を使用します。 ランディングページ.html 私のストアのGemPagesページに掲載します。
ステップ4：HTMLファイル1つまたはバッチファイルを提供する
HTMLを会話に貼り付けるか、AIにローカルファイルを指定することができます。
1ページあたり：
「GemCommerce MCP を使用してください。 ランディングページ.html 私のストアのGemPagesページに掲載します。
添付ファイルの場合：
「GemCommerce MCPを使用してください。添付のHTMLを私のストアのGemPagesページに変換してください。」
複数のファイルの場合：
「GemCommerce MCP を使用します。すべての GemPages ページを作成します ランディングページ.html 下 pages/batch-2026-07/フォルダ内には6つのファイルがあります。
可能な限り、正確なファイル名またはフォルダ名を明記してください。複数のバージョンが利用可能な場合は、「最新のファイルを使用してください」といった指示は避けてください。
ステップ5：AIにページを作成させる
HTMLを受信後、AIは以下の処理を実行します。
- ページを読んでください。
- それを意味的な区分に分けます。
- GemPagesの生成ルールを取得します。
- 最初のセクションを構築します。
- 結果を検証してください。
- セクションをページに押し込みます。
- 残りの各セクションについても、この手順を繰り返してください。
通常、この段階ではこれ以上の入力は必要ありません。
ただし、実行開始時は会話に付き添ってください。AIはMCPツールを使用したり、ファイルにアクセスしたり、ローカルコマンドを実行したりするために許可が必要になる場合があります。
ステップ6：プレビューURLとエディターURLを受け取る
すべてのセクションが構築され、検証が完了すると、AIは完成したページへのリンクを返します。
プレビューURLを開いて結果を確認してください。
ページをさらに変更する必要がある場合は、エディターのURLを開いてください。
バッチ処理の場合、各HTMLファイルに対応するページとリンクのセットが存在することを確認してください。
ステップ7：GemPagesでページを確認する
変換後のページと元のHTMLを比較してください。
最初の数セクションだけを確認するのではなく、ヒーローセクションから最後のCTAまで、ページ全体をレビューしてください。
以下を確認してください:
- すべてのセクションが含まれています
- コピーは正しく転送されました
- 画像は適切な場所に表示されます
- フォントと色は原文に忠実です
- セクション間隔は一定です
- ボタンとリンクは機能します
- このページは画面サイズに関わらず正しく動作します
- インタラクティブな要素は意図どおりに動作します
ステップ8：エディターで最終調整を行う
レビュー中に発見された問題点については、エディターのURLを使用して対処してください。
変更を加えた後は、再度ページをプレビューしてください。
公開前に、そのページはチームによるコンテンツ、デザイン、技術、および商業的なチェックに合格する必要があります。
ステップ9：ページを自分で公開する
GemPages MCPは、お客様に代わってページを公開するわけではありません。
ページが完成したら、GemPagesを通して手動で公開してください。
これにより、最終的な顧客向けバージョンとリリース時期をチームの管理下に置くことができます。
プロンプトの例
明確なプロンプトには、GemCommerce MCP、ソースファイル、要求されたアクション、および期待される出力が明示されている必要があります。
| 添付されたHTMLファイルを変換する | 「GemCommerce MCPを使用してください。添付のHTMLファイルを私のストアのGemPagesページに変換してください。すべてのセクションが完成したら、プレビューとエディターのURLを返してください。」 |
| AIコーディングツールからHTMLを変換する | 「GemCommerce MCP を使用してください。 サマーキャンペーン.html 私のストアのGemPagesページに組み込みます。各セクションを個別に構築および検証し、プレビューとエディターのURLを返します。 |
| 複数のHTMLページを一括変換する | GemCommerce MCP を使用します。すべての GemPages ページを作成します。 ランディングページ.html 下 pages/batch-2026-07/フォルダ内には6つのファイルがあります。各ページを個別に処理し、プレビューURLとエディタURLを返してください。 |
その他の入力タイプを使用する
このガイドでは、HTMLからGemPagesページを作成する方法に焦点を当てます。
GemPages MCPは、AIページ生成のためのその他の入力もサポートしています。
- イメージ： 視覚的な参考資料として、画像またはスクリーンショットを使用してください。
- URL： 既存のウェブページのURLをソースとして使用します。
詳しい手順については、以下を参照してください。 GemPages MCPを使用して画像から編集可能なページを生成する方法
ワークフローを中断なく実行するためのヒント
ヒント1：GemCommerce MCPツール呼び出しを許可する
Claudeはデフォルトで、MCPツールを使用する前に許可を求めます。HTMLからGemPagesへのワークフローでは多くのツール呼び出しが行われるため、これらのプロンプトが繰り返し表示されることで処理が中断される可能性があります。
必要なGemCommerce MCPツール呼び出しを許可するには：
- ClaudeデスクトップアプリでClaude Codeを開きます。
- 詳しくはこちら カスタマイズ 左側のサイドバーで。
- に行く コネクタ → GemCommerce MCP.
- 店は開いています ツールの権限.
- 必要な GemCommerce MCP ツールを次のように設定します。 常に許可する.
継続的なアクセス許可は、認識していて信頼できるコネクタにのみ付与してください。
ヒント2：安全なBashコマンドには自動モードを使用する
このワークフローでは、Bashコマンドを使用してセクションファイル、ログ、およびビルド成果物を作成および管理します。
クロードがすべてのコマンドに対して承認を要求すると、実行が頻繁に停止する可能性があります。
Claude Desktop アプリ内の Claude Code で、会話を次のように設定します。 オートモードそうすれば、クロードは毎回承認を求めることなく、安全だと判断したコマンドを実行できるようになります。
自動モードを有効にする前に、特に会話がストレージ情報やローカルファイルにアクセスする場合は、アクセス許可設定を確認してください。
ワークフローを実行する前に知っておくべきこと
変換を開始する前に、以下の点を確認してください。
1. 「GemCommerce MCPを使用してください」と明記する
プロンプトを開始するには、AIにGemCommerce MCPを使用するように指示してください。
この指示がない場合、AIは別の方法を試みるか、必要なツールへの接続に失敗する可能性があります。
2. ローカルファイルアクセスが可能な環境を使用する
ワークフローは、Claude Code、Claude Cowork、またはローカルファイルへのアクセスが可能なその他の互換性のある環境で実行してください。
ワークフローは、以下の内容を含む実行フォルダーを作成します。
- セクションファイル
- 進捗ログ
- 検証結果
- 成果物を構築する
- 変換を再開するために使用されるデータ
ローカルファイルへのアクセス機能を持たないチャット専用インターフェースでは、処理全体を確実に管理することはできません。
3. 約500万のコンテキストを処理できるモデルを使用する
ランディングページは複数のセクションで構成される場合があり、それぞれのセクションごとに個別の構築および検証サイクルが必要となる。
中程度または高レベルの推論負荷を設定したOpusなど、約500万件のコンテキストを余裕をもって処理できるモデルを使用してください。
文脈や推論能力が限られているモデルでは、以下の点を見失う可能性があります。
- GemPagesの生成ルール
- 以前に完了したセクション
- 以前の検証結果
- ページ全体のデザインパターン
- ランニングの現在の段階
これは、長いページや一括変換の場合に特に重要になります。
4. 中断された実行を再開できます
接続の切断、使用予算の超過、またはその他の障害により、ワークフローが完了する前に停止する可能性があります。
通常は再起動する必要はありません。
AIに続行を指示する：
前回完了したセクションからHTMLからGemPagesへのワークフローを続行してください。実行を再開しないでください。
AIは、既存のセクションファイル、ログ、およびビルド成果物を使用して、正しい箇所から処理を再開できます。
ページが完成するまで、実行フォルダはそのままにしておいてください。
5. 長いページは1時間以上かかる場合がある
セクションが多いページは、完成までに1時間以上かかる場合があります。
このワークフローでは、高速な一括転送よりも正確な再構築を優先します。各セクションは、GemPagesの生成ルールに基づいて個別に構築および検証されます。
これは重要な点です。なぜなら、最終的に表示されるページは顧客が目にし、行動を起こすものだからです。コピー、レイアウト、CTA（行動喚起）ボタンの動作にわずかな違いがあるだけでも、最終的な顧客体験に影響を与える可能性があります。
ページに含まれるセクションが多いほど、ワークフローに必要な構築と検証のラウンド数も増える。
公開前に確認すべき事項
GemPages MCPは編集可能なページを返しますが、最終レビューの責任は引き続きお客様のチームにあります。
各セクションを元のHTMLと比較する
元のHTMLとGemPagesのプレビューを並べて表示します。
それを確認します：
- すべてのセクションが存在します
- セクションの順序は正しい
- コピーはソースと一致します
- 画像は意図した場所に表示されます
- ボタンには意図したラベルが使用されています
- CTAの目的地は正しい
- 重複したセクションはありません
- 重要なコンテンツは欠落していません
デスクトップ、タブレット、モバイルのレビュー
複数の画面サイズでページを確認してください。
探す：
- 横スクロール
- コンテナからはみ出したテキスト
- 画像の切り抜きが正しくありません
- 固定幅セクション
- タップしにくいボタン
- セクション間の大きな隙間
- 小型スクリーンに合わないテーブル
- コンテンツを覆う粘着要素
テストページのアクション
顧客向けのあらゆる操作をクリックしてテストしてください。テスト対象には以下が含まれます。
- CTAボタン
- 製品リンク
- ナビゲーションリンク
- アンカーリンク
- フォーム
- アコーディオン
- その他のインタラクティブ要素
ページはソースコードとよく似ているように見えても、誤ったリンクや機能しないアクションが含まれている場合があります。
コンテンツとオファー情報を確認する
チェック：
- 製品名
- チケット料金表
- 割引
- 配送について
- 返品条件
- 保証
- お客様の声
- 競合他社との比較
- 認定
- 製品の主張
- オファーの有効期限
このワークフローはページを転送しますが、ソースHTMLに含まれるすべての商業的な記述が正確であることを確認するものではありません。
GemPagesで最終変更を行う
残っている問題については、エディターのURLを使用して対処してください。
変更を加えた後は、再度ページをプレビューし、関連するチェックを繰り返してください。
コンテンツ、デザイン、モバイル表示、顧客の行動をすべて確認してから公開してください。
GemPagesページをHTMLから作成するタイミング
以下の場合は、ソースとしてHTMLを使用してください。
- 既に完成したHTMLランディングページがあります
- 開発者がページを準備しました
- 代理店が最終的なHTMLを納品しました
- AIコーディングツールが承認済みページを生成しました
- Figmaのデザインは既にHTMLとして実装されています
- 複数のHTMLページをGemPagesに移行する必要があります。
- eコマースチームは開発後にページを管理する必要があります
このワークフローは、HTMLの作業が完了しており、手動での再構築を行うことなく、それをストアのワークフローに取り込む必要があるチーム向けに設計されています。
コメントしてくださってありがとうございます