AIブロックは作りたいデザインを日本語で書くだけでAI が記事用の HTML パーツを生成する Gutenberg ブロックです。
向いている用途
- 記事内に目立つボックスや表を素早く作りたいとき
- HTML/CSS に不慣れでも、デザイン案を試したいとき
- 参考画像のレイアウトや配色をもとに、似た見た目を再現したいとき
2. 利用方法の流れ
基本的な手順（投稿編集者）
- 投稿の編集画面を開く
- ブロック追加（＋）→「AI ブロック」を検索して挿入
- 作りたい HTML の説明を日本語で入力（任意で参考画像を添付）
- 「生成」ボタンをクリック
- プレビューで見た目を確認（必要なら「コードを表示」で HTML も確認）
- 問題なければ「ブロックとして適用」または「HTMLとして適用」を選択
- 投稿を保存・公開
ポイント
- 生成ボタンを押したときだけ OpenAI API が呼ばれ、利用料金が発生します
- プレビューでイメージと違う場合は 「キャンセル」 で入力画面に戻り、プロンプトを直して再生成できます
- 「ブロックとして適用」 後は 「再生成」 で内容を更新できます（自動更新はされません）
- 1 投稿に 複数の AI ブロック を挿入できます
適用方法の選び方（概要）
| 方法 | おすすめの場面 |
|---|---|
| ブロックとして適用（推奨） | まだ調整中。プロンプトを残して何度でも再生成したい |
| HTMLとして適用 | 完成した見た目を固定したい。プラグインに依存せず残したい |
迷ったらまず ブロックとして適用 で試し、完成後に HTMLとして適用 に切り替える運用がスムーズです。
3. 機能について
3.1 テキストから HTML を生成
- プロンプトに色・サイズ・表示テキストなどを具体的に書くほど、意図に近い結果になりやすいです
- 1 回の生成では 1 つのパーツ に絞ることを推奨します（複雑なページ全体のレイアウトは向きません）
3.2 参考画像（任意）
メディアライブラリから画像を選択するか、ドラッグ＆ドロップで添付できます。
| 利用方法 | 動作 |
|---|---|
| 画像を挿入 | 指定した画像を生成 HTML 内の <img> として配置 |
| デザイン参考 | 画像のレイアウト・配色を参考に HTML を生成（画像自体は HTML に含めない） |
- 画像を使う場合は GPT-4o または GPT-4o mini が必要です（Vision API）
- 画像付き生成はテキストのみより トークン消費・料金が大きく なることがあります
3.3 JavaScript モード（任意）
ブロック設定（右サイドバー）の 「JavaScript を使用」 をオンにすると、アニメーションやインタラクティブな表現を含むコンテンツを生成できます。
| 項目 | 内容 |
|---|---|
| 実行環境 | サンドボックス付き iframe 内で実行（記事ページ本体への直接スクリプト埋め込みではない） |
| 表示調整 | 高さ（px）（0 または空欄で自動）、最大幅（例: 600px, 80%）を設定可能 |
| 注意 | オン／オフを変えた場合は 再生成 が必要です。適用後は設定の変更ができない項目があります |
通常モード（JavaScript オフ）では、セキュリティのため <script> などは生成・保存されません。
3.4 プレビューと適用
| 機能 | 説明 |
|---|---|
| ライブプレビュー | 生成結果の見た目をエディター上で確認 |
| コード表示 | 生成された HTML（または JS モードのコンテンツ）を確認 |
| HTMLとして適用 | WordPress 標準の カスタム HTML ブロックに変換。プラグイン無効化後も表示が残りやすい |
| ブロックとして適用 | AI ブロックのまま保存。プロンプト・画像・設定を保持し 再生成 可能 |
| 再生成 | 適用済みブロックから入力画面に戻り、プロンプトを調整して再び生成 |
3.5 通常モードで使える HTML の目安
セキュリティのため、許可されたタグのみが保存・表示されます。
使える例: div, p, span, 見出し, リスト, テーブル, a, img, details / summary（開閉 UI）など。スタイルは インライン CSS（style="..."）が基本です。
使えない例: <script>（通常モード）, <iframe>, <form>, <input>, <style> タグ, @keyframes / @media など
4. 利用に関する承諾及び注意事項
本機能の利用は、以下の内容を理解したうえで行ってください。詳細は管理画面 AIサポート設定 最下部の「プライバシーに関する注意事項」および OpenAI のポリシー もあわせてご確認ください。
AI 生成コンテンツについて
- 生成結果は AI の自動出力であり、デザイン・文言・リンク先が意図どおりとは限りません
- 公開前にプレビューで必ず確認し、問題があれば再生成または「HTMLとして適用」後の手動修正を行ってください
- 同じプロンプトでも 毎回結果が異なる ことがあります
セキュリティ・表示に関する注意
| 項目 | 注意 |
|---|---|
| 通常モード | 出力は wp_kses によりサニタイズ。危険なタグは除去されます |
| JavaScript モード | サンドボックス iframe 内で実行。それでも信頼できるプロンプト・用途に限定してください |
| 外部リンク・画像 | 生成 HTML に含まれる URL は、公開前に妥当性を確認してください |
| 権限 | 生成 API は 投稿を編集できるユーザー（edit_posts）のみ実行可能 |
プラグイン・ブロックの運用上の注意
| 状況 | 結果 |
|---|---|
| HTMLとして適用 済み | カスタム HTML として残る。プラグイン無効化後も表示されやすい |
| ブロックとして適用 のみ | プラグイン無効化時、フロントに表示されなくなる（データは投稿に残る） |
| プラグイン削除 | 「ブロックとして適用」分はエディターでブロックエラー表示になる可能性あり |
| 再利用ブロック | AI ブロックは 再利用ブロックとして登録不可（投稿ごとに内容が異なるため） |
