AI 向け HTML プロンプト

きれいに変換できる HTML を AI に書かせる

HTML が AI 生成なら、まずこれらのプロンプトのいずれかを貼り付けてください。結果は Elementor の見出し・テキスト・画像・ボタン・コンテナへよりきれいに変換されます。

汎用プロンプト

一般ページ・詳細ページ・紹介向け。全体をコピーしてから情報を追加してください。

Please generate a complete HTML page that I will import into Elementor, following these rules:

1. Output only a single complete HTML file starting from <!doctype html>, no extra explanation.
2. Put all styles inside one <style> tag in <head>, or as inline style. Do not link external CSS files.
3. Split the page into clear sections (hero, benefits, content, call to action), each wrapped in <section> or <div>.
4. Use <h1>–<h3> for headings, <p> for body text, and <a> or <button> for buttons.
5. Use <img> with clear, descriptive alt text. Do not embed images as Base64 data URLs — use a real hosted URL, or a simple placeholder src to fill in later.
6. Prefer flex or grid for layout; do not rely on absolute positioning.
7. For icons use Font Awesome classes, e.g. <i class="fas fa-shield-alt"></i> — not inline SVG and not emoji. They import as editable Elementor icon-library icons.
8. Do not include JavaScript, form submissions, carousels or popups.
9. Keep the DOM shallow: one wrapper <section> or <div> per block, no redundant nested divs.

Here is the page information:
(add your product/page topic, key selling points, and copy notes here)

商品ページ用プロンプト

商品・詳細ページ向け。商品構造を重視します。

Generate a complete product detail HTML page to import into Elementor. Same rules as above (single file, inline styles, clear sections, no scripts), and include these sections:

1. Hero: product name <h1>, one-line selling point <p>, two buttons (Get a Quote / View Details), and a main product image placeholder.
2. Key benefits: 3–6 benefit cards, each with a title, description and a Font Awesome icon (e.g. <i class="fas fa-check"></i>), not inline SVG.
3. Specifications: a <table> listing key parameters.
4. Use cases: 2–3 image-and-text use cases.
5. Call to action: a heading and a button.

Product info:
(add product name, benefits, specs, target customer here)

ランディングページ用プロンプト

キャンペーン・単一商品ページ向け。コンバージョン構造を重視します。

Generate a complete marketing landing HTML page to import into Elementor. Same rules as above (single file, inline styles, clear sections, no scripts), with this structure:

1. Hero: big heading <h1> + subheading <p> + primary button + a visual placeholder.
2. Advantages: 3–4 advantage cards with Font Awesome icons (<i class="fas fa-..."></i>), not inline SVG.
3. Trust: testimonials or stats (as text, not inside images).
4. FAQ: 3–5 items as headings and paragraphs.
5. Closing CTA: one line + a button.

Campaign info:
(add the campaign topic, audience, selling points and goal here)

画像先行プロンプト

画像を先に（例：AI で）用意し、その画像を軸に HTML を作る場合に。

Build a complete product detail HTML page for me to import into Elementor. I already have the images — use exactly the image URLs I provide below, one <img> per image, each with descriptive alt text. Do not invent extra images and do not use Base64 data URLs.

Rules:
1. Output only a single complete HTML file from <!doctype html>, no explanation.
2. All CSS inline or in one <style> tag; no external CSS.
3. Semantic tags: <h1>–<h3>, <p>, <button> or <a>.
4. Keep the DOM shallow: one wrapper per block, no redundant nested divs.
5. Flex or grid layout, no absolute positioning; Font Awesome classes for icons (<i class="fas fa-..."></i>), no inline SVG, no emoji; no JavaScript.

Sections: hero (product name + one-line pitch + button + hero image); 3–6 benefit cards (icon + title + text); a specs <table>; 2–3 image-and-text use cases; closing call to action.

My images (URL → what it shows):
- https://your-site.com/wp-content/uploads/hero.jpg → main product on white background
- https://your-site.com/wp-content/uploads/use-1.jpg → product in use, outdoors
- (add the rest)

Product info:
(add product name, selling points, specs, target customer here)

ホスト URL がまだない場合は、URL リストを削除し、説明的な alt を残して、「画像」を「空の画像プレースホルダー」にして変換し、Elementor で各スロットに画像を入れてください。

AI 生成画像の扱い方

AI は実際の画像ファイルを HTML テキストに埋め込めないため、画像の参照方法が Elementor に届くかどうかを左右します。

最適——実 URL：まず画像をメディアライブラリにアップロードし、その URL を AI に渡して HTML が絶対 https:// アドレスを指すようにします。絶対 URL は保持され、手動作業なしで Elementor に入ります。
最も簡単——プレースホルダー：HTML では説明的な alt 付きの <img> を使い、「画像：空の画像プレースホルダー」で変換します。各スロットは alt を説明として保持するので、Elementor でどの画像を入れるか分かります。
避けるべき：Base64 埋め込み画像、相対・ローカルのファイルパス——変換器はこれらを既定で空のプレースホルダーにします。

このルールの理由

AI の出力を編集可能な Elementor コンポーネントへ変換しやすくします。

ルール	メリット
インラインスタイル、外部 CSS なし	ツールは実際のスタイルを読み取るため、取り込み後も余白と色が一致します。
明確なセクション、セマンティックなタグ	見出し/テキスト/画像/ボタン/コンテナの各コンポーネントへ分割しやすくなります。
Font Awesome アイコンを使う（インライン SVG や絵文字は不可）	編集可能な Elementor アイコンライブラリのアイコンとして読み込まれます。カスタムのインライン SVG は HTML ブロックとしてしか残せません。注意：Font Awesome アイコンはツールのプレビューに出なくても Elementor では表示されます。
分かりやすい画像置換メモ	実画像がなくても画像枠は取り込まれ、後で差し替えられます。
複雑なスクリプトなし	取り込みがより安全で、Elementor のエラーも減ります。
明確なブロックに分割されたコンテンツ	取り込み後の構造がよく、移動・削除・編集がしやすくなります。

AI にはこれを頼まないように

変換不可能ではありませんが、取り込み後に手作業の修正が必要になりやすいです。

スクリプト駆動のカルーセル・ポップアップ・トグル。
重要なテキストを画像に埋め込む——テキストはページ内に残してください。
アイコンとして使う絵文字。
不自然な深い入れ子——セクションは明確に。
ローカルディスクのパスを指す画像 URL。
外部ファイルに依存するページ。貼り付け時にスタイルやコンテンツが失われます。