はじめに
Antigravityでホームページを作成する場合、最終的にどこへ貼り付けるのかを先に決めておくことが重要です。
今回は、WordPressの固定ページにある「カスタムHTML」ブロックへ貼り付ける前提で、1ページ完結型ホームページを作成する流れを整理しました。
ポイントは、通常のHTMLファイルを作るのではなく、WordPressに埋め込めるHTMLを作ることです。
そのため、htmlタグ、headタグ、bodyタグを含めた完全なHTMLファイルではなく、カスタムHTMLブロックにそのまま貼り付けられるコードとして作成する必要があります。
2段階プロンプトでは何をしていたか
最初のプロンプトでは、いきなりHTMLコードを作るのではなく、まずページの構成案と掲載文章を作る流れにしていました。
たとえば、以下のような内容です。
- ファーストビュー
- お悩み・課題
- サービス内容
- 選ばれる理由
- 利用の流れ
- よくある質問
- お問い合わせ導線
この段階では、HTMLは作りません。
まず、どの順番で情報を見せるか、どのような文章にするかを整理します。
その後、2段階目のプロンプトで、作成した構成案と文章をもとにHTML化します。
この方法は、文章の精度を上げやすいというメリットがあります。
2段階に分けるメリット
2段階に分けると、いきなりコードを書かせるよりも内容を整理しやすくなります。
特に、初心者向けのサービス紹介ページを作る場合、まず必要なのはデザインではなく、伝える順番です。
- どんな悩みを持っている人に向けたページなのか。
- どんなサービスなのか。
- なぜ選ばれるのか。
- 問い合わせまでどうつなげるのか。
この流れを先に作っておくことで、読みやすいページになります。
また、文章を確認してからHTML化できるため、後から大きく修正する手間も減ります。
WordPress用HTMLで注意すべき点
WordPressのカスタムHTMLブロックに貼り付ける場合、通常のHTMLファイルとは作り方が少し違います。
通常のHTMLファイルでは、以下のようなタグを使います。
<html>
<head>
<body>しかし、WordPressの固定ページ内に貼り付ける場合、これらのタグは不要です。WordPress側にすでにページ全体の構造があるため、カスタムHTMLブロックには、ページ内に表示したい部分だけを入れます。
そのため、プロンプトには次のように明記する必要があります。
htmlタグ、headタグ、bodyタグは使わないこの指定を入れておかないと、Antigravityが通常のHTMLファイル形式で出力してしまうことがあります。
CSSも同じコード内に入れる
WordPressに貼り付けるHTMLでは、CSSも同じコード内に入れておくと扱いやすくなります。
外部CSSファイルを別で用意すると、初心者には少し難しくなります。
そのため、次のように指定します。
HTMLとCSSを1つにまとめる
styleタグを使ってCSSも同じコード内に含める
外部CSSファイルは使わないこのようにしておくと、WordPressのカスタムHTMLブロックへ貼り付けるだけで、デザインまで反映できます。
クラス名には共通の接頭辞を付ける
WordPressでは、テーマやプラグインのCSSと干渉することがあります。
たとえば、単純に .card や .button のようなクラス名を使うと、テーマ側のCSSとぶつかる可能性があります。
そこで、今回のプロンプトではクラス名に必ず agwp- を付けるように指定しています。
例としては、以下のような形です。
<div class="agwp-section">
<a class="agwp-button" href="#contact">お問い合わせ</a>このようにしておくと、他のページやテーマへの影響を減らせます。
プロンプトには、次のように書いておくとよいです。
WordPressテーマと干渉しにくいように、クラス名には必ず「agwp-」を付けるJavaScriptは基本的に使わない
今回のようなシンプルなサービス紹介ページであれば、JavaScriptは基本的に不要です。
JavaScriptを使うと、テーマやプラグインとの相性で動作しない場合があります。
また、セキュリティ設定やWordPressの仕様によって、コードが正しく反映されないこともあります。
そのため、最初の段階ではHTMLとCSSだけで完結させるのが安全です。
プロンプトには、次のように入れておきます。
外部JavaScriptは使わない
JavaScriptは使わないこれにより、カスタムHTMLブロックでも扱いやすいコードになります。
画像は必須にしない
初心者向けのホームページ作成では、画像を必須にしない方が進めやすくなります。
画像を入れる場合、WordPressのメディアライブラリにアップロードしたURLへ差し替える必要があります。
そのため、プロンプトには次のように入れておくと安全です。
画像は必須にしない
画像を使う場合は、後からWordPressのメディアURLに差し替えやすい形にするこれにより、画像がなくても成立するシンプルなページを作れます。
問い合わせ導線を必ず入れる
サービス紹介ページの目的は、サービス内容を伝えることだけではありません。
最終的には、問い合わせにつなげることが目的です。
そのため、ページ内には問い合わせボタンを必ず入れます。
今回のプロンプトでは、リンク先を一旦 #contact にしています。
<a href="#contact">お問い合わせする</a>このようにしておけば、後から問い合わせフォームの場所に合わせてリンクを調整できます。
たとえば、Contact Form 7を使っている場合は、ページ下部に問い合わせフォームを設置し、そのセクションに id="contact" を付けることで、ボタンからフォームまで移動できます。
一括生成用プロンプトにする理由
「まず公開できる状態まで進めてもらう」ことが重要です。細かい調整は後からでもできます。
そのため、最初から完成形のHTML全文を出力させるプロンプトにしておくと、次の流れがスムーズになります。
- Antigravityにプロンプトを入力する
- HTML全文を作成する
- WordPressの固定ページを開く
- カスタムHTMLブロックに貼り付ける
- プレビューで確認する
- 公開する
この流れであれば、初心者でも実際にページ公開まで進めやすくなります。
プロンプトには「HTMLコード全文だけ」と指定する
AntigravityやAIツールにHTMLを作成させる場合、よくある問題があります。
それは、コードの前後に説明文が入ってしまうことです。
たとえば、次のような文章が入ることがあります。
以下がHTMLです。
このコードを貼り付けてください。このような文章までWordPressに貼り付けると、そのまま画面に表示されてしまう場合があります。
そのため、プロンプトには次の指定を入れておくと安全です。
説明文ではなく、HTMLコード全文だけを出力してください
コードの前後に解説を入れないでください
「以下がHTMLです」などの文章も入れないでくださいこの指定により、カスタムHTMLブロックに貼り付けやすい出力になります。
省略禁止の指定も重要
AIに長いコードを作らせると、途中で省略されることがあります。
たとえば、次のような出力です。
<!-- ここに他のセクションを追加 -->そのままWordPressに貼り付けても完成しません。プロンプトには以下のように入れておく必要があります。
途中で省略しないでください
「<!-- 省略 -->」を使わないでください
すべてのセクションを含めた完成版を出力してくださいプロンプトでは、この指定が特に重要です。参加者がそのまま貼り付けて使える状態にするためです。
まとめ
AntigravityでWordPress用のホームページを作成する場合は、最終的な貼り付け先を意識したプロンプト設計が重要です。
WordPressのカスタムHTMLブロックに貼り付けるなら、通常のHTMLファイル形式ではなく、埋め込み用HTMLとして作成する必要があります。
特に重要なポイントは、次のとおりです。
- HTMLとCSSを1つにまとめる
- styleタグでCSSを入れる
- 外部CSSや外部JavaScriptは使わない
- クラス名には共通の接頭辞を付ける
- スマホ表示に対応する
- 問い合わせ導線を入れる
- コード全文だけを出力させる
- 途中で省略させない
2段階で作る方法は丁寧ですが、短時間の講座では、最初からHTML全文まで出力するプロンプトの方が実用的です。
まずは公開できるページを作る。その後に、文章やデザインを改善する。
この順番にすることで、初心者でもホームページ制作の流れを体験しやすくなります。