AIの原稿は「Markdown」で受け取っている

このブログの下書きは、毎朝Claude Code（クロード・コード）が作っています。でき上がった原稿は、まず私のパソコンの中に1本のテキストファイルとして保存され、そのあと小さなプログラムがWordPressに「下書き」として送ります。公開するのは、私が読んで直してからです。

このとき、AIに書いてもらう原稿の形は HTMLではなく「Markdown（マークダウン）」 にしています。そして、WordPressに送る直前に、プログラムでWordPressの「ブロック」の形に変換しています。

今回は、この「Markdownで書いて、ブロックに変換する」部分の話です。地味なところですが、ここを決めておいたおかげで、毎朝の下書きを安心して直せるようになりました。

そもそもMarkdownとは？（初心者向けにひとこと）

Markdownは、記号を少し付けるだけで「見出し」や「箇条書き」を表せる、文章の書き方 です。たとえば次のように書きます。

• 行の頭に ### を付けると見出し
• 行の頭に - を付けると箇条書き
• 言葉を ** で挟むと太字
• [文字](URL) でリンク

HTMLのように <h2> や </p> といったタグで囲む必要がないので、テキストファイルのまま読んでも、普通の文章としてほとんど違和感がありません。

なぜHTMLではなくMarkdownなのか

理由は3つあります。

1つ目は、AIが自然に書ける形だから です。AIは普段からMarkdownで答えを返すことが多く、無理にHTMLで書かせるより、書き方のブレが少ないと感じています。

2つ目は、原稿ファイルが「人が読める記録」として残るから です。タグだらけのHTMLだと、あとから読み返すのがつらくなります。Markdownなら、パソコンのファイルを開けばそのまま読めます。

3つ目は、1つのファイルから、必要な部分だけを取り出せるから です。原稿ファイルには本文のほかに、タイトル案・メタディスクリプション・カテゴリー・タグ・内部リンクの候補まで入っています。プログラムは「## タイトル案」「## 本文」といった大きな見出しを目印に、ファイルを切り分けて読み取ります。

昔は、HTMLを手で書いてホームページを作っていました。そのころの自分に「タグを書かずに見出しが作れる」と言っても、ピンとこなかったかもしれません。

WordPressの「ブロック」と、HTMLの中の目印

WordPressは、2018年のバージョン5.0から「ブロックエディター（Gutenberg）」が標準になりました。私もその当時、ブログで取り上げています。段落・見出し・画像などを、1つずつの「ブロック」として並べて記事を作る仕組みです。

実はこのブロック、WordPressの中では 普通のHTMLに、目印のコメントを付けたもの として保存されています。たとえば段落なら、次のような形です。

<!-- wp:paragraph -->
<p>ここに文章が入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph --> から <!-- /wp:paragraph --> までが、1つの段落ブロックです。この目印がないHTMLを送ると、編集画面では「クラシック」という大きな1つのかたまりとして表示され、ブロックごとに直すことができません。

私は下書きを読んで、言い回しを直したり、段落を入れ替えたりします。そのため、送る時点できちんとブロックに分かれていること が大事でした。

変換で決めた5つのこと

プログラムを作る中で、AIと相談しながら決めたことがいくつかあります。

① 見出しは1段上げる

原稿では、本文の見出しを ###（3段目）と ####（4段目）で書いています。原稿ファイルの中では # と ## を、ファイル全体の題名や「## 本文」などの区切りに使っているからです。

ところが、そのままWordPressに入れると、本文の大見出しがh3から始まってしまいます。記事のタイトルがh1なので、本文はh2から始めたいところです。そこで、###はh2、####はh3に、1段上げて変換 しています。見出しの順番は、読みやすさにもSEOにも関わるので、ここは最初に決めました。

② 区切り線は本文に入れない

原稿ファイルの中では、見やすくするために --- という区切り線を入れています。以前、これが本文にそのまま横線として入ってしまったことがありました。今は、区切り線は本文に入れない ように変換しています。

③ 文字としての「<」「>」は記号に変換する

Web制作の記事では、本文の中に <p> のようなタグを「説明として」書くことがあります。これをそのままHTMLに入れると、ブラウザは本物のタグだと思って、表示が崩れたり文字が消えたりします。

そこで、本文の文字は < を <、> を > のような記号に置き換えてから ブロックにしています。2017年に「エディターでspanなどのタグが消える」記事を書きましたが、タグと文字の区別は、今も昔もWordPressでつまずきやすいところだと思います。

④ 画像は縮小してアップロードし、二重に上げない

本文に写真を入れるときは、原稿に ![説明](写真のファイル "キャプション") と1行で書きます。プログラムが写真を 長い辺1200pxのJPEGに縮小 してWordPressのメディアにアップロードし、画像ブロックに置き換えます。代替テキスト（alt）も一緒に入れます。

同じ原稿を2回送ったときに、同じ写真が2枚アップロードされないように、アップ済みの写真の記録を別のファイルに残して、2回目からはそれを使う ようにしました。また、自分のサイト以外の画像のURLが書かれていた場合は、入れずに飛ばします。よそのサイトの画像を、知らないうちに記事に貼らないためです。

⑤ 表は変換しない

意外に思われるかもしれませんが、表（テーブル）は変換していません。原稿の最後にある「内部リンク候補」の表は、私が読むためのメモで、本文には入らないからです。

本文に表が必要なときは、下書きを開いてからWordPressの「テーブル」ブロックで作るほうが、結局きれいに仕上がると考えています。何でも自動にせず、人が手で作ったほうが早いところは残しておく。これも1つの決めごとです。

送る前に「変換結果だけ」を見る

もう1つ大事にしているのが、本番の前に、送らずに変換結果だけを見る確認（dry-run） です。毎朝の作業でも、まずこれを実行して、タイトル・スラッグ・カテゴリー・タグ・抜粋が正しく取り出せているか、変換したブロックの頭の部分がどうなっているかを確かめてから、下書きとして送っています。

さらに、プログラムは 必ず「下書き」で送る ようにしてあり、万一ほかの状態になっていたら、すぐ下書きに戻します。変換がどれだけうまくいっても、読まないまま公開されてしまっては意味がないからです。

AIとWeb制作の「つなぎ目」で感じたこと

AIに文章を書いてもらうこと自体は、もう難しくありません。でも、それをWordPressにきれいに入れて、人があとから直せる形にするには、AIの得意な形（Markdown）と、WordPressの形（ブロック）の間をつなぐ部分 が必要でした。

このつなぎ目は、長くWeb制作をやってきた経験が一番役に立ったところです。見出しの順番、タグと文字の区別、画像の重さ、よそのサイトの画像を使わないこと。どれも、昔からホームページを作るときに気をつけてきたことばかりです。AIがプログラムを書いてくれても、「何に気をつけるか」を伝えるのは人の役目だと感じています。

まとめ

AIに書かせた原稿をWordPressに下書きとして入れるとき、私は次のようにしています。

1. AIにはHTMLではなく、Markdownで原稿を書いてもらう
2. 送る直前に、WordPressの「ブロック」の目印付きHTMLに変換する
3. 見出しは1段上げ、区切り線は入れず、「<」「>」は記号に置き換える
4. 画像は縮小してアップロードし、二重に上げない。よその画像は使わない
5. 表など、人が作ったほうが早いところは無理に自動化しない
6. 送る前に変換結果だけを確認し、必ず下書きで送る

ブロックエディターを「使いにくい」と感じている方も多いと思います。でも、中身が「目印付きのHTML」だと分かると、AIや自動化と組み合わせやすい仕組みだということも見えてきます。AIとWordPressを組み合わせてみたい方の参考になればうれしいです。