吹き出し・枠・マーカー・ボタン・FAQ。WordPressのテーマ「SWELL」の装飾は、AIに「SWELLの装飾で書ける？」と聞いて、テスト記事を1本書かせ、崩れていない部品だけを「型集」に固定してもらうと、次の記事から自動で付きます。 あなたがやるのは、吹き出しを登録することと、プレビューを見て「崩れている番号」と「使う番号」を言うことだけ。コードを読む必要も、コピーする必要もありません。 Claude CodeでもChatGPTアプリのCodexでも同じ頼み方です。
この手順を作った人が、実際に運用している数字です。
人・AI・WordPressの分担はこれだけです。
ポイントは、AIが自分で書いたコードのうち、あなたのサイトで崩れずに出たものだけを型集にすることです。AIはSWELLの装飾の書き方を知っていますが、あなたのサイトの吹き出しの番号と、SWELLの版ごとの細かい違いは知りません。だから一度テストして、通った部品だけを固定します。
<!-- wp:… --> というブロックのコードでできています。管理画面の右上「⋮」→「コードエディター」で見られますが、この手順ではAIが裏口から読むので、あなたは開かなくて構いません。前提は、WordPressにAIが繋がっていること（別の1枚「ChatGPT（Codex）でWordPressに下書き投稿」または「AIエージェントでWordPressに半自動投稿」）。繋がっていないときは、手順3の壁にある「コードを自分で渡す道」で同じことができます。
手順1：SWELLに吹き出しを登録する（プロンプト無し・管理画面だけ・既にあれば飛ばす）
手順2：プロンプト①「装飾テストを作って」を貼る → AIが自分で調べて、装飾を並べたテスト記事を下書きに入れる
手順3：プレビューを見て、崩れていればプロンプト③「◯番が崩れている」。きれいに出た中から「使うのは ①③⑤…」と番号で選ぶ → AIが型集を保存
毎回：原稿と一緒にプロンプト②「装飾して入れて」を貼る → プレビューで見て公開
「ふきだし」の一覧に4つ並んでいれば完了です。番号は覚えなくて大丈夫。次の手順でAIが自分で読みに行きます。
WordPressに繋いだフォルダ（WordPress編なら blog）のチャット欄に、そのまま貼って送ります。書き換える所はありません。
このサイトのWordPressテーマはSWELLです。SWELLの装飾をブロックのコードで書いてください。分からない所は推測で書かず、私に聞いてください。 1. WordPressに繋いである道具で、裏口から「ふきだし」の一覧を読む（GET /wp-json/wp/v2/swell-balloon）。番号（balloonID）と名前を控えて、私に見せる。1つも無ければ「ふきだしが登録されていません」と言って止まる。 2. 「装飾テスト（AI用）」という題名の記事を、下書きで1本作る。下の一覧を上から順に、1つも飛ばさず全部入れる。1つの装飾ごとに、見出し（H3）に番号と名前を付ける（例「1. 太字」）。文章は何でもよい。 書き方が分からない番号は、飛ばさずに見出しだけ作って、その下に「未対応」と1行書く（私が別の方法で入れる）。 1. 太字（strong） 2. 太字＋マーカー（黄）（swl-marker mark_yellow） 3. 太字＋マーカー（オレンジ）（swl-marker mark_orange） 4. 太字＋マーカー（青）（swl-marker mark_blue） 5. 太字＋マーカー（緑）（swl-marker mark_green） 6. 太字＋文字色（色1）（swl-inline-color has-swl-deep-01-color） 7. 太字＋文字色（色2）（swl-inline-color has-swl-deep-02-color） 8. 文字を大きく（swl-fz u-fz-l） 9. 文字を小さく（swl-fz u-fz-s） 10. チェックリスト（is-style-check_list） 11. 良いリスト（○）（is-style-good_list） 12. 悪いリスト（×）（is-style-bad_list） 13. 番号つきリスト（丸数字）（is-style-num_circle） 14. 注意リスト（！）（is-style-note_list） 15. 三角リスト（▶）（is-style-triangle_list） 16. キャプションボックス 色1（標準）（loos/cap-block col1） 17. キャプションボックス 色2（標準）（loos/cap-block col2） 18. キャプションボックス 色3（標準）（loos/cap-block col3） 19. キャプションボックス 内側（is-style-inner） 20. キャプションボックス 枠上（is-style-onborder_ttl） 21. キャプションボックス 枠上2（is-style-onborder_ttl2） 22. キャプションボックス 文中（is-style-intext） 23. キャプションボックス 小さいタイトル（is-style-small_ttl） 24. キャプションボックス 浮き出し（is-style-shadow） 25. 枠 ボーダー1（has-border -border01） 26. 枠 ボーダー2（has-border -border02） 27. 枠 ボーダー3（has-border -border03） 28. 枠 ボーダー4（has-border -border04） 29. 枠 ストライプ背景（is-style-bg_stripe has-border -border03） 30. 枠 方眼背景（has-border -border03 is-style-bg_grid） 31. 枠 グレー背景（is-style-bg_gray） 32. 枠 メインカラー背景（is-style-bg_main） 33. 枠 凹み（is-style-dent_box） 34. 枠 ステッチ（is-style-stitch） 35. 枠 かっこ（is-style-kakko_box） 36. 枠 大かっこ（is-style-big_kakko_box） 37. 枠 付箋（is-style-sticky_box） 38. 枠 ノート（is-style-note_box） 39. アイコン枠 良い（is-style-big_icon_good） 40. アイコン枠 悪い（is-style-big_icon_bad） 41. アイコン枠 ポイント（is-style-big_icon_point） 42. アイコン枠 注意（is-style-big_icon_caution） 43. アイコン枠 チェック（is-style-big_icon_check） 44. アイコン枠 メモ（is-style-big_icon_memo） 45. アイコン枠 はてな（is-style-big_icon_hatena） 46. アイコン枠 バツ（is-style-big_icon_batsu） 47. ふきだし（左）（loos/balloon balloonID 1） 48. ふきだし（右向き）（balloonAlign right） 49. 吹き出し風の見出し（is-style-balloon_box2） 50. ボタン 立体（is-style-btn_solid） 51. ボタン キラッと（is-style-btn_shiny） 52. ボタン ノーマル（is-style-btn_normal） 53. ボタン 線だけ（is-style-btn_line） 54. FAQ（loos/faq） 55. ステップ（loos/step） 56. アコーディオン（loos/accordion） 57. 表（wp:table） 58. 引用（wp:quote） 書き方の決まり: ・コードはSWELLのブロック記法。属性（波かっこの中）を省かない ・枠（キャプションボックス・グループ）の中の文章は必ず wp:paragraph か wp:list で包む ・キャプションボックスは wp:loos/cap-block。色は dataColSet（col1〜col3）、スタイルは className ・枠は wp:group の className にクラス名を入れる ・マーカーは <strong><span class="swl-marker mark_◯◯">…</span></strong> の形 ・ボタンはアイコン無しの形（hrefUrl は https://example.com） ・FAQは titleTag を親と子の両方に書く ・ふきだしは 1 で読んだ番号を使う 3. 入れたら、管理画面で見る場所（URL）を教えて。私がプレビューを見て、崩れている装飾があれば「◯番が崩れている」と伝えます。 4. 私が「使うのは 1・3・5…」のように番号で言ったら、その記事のコードを裏口から読み直し、選んだ番号の部品だけを切り出して「装飾の型集.md」をこのフォルダに保存する。選ばなかった番号は型集に入れない。これからの記事は、この型集の部品だけを使い、中の文章だけ差し替える。 公開（publish）は絶対にしない。
AIがふきだしの一覧（番号と名前）を見せ、「装飾テスト（AI用）」が下書きに入り、管理画面のURLが返ってくれば手順2は完了です。
プロンプト①に入っている58個の内訳です。全部を覚える必要はありません。プレビューで見て、気に入った番号を言うだけです。
| まとまり | 数 | たとえば |
|---|---|---|
| A 文字の装飾（1〜9） | 9 | 太字＋マーカー（黄）／太字＋文字色／文字を小さく |
| B リスト（10〜15） | 6 | チェックリスト／良いリスト（○）／番号つきリスト（丸数字） |
| C キャプションボックス（16〜24） | 9 | 色1（標準）／内側／枠上 |
| D 枠（25〜46） | 22 | ボーダー3／ストライプ背景／アイコン枠 ポイント |
| E 部品（47〜58） | 12 | ふきだし／ボタン 立体／FAQ／ステップ |
58個のうち20個は「未検証」です（SWELLのCSSに名前はあるが、公開記事で使った実績がまだ無いもの）。崩れていないかは、手順3のプレビューで一緒に確かめます。崩れていたら番号を言うだけです。
AIが知らない書き方は「未対応」と書いて飛ばす決まりです。数が多いときは、AIに書かせるのをやめて、できあがったカタログを貼るのが早いです。58個すべてが、この手順を作った人のSWELL（2.8.1）で崩れずに出ることを確かめてあります。
管理画面で「新規投稿」→ 右上の「⋮」→「コードエディター」→ SWELL装飾カタログ（文字ファイル） を開いて全部選んでコピー（Macは ⌘A → ⌘C、Windowsは Ctrl+A → Ctrl+C）→ 本文に貼る → 題名を「装飾テスト（AI用）」にして「下書き保存」→「プレビュー」。
そのあとは手順3と同じです。AIに「装飾テスト（AI用）という下書きを私が作った。裏口から読んで」と一言添えてから、崩れている番号と使う番号を言えば、AIが型集にします。ふきだし（47・48）はカタログでは「1番」を呼んでいるので、手順1で登録した1番目のキャラクターが出ます。
手順1がまだか、「SWELL設定 → ふきだし」の画面を一度も開いていないかのどちらかです。開くまでは裏側の保存場所が作られないので、AIには「無い」と見えます。
管理画面で「SWELL設定 → ふきだし」を開いて登録し、AIに「登録した、もう一度」と言ってください。
プレビューで「◯番（装飾の名前）」が崩れています。（管理画面で「想定されていないか無効なコンテンツ」と出た場合もこれを貼る） 「復旧を試みる」は押しません。その装飾のコードを見直して（属性が抜けていないか・引用符が二重引用符か・枠の中が wp:paragraph で包まれているか・ふきだしの番号が一覧にあるか）、下書きを更新してください。直した箇所を私に分かる言葉で教えて。 2回直しても崩れる装飾は、いったん外して、その旨を教えてください。
フォルダに 装飾の型集.md ができ、AIが「2. 太字＋マーカー（黄）／16. キャプションボックス 色1／47. ふきだし（balloonID 1）／…」のように、選んだ番号だけの一覧を返せば、準備は全部です。テスト記事は下書きのまま残しておきます（あとで番号を足して選び直せます）。
AIがコードを「それらしく」書いたときに起きます。この手順を作った環境で多かったのは、FAQのブロックの属性（波かっこの中）を省いた場合と、枠の中の文章を <!-- wp:paragraph --> で包まなかった場合です。
「復旧を試みる」は押さず、プロンプト③を貼ってください。1〜2回で直ることがほとんどです。
SWELLの更新で記法が変わっている装飾は、AIの知識だけでは合わないことがあります。そのときは、あなたのサイトで実際に動いているコードを渡すのが一番確実です。
管理画面で「装飾テスト（AI用）」を開き、崩れている装飾だけをブロックエディターで作り直して下書き保存。AIに「◯番目は私が管理画面で作り直した。裏口から読み直して、そのコードを型集に使って」と言います。WordPressに繋いでいない人は、右上の「⋮」→「コードエディター」でその部分のコードをコピーして、チャットに貼ってください。
この手順を作った人のサイトでは、「吹き出しは2つ続けない」「1つの見出しに枠は1つ」「マーカーは1段落に1か所」を決めています。型集に入れる装飾は8〜10種類あれば十分です。テスト記事には58種類並びますが、全部使う必要はありません。
手順3で番号を選ぶときに8〜10個に絞ると、自然に守れます。増やしたくなったら、AIに「テスト記事に◯◯を足して、番号を付けて」と言い、番号を選び直して型集を更新します。
商品リンクのプラグイン（ポチップなど）や、目次プラグインの見た目は、SWELLのブロックとは別のコードです。混ぜると、AIが区別できずに崩れやすくなります。
型集にはSWELLの装飾だけ。プラグインの部品は、あとで別のテスト記事として足せます。
原稿（ふつうの文章で構いません）をチャットに貼って、その下にこう付けます。文体を覚えさせたい場合は、好きな記事を2〜3本先に渡して「この文体で」と一言添えます。
上の原稿を、「装飾の型集.md」の部品だけを使って装飾し、下書きで入れて。 装飾のルール: ・見出し（H2）の最初か最後に、吹き出しを1つ（表情は内容に合わせる。2つ続けない） ・要点は「ポイント」の枠、注意は「注意」の枠。1つの見出しに枠は1つまで ・大事な一言はマーカー。1段落に1か所まで ・手順は番号つきリスト、比べるものは表 ・最後にFAQを3問（FAQのコードは型集のまま。属性を消さない） 入れたら管理画面のURLを教えて。公開はしないで。
テスト記事と同じ見た目の装飾が、原稿の内容に合わせて付いていれば成功です。2本目からは、装飾の指示は要りません。「型集で装飾して下書きに」の一言で同じ形に仕上がります。
| 見たいもの | 場所 |
|---|---|
| 型集 | WordPressに繋いだフォルダの中の 装飾の型集.md。AIに「型集の一覧を見せて」と言えばチャットで見られます。開いて編集しても構いませんが、コードは触らないほうが安全です |
| テスト記事 | 管理画面 → 投稿 → 下書き → 「装飾テスト（AI用）」。装飾を足したいときは、AIに「テスト記事に◯◯を足して、型集も更新して」 |
| 吹き出しの番号 | 「SWELL設定 → ふきだし」の一覧。型集の最初にある対応表と同じ並びです |
| 装飾が崩れていないか | 下書きの「プレビュー」。赤い帯（無効なコンテンツ）が出たらプロンプト③ |
| やり方 | 向いている人 | この手順との違い |
|---|---|---|
| この手順（AIが書く → テストで確かめる → 型集に固定） | 装飾つきの記事を続けて出す人 | 人が作るものは無い。崩れた所を一言伝えるだけで、以後は原稿を渡すだけ |
| 毎回「SWELLの装飾で書いて」と頼む（型集なし） | 試しに1本だけの人 | 1本目は同じ。ただし会話が変わると直した所を忘れ、同じ崩れが再発する。吹き出しの番号も毎回教える必要がある |
| 自分で見本の記事を作ってコードを渡す | WordPressにAIを繋いでいない人／どうしても崩れる装飾がある人 | 確実だが、管理画面で装飾を1つずつ作る手間がある。手順3の壁に書いてあります |
| 装飾を自分で後から付ける | 月1本の人 | AIは文章だけ。1本ごとに管理画面で10〜20分の作業が残る |
この手順自体は無料です。必要なのは、SWELL（購入済みのはず）と、AIエージェント（Claude CodeかChatGPTのCodex）が使える契約だけ。追加のプラグインは要りません。
覚える必要はありません。「何が動いているか知りたい」ときだけどうぞ。
| やりたいこと | 裏側 |
|---|---|
| 見本のコードを読む | GET /wp-json/wp/v2/posts/記事ID?context=edit の content.raw（合鍵が要る。見た目のHTMLではなくブロックのコードが返る） |
| 吹き出し | <!-- wp:loos/balloon {"balloonID":"2"} -->。番号は「SWELL設定 → ふきだし」の登録順 |
| キャプション付きの枠 | <!-- wp:loos/cap-block {"dataColSet":"col1","className":"is-style-inner"} -->。中の文章は必ず wp:paragraph か wp:list で包む |
| FAQ | 親 wp:loos/faq と子 wp:loos/faq-item。属性を省くと無効ブロックになりやすい |
| ボタン | wp:loos/button（色・サイズ・is-style-btn_shiny などの形は属性で決まる） |