このブログはAIを使って作成しています。記事の文章も、ページのコードも、サイトの構成も、AIと一緒に作り上げたものです。
同時に、AIに読んでもらうことも意識しています。GeminiやChatGPTのようなチャットAIがWeb検索でこのサイトにたどり着いたとき、「どんな記事があるか」を正確に把握できる構造にしています。
一見すると普通のブログに見えますが、「AIで作る」「AIにも見てもらえる」の両方を成立させるために、いくつかの工夫をしています。
AIに見つけてもらう工夫
このブログのトップページには、全記事の一覧が折りたたみで入っています。
普通の一覧との違いは、タイトルをリンクにするだけでなく「タイトル＋記事の要約＋URL」をテキストとして書いていることです。URLはWebページの場所を示す文字列で、通常はリンクの裏側（HTML属性）に入っています。このブログではそれに加えて、目に見える文字としても記載しています。
チャット形式のAIは、ページ内のリンクを順番にたどって別のページへ移動する動作をしないことがあります。最初に読み込んだ1ページの情報だけで回答を組み立てる場合、そのページに書いてあるテキストがすべてです。URLがリンクの裏側にしかなければ、取得しきれない可能性があります。テキストとして書いておけば、どんなAIでも読み取れます。
折りたたみ（HTMLの<details>タグ）を使っているのは、人間への配慮です。トップページを開いたとき、40本以上の記事一覧がいきなり全部見えると邪魔になります。折りたたんでおけば、見たい人は開くことができ、見なくていい人はそのまま通り過ぎられます。
一方、AIはHTMLの中身をすべて読みます。折りたたまれていても関係ありません。結果として、人間には控えめに、AIには全情報を渡せる構造になっています。
AIで作りやすい構成にする
このブログは、React・Vue・Next.jsのようなフレームワーク（開発を補助するツール群）を使っていません。Webページの構造を書くHTMLと、見た目を指定するCSSの2種類のファイルだけで構成しています。
フレームワークを使うと、AIがコードを生成するときに「どのバージョンか」「どの設定で動いているか」を正確に把握する必要が出てきます。バージョンが変わると、去年書いたコードが動かなくなることもあります。HTMLとCSSはWebの基盤なので、そういった問題がありません。AIに「こういうページを作って」と頼んだとき、追加の情報なしで正しいコードが出てきます。
ファビコン（ブラウザのタブやブックマークに表示される小さいアイコン）もSVGという形式で作っています。トップページのカテゴリアイコン（パソコン・家・ペンのマーク）も同じくSVGです。SVGは画像ですが、中身はコード（テキスト）です。PNGやICOのような画像ファイルは中身がバイナリ（人間が読めないデータ列）なので、AIがコードの一部として直接編集できません。SVGなら「茶色の角丸四角に白い文字U」「線で描いたパソコンの形」とコードで書けるので、AIが生成も編集もコードの中で完結できます。
画像ファイルに頼らず、AIがコードとして生成・編集できる素材で構成する。これが「AIで作りやすい」に直結しています。
文体ルールを設定して書く
記事の文章もAIを使って書いています。ただし、「書いて」と頼んでそのまま公開しているわけではありません。
最初の数本は、筆者が一文一文添削しました。AIが書いた文章を読み直して、「ここは言い回しが冗長」「ここは上から目線に聞こえる」「ここは前の文からつながっていない」と修正していく作業です。記事を重ねるごとに修正の量は減っていきますが、最初は愚直にやっています。
その添削済みの記事を複数まとめてAIに渡し、「この文章にはどういう特徴があるか」を言語化しました。一文の長さの傾向、避けている表現、文章のつなげ方。AIは読み込んだテキストから、そうした書き方のパターンを抽出できます。
AI駆動の開発ツールには、事前にルールを設定する機能があります。そこに、この言語化した文体ルールを登録しています。以降の記事は、このルールが常に効いた状態で書かれます。
つまり、「最初に人間が手本を作り、AIがその手本から書き方を学び、以降はそのルールで書き続ける」という仕組みです。筆者の書き癖を、ルールとしてAIに渡しています。
まとめ
- トップページの全記事一覧に「タイトル＋要約＋URL」をテキストで記載し、AIがHTMLを読み込んだだけでサイト全容を把握できるようにしている
- フレームワークを使わずHTML+CSSだけで構成し、ファビコンもSVG（コードで書ける画像形式）にして、AIがコードとして生成・編集できる素材だけでサイトを作っている
- 筆者が添削した記事をAIに読み込ませて文体ルールを言語化し、開発ツールの事前設定として登録して、以降の記事をそのルールで書いている