このブログは、自社のCMS「writeWired」のサイトを、AIと一緒に作り直してきた記録です。この記事の作業は、2026年9月5日と7日に、主にClaudeと進めました。

やりたかったこと：導入事例も、AIとやり取りできる形にしたかった

導入事例だけが、手書きのHTMLだった

writeWiredのサイトでは、製品の機能を説明するページも、FAQも、ブログも、本文をMarkdownで持っています。Markdownは、見出しや箇条書き、表などを記号で書く、文章の構造だけを持つ書き方です。本文をこの形で持っておき、ページの見た目はテンプレートが組み立てます。更新するときは、CMSから書き出したCSVファイルをAIに渡し、AIが直したCSVを取り込む。サイトの作り直しは、ほとんどこの形で進めてきました。

その中で、導入事例だけが、昔ながらの手書きのHTMLでした。写真に文章を回り込ませ、表を入れ、インタビュー記事は雑誌の誌面のように組んでいます。手書きのHTMLのままでは、AIとCSVでやり取りする流れに乗せられません。

対象は20本です。事例には型が二つあります。一つは、どんな会社が、どんなサイトを、どの機能で作ったかを、表と画面の写真で淡々と紹介する型で、ほとんどがこちらです。この記事ではスペック型と呼びます。もう一つは、担当者に話を聞いて記事にしたインタビュー型で、2本あります。

心配だったのは、見た目が崩れること

私は、事例は一点物なのでMarkdownには収まらないのではないか、と思っていました。Markdownは構造しか持てません。写真の回り込みや誌面のような組み方は、そのままでは表せません。移した結果、事例が安っぽく見えるなら、移す意味がありません。

こうやってみた：先に、型の違う2本で確かめた

スペック型は、書き方を変えるだけで乗った

9月5日、いきなり20本を移す前に、型の違う2本で確かめました。スペック型の1本と、インタビュー型の1本です。Claudeに公開中のページを読ませ、本文をMarkdownに変換させました。

スペック型は、ほぼそのまま乗りました。合わなかったのは2か所です。箇条書きの中に見出しを入れていたところと、表の一つのマスの中で改行していたところ。どちらも、太字の1行にする、項目を中黒でつなぐ、と書き方を変えれば済みました。

インタビュー型は、スマホで見るとただのMarkdownだった

インタビュー型はどうか。凝った組み方をしているつもりでしたが、スマートフォンでの表示を見てみると、写真と文章が上から順に並んでいるだけでした。レイアウトの飾りを外すと、素の姿はただのMarkdownだったのです。Markdownに移すとなくなるのは、パソコンで見たときの写真の回り込みと、見出しの途中の改行くらいでした。

写真の回り込みは諦めていいか。Claudeは最初、アクセスの多いスマートフォンでは回り込みはもともと出ていないので、諦めても誰も困らない、と答えました。ただ、うちのサイトは業務で見る人が多く、スマートフォンよりパソコンで見られることのほうが多い。私がそう返すと、この理由は成り立たなくなりました。

そこで、失うものを事例の型ごとに数え直しました。

  • スペック型：もともと上から下へ一列に流す組み方で、回り込みはほとんど使っていない。Markdownに移しても、パソコンでの見た目はほぼ変わらない
  • インタビュー型の2本：回り込みで誌面のように見せていたのは、この2本だけ

回り込みが担っていた仕事の一つは、写真を小さく収めることでした。これは、本文に何も書かず、表示側のスタイルで画像の最大幅を決めれば受けられます。残るのは、インタビュー2本の誌面らしさです。これは本文で持つのではなく、表示する側で受ける方法を考えることにしました（次の節）。

そのうえで、写真の回り込みは諦めると決めました。画像の大きさは表示側で受け、本文はMarkdownに徹する、という線引きです。

本文は変えず、見せ方だけを選べばいいと整理した

ここで、考え方を整理しました。

最初に私が考えたのは、見せ方の決まりをいくつか用意しておく案でした。ふつうの事例は淡々と、インタビューは誌面ふうに、遊びたいページは派手に。本文はMarkdownのまま守り、ページごとに「今回はこれ」と選ぶ形です。

そこから話を詰めて、こう落ち着きました。Markdownの本文は変えない。それをHTMLにして表示する方法を、選べばいい。定型のスペック型は、これまでどおりテンプレートが変換する。誌面のように見せたいインタビュー2本だけは、Markdownの原稿からAIに誌面のHTMLを組ませて載せる。直すときはMarkdownを直し、HTMLは組ませ直す。

私はこれを、「書く、出すにAIが加わった」と言いました。書く工程には、もうAIがいます。そこに、表示用のHTMLを出す工程にもAIという選択肢が加わった、という整理です。これで、インタビュー型も含めて20本すべてをMarkdownに移せることになりました。

20本をCSV1枚で取り込み、紛れていた別の文字も直した

9月7日、20本を移しました。作業はいつもの形です。

  • Claudeが公開中の20ページを読み、本文をMarkdownに変換する
  • ついでに、長年の手直しで溜まった誤りを拾って直す
  • CSV1枚（20行）にまとめて、CMSに取り込む
  • 20画面すべてを、私が目で確認する

誤りを拾う中で、Claudeが妙なものを見つけました。見た目はふつうの「大」なのに、文字の番号が違う別の字が、7ページに紛れていたのです。漢字の部首を表すための文字で、画面では区別がつきません。ただ、ふつうの「大」で検索しても、この文字はヒットしません。手書きの時代に、どこかからコピーして持ち込んだものだと思います。目で見ても見つかりません。ページを機械が読める形に移す途中で、初めて出てきました。ほかにも、誤字や、説明文の脱字が見つかり、あわせて直しています。

どうなったか：20本とも成立し、AIの誌面は使わなかった

インタビュー2本も、そのままで違和感がなかった

取り込んで、20画面を確認しました。全部、成立していました。

意外だったのは、インタビューの2本です。誌面のように見せるため、AIにHTMLを組ませる段取りまで決めていました。ところが、淡々としたMarkdownのまま表示した画面を見ると、何の違和感もありませんでした。私は「このままでいい」と判断し、AIに誌面を組ませる工程は使わないことにしました。

理由は、ページの枠にありました。ページの上にはヘッダーがあり、本文の見出しから目次が自動で作られ、横にはナビゲーションが並びます。誌面らしさは、本文ではなく、その枠がすでに担っていました。写真と語りの中身があれば、本文の組み方まで凝る必要はありませんでした。

直したのは、表示側のスタイル3点だけ

20画面を見ながら、気になったところを書き留めていきました。最後に直したのは、表示側のスタイル（CSS）の3点です。

  • 画像を中央に寄せる
  • 画像の最大幅を決める
  • 表の左の列の幅を確保する（「コンテンツ数」のような項目名が途中で折り返されていた）

本文のデータは、この3点のために1文字も触っていません。

心配は、要らなかった

凝った組み方をやめたら、事例が安っぽくなるのではないかと心配していました。20本を通して見たら、その心配は要りませんでした。

今回の作業で分かったこと

見た目が崩れる心配は、型の違うものを少数だけ移して確かめる

事例はMarkdownに収まらない、というのは、私の思い込みでした。確かめたのは、スペック型とインタビュー型の、型の違う2本だけです。それで、合わないのは書き方を変えれば済む数か所と、諦めてよいと判断した写真の回り込みだけだと分かりました。全部を移す前に、いちばん崩れそうなものと、いちばん典型的なものを1本ずつ試す。それで、移せるかどうかと、何を諦めるかは決まりました。

見せ方は、本文ではなく、ページの枠が担っていることが多い

インタビュー2本のために、AIに誌面を組ませる段取りまで用意しました。使わずに済んだのは、ヘッダー、目次、ナビゲーションといった枠が、すでに誌面の仕事をしていたからです。本文はMarkdownのまま変えず、見せ方は表示する側で選ぶ、と分けておいたので、試してみて要らなければ使わない、という判断もすぐにできました。凝った見せ方が要るかどうかは、本文を作り込む前に、枠に入れた画面で確かめてから決めればいいと思います。

AIで別の形式に移すと、目では見つからない誤りが出てくる

見た目は同じ「大」なのに検索でヒットしない文字は、何年も公開していたページに残っていました。AIに本文を読ませて形式を移すと、こうした誤りが一緒に見つかります。移し替えは、溜まった誤りを掃除する機会にもなりました。