ブログの記事を見やすく装飾しようと思ったら、HTMLやCSSを調べたり、公式サイトから必要な画像を探して切り抜いたりと、何かと手間がかかる。そんな作業が面倒で、記事を書く前から手が止まってしまった経験がある人も多いのではないだろうか。
最近はAIを使えば簡単だと聞くものの、実際にAIに何をどう伝えればいいのか分からない、という人もいるだろう。
結論から言うと、記事の装飾はAIにほぼ任せられる。HTMLの知識も、デザインのアイデアもなくて構わない。この記事では、Claudeなどの生成AIを使ってWordPressの記事装飾を自動化する方法を、基本の流れ、AIへの伝え方、うまくいかないときの直し方に分けて紹介する。
ブログ記事の装飾が面倒に感じる理由
記事を見やすくするには、重要な文章を枠で囲んだり、色をつけたり、比較表を作ったりする必要がある。手作業でやろうとすると、そのたびに「枠で囲むHTMLの書き方」を検索し、色や角丸、余白を調整するコードを調べて書き換えることになる。
画像を入れる場合はさらに手間が増える。公式サイトで情報を探し、画面をキャプチャして余計な部分を切り抜き、WordPressにアップロードしてから見出しに合う場所へ挿入する。
一つひとつはそれほど難しい作業ではなくても、記事全体で積み重なるとかなりの時間になる。書く内容は決まっているのに、装飾の手間を考えると腰が重くなる。記事を書くハードルが高く感じる原因の多くは、実はこの部分にある。
昔はこうだった、AIを使う前と今の作業の違い
AIを使うと、こうした作業の流れが大きく変わる。例えば画像の入れ方を比べると、昔は自分の手で何段階もこなしていた作業が、今は日本語で頼んで内容を確認するだけになった。
文章の装飾や表づくりでも同じだ。昔はHTMLの書き方を調べるところから始めていた作業が、今は日本語で頼むだけで済む。
| 作業 | 昔 | 今 |
|---|---|---|
| 文章を枠で囲む | HTMLの書き方を検索 | 日本語で頼むだけ |
| 色・角丸・余白の調整 | コードを調べて修正 | 「ここだけシンプルに」と伝える |
| 比較表を作る | 知識と作業が必要 | AIが内容に合わせて作成 |
| 公式サイトの画像 | 探す・キャプチャ・切り抜き | AIが探して配置 |
やってほしいことを伝えるだけでいいのだ。
AIでWordPressの記事装飾を自動化する基本の流れ
AIで記事を装飾するといっても、特別な設定や道具は必要ない。普段AIとチャットするのと同じように、文章を渡して頼むだけだ。基本の流れは次のとおり。
完成した原稿でなくてもいい。箇条書きのメモや、AIと話しながらまとめた下書きでも十分だ。
「この記事をいい感じに見やすく装飾して」と伝えるだけで、強調する部分や枠、表の形をAIが考えてくれる。
全体を作り直すのではなく、「ここだけシンプルにして」のように部分的に修正を頼む。
ブロックエディターに反映し、パソコンとスマホの両方で崩れていないかを確認する。
WordPressに入れるときは、最初に「WordPressのブロックエディターで編集できる形にして。本文と見出しは通常のブロックで、装飾の部分だけカスタムHTMLブロックにして」と伝えておくといい。記事全体を一つの大きなHTMLにしてしまうと、あとで文章を少し直したいときに編集しにくくなるからだ。
ブロックエディター：WordPressの標準の編集画面。段落や見出し、画像などを「ブロック」単位で組み立てていく。
カスタムHTMLブロック：ブロックエディターの中で、HTMLを直接書き込める専用のブロック。枠や表などの装飾部分に使う。
AIにどう伝えればいい？装飾を頼むときのコツ
AIで記事を装飾するというと、細かい指示文を考えなければならないと思うかもしれない。しかし、最初から完璧に伝える必要はない。むしろ大まかに頼んで、出来上がったものを見ながら調整するほうがうまくいきやすい。
最初は「いい感じに見やすく装飾して」だけでいい
「見出しの下に青い枠を入れて」「重要な部分を太字にして」と細かく指示することもできる。でも、どんなデザインにしたいのか決まっていないなら、まずは次のように頼むだけで十分だ。
この記事をいい感じに見やすく装飾して
これだけで、AIが記事の内容を読み取り、どこを強調するか、どこを枠で囲むか、どこを表にするかを判断してくれる。HTMLの知識がなくてもいいだけでなく、デザインのアイデアが思いつかなくても構わない。
「こういうデザインにしたいけれど、
どうやって作るんだろう？」
と調べるところから始まる
どんなデザインがいいのか
わからなくても、
とりあえず作ってもらえる
作ってもらったものを見ながらデザインを決められる
表やグラフは「こういう感じにできる？」と見本を示す
表やグラフを作ってほしいときも、専門的なデザイン用語はいらない。以前に作ってもらったものや、画面に見えているものを見本にして伝えればいい。
こういう表とか、さっきみたいなグラフのようにいい感じにデザインできる？
ここの表を、このグラフみたいにいい感じに画像にできない？
こう伝えるだけで、AIはそれまでに作ったグラフや記事の雰囲気に合わせてデザインしてくれる。実際に、キャッシュレス決済の記事ではポイント還元の比較を次のようなグラフにしてもらった。
「棒グラフにして」「横並びの表にして」と最初から指定してもいいが、迷ったら見本を見せて「こんな感じで」と頼むほうが早い。
画像や資料探しもまとめて頼める
装飾だけでなく、記事に入れる資料探しもAIに頼める。例えば、記事を書き直したあとに次のように伝えると、関連するリンクや公式サイトの図解を探し、見出しの内容に合う場所に配置してくれる。
これ、また記事を直したから新たに追加して。
あと関連するリンクと、公式サイトから該当する内容のグラフとか図とか画像とかを引用して、それぞれの見出しや内容に合ったところに貼り付けて
単純に画像を検索するだけでなく、記事の内容と資料を結びつけてくれるのが便利なところだ。文章だけではわかりにくい部分に公式の資料が入ることで、読者にとっても理解しやすい記事になる。
もちろん、AIが探してきた画像や情報が正しいかどうか、現在も有効な内容なのかは確認する必要がある。また、公式サイトの画像を転載できるとは限らないため、引用の要件や利用条件にも注意したい。
サイト全体で統一したいルールは最初に伝えておく
ブログを続けていくなら、記事ごとにデザインがばらばらにならないよう、決まりごとを最初に伝えておくといい。例えば、次のようなルールだ。
こうしたルールをメモしておき、新しい記事を頼むたびに一緒に渡せば、毎回同じ雰囲気の記事に仕上がる。AIのプロジェクト機能やカスタム指示に登録しておけば、毎回書く手間も省ける。
仕上がりが気に入らないときはどうすればいい？
AIに作ってもらったデザインが、最初から思いどおりになるとは限らない。全体は見やすいけれど、ある部分だけ派手すぎる、表がスマホで読みにくい、ということもある。そんなときは、気になった部分をそのまま言葉で伝えればいい。
| 気になったこと | 伝え方 |
|---|---|
| 装飾が派手すぎる | 「ここだけシンプルにして」 |
| 比較表が読みにくい | 「この表は横並びにして」 「スマホでも見やすくして」 |
| 記事を書き直した | 「記事を直したから新たに追加して」 |
| 前のほうがよかった | 「前のデザインに戻して」 |
同じ会話の中で作業を続けていれば、AIはそれまでのやり取りを踏まえて修正してくれる。「さっきのほうがよかった」と伝えれば、前のデザインに戻すこともできる。HTMLのどこを書き換えればいいのかを自分で探す必要はない。
ただし、AIが意図を取り違えて、頼んでいない部分まで変えてしまうこともある。修正を頼むときは「この表だけ」「この見出しの中だけ」のように範囲をはっきり伝えると、余計な変更が起きにくい。
自分は出来上がったものを見て判断する。
AIに任せていいこと、自分で決めること
ここまで読むと、記事づくりをすべてAIに任せればいいように思えるかもしれない。しかし、装飾や資料探しを任せられても、記事の中身まで丸投げするのはおすすめしない。
文章の作成
HTML装飾
資料探し
記事のテーマ（自分の疑問）
何を追加・修正するか
内容の確認
特に、AIが探してきた情報が正しいか、今も有効な内容なのかは、必ず自分で確認したい。公式サイトの画像や文章を使う場合は、引用のルールや利用条件にも注意が必要だ。
記事の内容を考えたり、情報を確認したりすることに使えるようになった。
まとめ：まずは1記事、AIに「見やすく装飾して」と頼んでみる
ブログ記事の装飾が面倒に感じるのは、HTMLを調べたり画像を加工したりする作業が積み重なるからだ。AIを使えば、その多くを日本語で頼むだけで任せられる。
まずは手元にある記事を一つAIに渡して、「この記事をいい感じに見やすく装飾して」と頼んでみてほしい。出来上がったものを見て、気になる部分だけ言葉で直してもらう。WordPressに入れるときは、ブロックエディターで編集できる形にするよう伝えておく。この流れに慣れれば、装飾のために手が止まることはなくなるはずだ。
コメント