← マニュアル保管庫
SETUP GUIDE / 2026-09-11 / ブログ

SWELLの装飾を
AIエージェントに覚えさせて入稿

吹き出し・枠・マーカー・ボタン・FAQ。WordPressのテーマ「SWELL」の装飾は、AIに「SWELLの装飾で書ける?」と聞いて、テスト記事を1本書かせ、崩れていない部品だけを「型集」に固定してもらうと、次の記事から自動で付きます。 あなたがやるのは、吹き出しを登録することと、プレビューを見て「崩れている」か「全部OK」かを言うことだけ。コードを読む必要も、コピーする必要もありません。 Claude CodeでもChatGPTアプリのCodexでも同じ頼み方です。

YOU DO
3つだけ
MINUTES
初回 約20分
COST
無料
AFTER
原稿を渡すだけ

WHYこうなります

この手順を作った人が、実際に運用している数字です。

9種類部品はこれだけで足りる吹き出し・キャプション付きの枠・マーカー・ボタン・FAQ・表・リスト・余白・引用。この9種類の型集で、記事の装飾を全部まかなっています。
692本同じ型集で入稿した記事2026年9月4日時点の公開記事数。ジャンルの違う9サイトが、1つの型集を読んで装飾しています。
1回型集を作るのは1回だけあとは記事ごとに、中の文章を差し替えるだけです。装飾の指示は「吹き出しを1つ、要点は枠」のような日本語で足ります。

WHAT何をしているの

人・AI・WordPressの分担はこれだけです。

YOU
「SWELLの装飾で」と頼む
吹き出しを登録して、プロンプト①を貼る
AI
調べて書いて、型集に固定
吹き出しの番号を裏口で読み、装飾テストの記事を下書きに入れる。OKが出た部品だけ「装飾の型集」に保存
YOU
プレビューで見て、OKを言う
崩れていれば「◯番目」と伝えるだけ。以後は原稿を渡して公開ボタン

ポイントは、AIが自分で書いたコードのうち、あなたのサイトで崩れずに出たものだけを型集にすることです。AIはSWELLの装飾の書き方を知っていますが、あなたのサイトの吹き出しの番号と、SWELLの版ごとの細かい違いは知りません。だから一度テストして、通った部品だけを固定します。

用語は3つだけ

ブロックのコード
WordPressの記事は、見た目の裏で <!-- wp:… --> というブロックのコードでできています。管理画面の右上「⋮」→「コードエディター」で見られますが、この手順ではAIが裏口から読むので、あなたは開かなくて構いません。
ふきだし
SWELLの吹き出しは、先に「SWELL設定 → ふきだし」でキャラクターと表情を登録し、記事の中では番号(balloonID)で呼びます。番号はサイトごとに違います。
型集
テストで崩れなかった装飾のコードを、名前と使いどころ付きで並べた1つのファイル。AIはここからコピーして使います。ここに無い装飾は使わせません。会話が変わっても消えません。

YOUあなたがやるのは3つだけ

前提は、WordPressにAIが繋がっていること(別の1枚「ChatGPT(Codex)でWordPressに下書き投稿」または「AIエージェントでWordPressに半自動投稿」)。繋がっていないときは、手順3の壁にある「コードを自分で渡す道」で同じことができます。

ORDER送る順番

手順1:SWELLに吹き出しを登録する(プロンプト無し・管理画面だけ・既にあれば飛ばす)

手順2プロンプト①「装飾テストを作って」を貼る → AIが自分で調べて、装飾を並べたテスト記事を下書きに入れる

手順3:プレビューを見て、崩れていればプロンプト③「◯番目が崩れている」。全部きれいなら「全部OK」→ AIが型集を保存

毎回:原稿と一緒にプロンプト②「装飾して入れて」を貼る → プレビューで見て公開

1
SWELLに吹き出しのキャラクターを登録する(4表情)
5分 / 管理画面 / 既にあれば飛ばす
なぜ:吹き出しは記事の中に絵が入っているのではなく、サイトに登録した番号を呼んでいるだけです。登録が無いと、AIがどれだけ正しいコードを書いても吹き出しは出ません。表情を4つ登録しておくと、AIが内容に合わせて選べます。ここだけはAIが代われません(画像を選んで登録するのは管理画面の操作のため)。
  1. 管理画面 → 左メニュー「SWELL設定」→「ふきだし」を開く(この画面を一度開くこと自体が大事。開くまでは裏側の保存場所が作られず、AIも一覧を読めません)
  2. 「新規追加」→ 名前を「ふつう」「驚き」「自信」「困り」のように表情で付け、アイコン画像を選んで保存。4つ作る
  3. アイコン画像が無ければ、ChatGPTに「同じ顔で4つの表情のアイコンを作って。正方形」と頼む。512×512のPNGで保存してメディアにアップロード(150px未満は表示が崩れます)
こうなればOK

「ふきだし」の一覧に4つ並んでいれば完了です。番号は覚えなくて大丈夫。次の手順でAIが自分で読みに行きます。

2
プロンプト①を貼って、AIに「装飾テスト」の記事を作らせる
5分 / AIとの会話 / プロンプト①
なぜ:SWELLの装飾のコードは、AIが自分で知っています(この手順を作った人も、最初は「SWELLの装飾ってわかる?」と聞く所から始めました)。ただしあなたのサイトの吹き出しの番号だけは知らないので、裏口から読ませます。AIに装飾を1つずつ並べたテスト記事を作らせて、本当に崩れずに出るかを先に確かめます。

WordPressに繋いだフォルダ(WordPress編なら blog)のチャット欄に、そのまま貼って送ります。書き換える所はありません。

プロンプト①「装飾テストを作って」(書き換え不要)
このサイトのWordPressテーマはSWELLです。SWELLの装飾(吹き出し・キャプション付きの枠・マーカー・ボタン・FAQ・表・リスト)を、ブロックのコードで書けますか。書けるなら、次の順で進めてください。分からない所は推測で書かず、私に聞いてください。

1. WordPressに繋いである道具で、裏口から「ふきだし」の一覧を読む(GET /wp-json/wp/v2/swell-balloon)。番号(balloonID)と名前を控えて、私に見せる。1つも無ければ「ふきだしが登録されていません」と言って止まる。
2. 「装飾テスト(AI用)」という題名の記事を、下書きで1本作る。中身は、装飾を1つずつ、見出し(H2)に装飾の名前を付けて並べる。
 ・吹き出し(登録されている番号ごとに1つ。左向き・右向きも1つずつ)
 ・ポイントの枠(キャプション付きの枠。中は箇条書き)
 ・注意の枠(色違いのキャプション付きの枠)
 ・マーカー(文の一部に)
 ・番号つきリスト/チェックリスト
 ・表(2列×3行)
 ・ボタン(リンク先は https://example.com)
 ・FAQ(Q&Aを2つ)
 文章は何でもよい。コードはSWELLの正しいブロック記法で、属性(波かっこの中)を省かない。枠の中の文章は必ず wp:paragraph か wp:list で包む。
3. 入れたら、管理画面で見る場所(URL)を教えて。私がプレビューを見て、崩れている装飾があれば「◯番目が崩れている」と伝えます。
4. 私が「全部OK」と言ったら、その記事のコードを裏口から読み直し、装飾ごとに切り出して「装飾の型集.md」をこのフォルダに保存する。これからの記事は、この型集の部品だけを使い、中の文章だけ差し替える。
公開(publish)は絶対にしない。
こうなればOK

AIがふきだしの一覧(番号と名前)を見せ、「装飾テスト(AI用)」が下書きに入り、管理画面のURLが返ってくれば手順2は完了です。

注意AIが「ふきだしが登録されていません」と言う

手順1がまだか、「SWELL設定 → ふきだし」の画面を一度も開いていないかのどちらかです。開くまでは裏側の保存場所が作られないので、AIには「無い」と見えます。

管理画面で「SWELL設定 → ふきだし」を開いて登録し、AIに「登録した、もう一度」と言ってください。

3
プレビューを見て、崩れていれば伝える。きれいなら「全部OK」
5〜10分 / 管理画面+AIとの会話 / プロンプト③
なぜ:ここが「覚えさせる」の本番です。AIが自分で書いたコードのうち、あなたのサイトで実際に崩れずに出たものだけを型集として固定します。この手順を作った人も、最初は崩れた装飾に「それは使わないで」と言って型を固めました。それを、プレビューを見て一言伝えるだけの形にしてあります。
  1. AIが返したURLを開き、「プレビュー」で見る。見出しごとに装飾が出ているかを上から順に見る
  2. 崩れている装飾があれば、下のプロンプト③の「◯番目(装飾の名前)」を書き換えて送る。AIが直して下書きを更新するので、もう一度プレビュー
  3. 全部きれいに出たら、チャットに「全部OK」と送る → AIが「装飾の型集.md」を保存して、一覧を見せる
プロンプト③「◯番目が崩れている」(◯を書き換え)
プレビューで「◯番目(装飾の名前)」が崩れています。(管理画面で「想定されていないか無効なコンテンツ」と出た場合もこれを貼る)
「復旧を試みる」は押しません。その装飾のコードを見直して(属性が抜けていないか・引用符が二重引用符か・枠の中が wp:paragraph で包まれているか・ふきだしの番号が一覧にあるか)、下書きを更新してください。直した箇所を私に分かる言葉で教えて。
2回直しても崩れる装飾は、いったん外して、その旨を教えてください。
こうなればOK

フォルダに 装飾の型集.md ができ、AIが「吹き出し・驚き(balloonID 2)/ポイントの枠/…」のような一覧を返せば、準備は全部です。テスト記事は下書きのまま残しておきます(あとで装飾を足すとき、ここに足します)。

実際に起きた管理画面で「想定されていないか無効なコンテンツ」と赤く出る

AIがコードを「それらしく」書いたときに起きます。この手順を作った環境で多かったのは、FAQのブロックの属性(波かっこの中)を省いた場合と、枠の中の文章を <!-- wp:paragraph --> で包まなかった場合です。

「復旧を試みる」は押さず、プロンプト③を貼ってください。1〜2回で直ることがほとんどです。

注意2回直しても崩れる装飾がある(コードを自分で渡す道)

SWELLの更新で記法が変わっている装飾は、AIの知識だけでは合わないことがあります。そのときは、あなたのサイトで実際に動いているコードを渡すのが一番確実です。

管理画面で「装飾テスト(AI用)」を開き、崩れている装飾だけをブロックエディターで作り直して下書き保存。AIに「◯番目は私が管理画面で作り直した。裏口から読み直して、そのコードを型集に使って」と言います。WordPressに繋いでいない人は、右上の「⋮」→「コードエディター」でその部分のコードをコピーして、チャットに貼ってください。

注意装飾を盛りすぎると、記事が読みにくくなる

この手順を作った人のサイトでは、「吹き出しは2つ続けない」「1つの見出しに枠は1つ」「マーカーは1段落に1か所」を決めています。テスト記事に並べる装飾は8〜10種類あれば十分です。

プロンプト②に、その決まりを入れてあります。増やしたくなったら、AIに「テスト記事に◯◯を足して、型集も更新して」と言えば足せます。

注意プラグインの装飾はSWELLの型集に入れない

商品リンクのプラグイン(ポチップなど)や、目次プラグインの見た目は、SWELLのブロックとは別のコードです。混ぜると、AIが区別できずに崩れやすくなります。

型集にはSWELLの装飾だけ。プラグインの部品は、あとで別のテスト記事として足せます。

毎回の頼み方(設定が終わったら、これだけ)

原稿(ふつうの文章で構いません)をチャットに貼って、その下にこう付けます。文体を覚えさせたい場合は、好きな記事を2〜3本先に渡して「この文体で」と一言添えます。

プロンプト②「装飾して入れて」(書き換え不要)
上の原稿を、「装飾の型集.md」の部品だけを使って装飾し、下書きで入れて。
装飾のルール:
・見出し(H2)の最初か最後に、吹き出しを1つ(表情は内容に合わせる。2つ続けない)
・要点は「ポイント」の枠、注意は「注意」の枠。1つの見出しに枠は1つまで
・大事な一言はマーカー。1段落に1か所まで
・手順は番号つきリスト、比べるものは表
・最後にFAQを3問(FAQのコードは型集のまま。属性を消さない)
入れたら管理画面のURLを教えて。公開はしないで。
  1. AIが返したURLを開く(または「投稿 → すべての投稿 → 下書き」)
  2. プレビュー」で見る。吹き出しの表情や枠の場所を変えたければ、AIに「2つ目の見出しの吹き出しは『困り』にして」のように言う
  3. 納得したら「公開」を自分で押す
こうなればOK

テスト記事と同じ見た目の装飾が、原稿の内容に合わせて付いていれば成功です。2本目からは、装飾の指示は要りません。「型集で装飾して下書きに」の一言で同じ形に仕上がります。

SEEできたものはどこで見られるの

見たいもの場所
型集WordPressに繋いだフォルダの中の 装飾の型集.md。AIに「型集の一覧を見せて」と言えばチャットで見られます。開いて編集しても構いませんが、コードは触らないほうが安全です
テスト記事管理画面 → 投稿 → 下書き → 「装飾テスト(AI用)」。装飾を足したいときは、AIに「テスト記事に◯◯を足して、型集も更新して」
吹き出しの番号「SWELL設定 → ふきだし」の一覧。型集の最初にある対応表と同じ並びです
装飾が崩れていないか下書きの「プレビュー」。赤い帯(無効なコンテンツ)が出たらプロンプト③

CAREこれだけは気をつけてください

取り返しがつかないことと、崩れる原因

  • テスト記事は公開しない。タイトルに「(AI用)」と入れて、ずっと下書きのままにします。
  • 「復旧を試みる」を押さない。WordPressが勝手に直すと、装飾が消えることがあります。プロンプト③で型集と比べて直します。
  • 型集に無い装飾を頼まない。頼むとAIがその場でコードを作って崩れやすくなります。使いたくなったら、先にテスト記事へ足してプレビューで確かめます。
  • 公開中の記事を装飾し直すときは、いったん下書きにコピーしてから。読者に見えている記事を直接書き換えません。

VSほかのやり方と、正直な比較

やり方向いている人この手順との違い
この手順(AIが書く → テストで確かめる → 型集に固定)装飾つきの記事を続けて出す人人が作るものは無い。崩れた所を一言伝えるだけで、以後は原稿を渡すだけ
毎回「SWELLの装飾で書いて」と頼む(型集なし)試しに1本だけの人1本目は同じ。ただし会話が変わると直した所を忘れ、同じ崩れが再発する。吹き出しの番号も毎回教える必要がある
自分で見本の記事を作ってコードを渡すWordPressにAIを繋いでいない人/どうしても崩れる装飾がある人確実だが、管理画面で装飾を1つずつ作る手間がある。手順3の壁に書いてあります
装飾を自分で後から付ける月1本の人AIは文章だけ。1本ごとに管理画面で10〜20分の作業が残る
MONEY費用

この手順自体は無料です。必要なのは、SWELL(購入済みのはず)と、AIエージェント(Claude CodeかChatGPTのCodex)が使える契約だけ。追加のプラグインは要りません。

Q&Aよくある疑問

Cocoonなど別のテーマでも?
「AIに書かせて、テストで確かめて、型集に固定」の考え方は同じです。プロンプト①の「SWELL」を自分のテーマ名に変えてください。SWELLの型集は使い回せません。
文体も覚えさせたい
読みやすいと思う記事を2〜3本、URLか本文で渡して「この文体で。1文を短く、1段落は1〜2文」と頼みます。型集(見た目)と文体(書き方)は別々に覚えさせるほうが、あとで直しやすいです。
吹き出しの絵はどう作る?
ChatGPTに「同じ顔で、ふつう・驚き・自信・困りの4表情。正方形のアイコン」と頼んで、512×512のPNGで保存します。この手順を作った環境では、150px未満の画像はSWELLの吹き出しで崩れました。
型集に装飾を足したい
AIに「テスト記事に◯◯(例: 引用の枠)を足して、プレビューを教えて」→ 見てOKなら「型集も更新して」。テスト記事に足す形なので、いつでも増やせます。
すでに公開している記事を装飾し直せる?
できます。ただし直接ではなく、「この記事を下書きにコピーして、型集で装飾し直して」と頼み、プレビューで見てから公開中の記事に反映します。
Claude CodeとChatGPTのCodex、どっちでも?
頼み方は同じです。この手順を作った環境ではClaude Codeで9サイト分を動かしています。ChatGPTアプリのCodexで型集を作る所は未検証なので、最初の1回は渡した人と一緒に。

CHEAT裏で動いているもの

覚える必要はありません。「何が動いているか知りたい」ときだけどうぞ。

やりたいこと裏側
見本のコードを読むGET /wp-json/wp/v2/posts/記事ID?context=editcontent.raw(合鍵が要る。見た目のHTMLではなくブロックのコードが返る)
吹き出し<!-- wp:loos/balloon {"balloonID":"2"} -->。番号は「SWELL設定 → ふきだし」の登録順
キャプション付きの枠<!-- wp:loos/cap-block {"dataColSet":"col1","className":"is-style-inner"} -->。中の文章は必ず wp:paragraphwp:list で包む
FAQwp:loos/faq と子 wp:loos/faq-item。属性を省くと無効ブロックになりやすい
ボタンwp:loos/button(色・サイズ・is-style-btn_shiny などの形は属性で決まる)