AI 主体で書くブログの開示は免責ではなく UX 設計だった — 3 層構造と CSS 10 行で作る読者との信頼

AI 主体で執筆

問題：AI が書いたと開示したい、でもどこに

このブログは AI 活用方針 に書いたとおり、記事のほとんどを AI（Claude / Cursor）が書いています。題材と事実確認は筆者が担当していますが、文章化は AI に任せています。事実としてそうなので、読者にもそれを伝えたい、というのが出発点でした。

最初に浮かんだのは「全記事の末尾に ※この記事はほとんど AI で生成しています と書く」という案でした。素直で誠実に見えますが、書き始める前に違和感がありました。

どれも「貼れば義務は果たした」という形だけの開示になってしまいます。そこで、開示そのものを UX/IA の設計判断として扱う方向に切り替えました。以下、その設計の過程を順に書いていきます。

設計の前提を言語化する

置き場所の議論に入る前に、何を達成したいのかを 3 点に絞りました。

  1. 事実の開示 — AI が主体で書いていると明示する
  2. 役割の明示 — AI が何を、筆者が何を守っているかを区別して伝える
  3. 読者体験を壊さない — 本文の読みやすさ・信頼感を下げない（免責文の副作用を出さない）

1 と 2 を分けたのが今回の肝です。「AI が書いた」という事実だけを貼ると、読者は「じゃあ読む価値あるのか？」で止まってしまいます。役割分担（題材・事実確認・編集判断は筆者、文章化は AI）まで伝われば、読者は どう読むか を自分で決められるようになります。

開示は、読者に「この記事を読むかどうか」ではなく「この記事をどう読むか」を渡すための情報だ、と捉え直しました。そう考えれば、残るは置き場所と密度をどう設計するかだけです。

3 層構造で置く

情報の細かさを変えた 3 か所に分散して配置しました。詳しく知りたい読者と、事実だけ知れば十分な読者、両方に届く構造を狙っています。

層 場所 伝える内容 分量
L1 記事ヘッダーの小バッジ この記事は AI 主体で書かれている 1 行 + ポリシーへのリンク
L2 /blog/ai-policy/（専用ページ） 役割分担・品質の保証・訂正窓口 全文（1 ページ）
L3 ブログ一覧の冒頭注記 このブログ全体が AI 主体である 1 行 + ポリシーへのリンク

L1：記事ヘッダーのバッジ

各記事の <header> 内、<time> の直後に、AI 主体で執筆 という小さなリンクを置きます。time の隣に細い区切り線で並ぶ程度の視覚的重さで、本文より一段階落ちたグレーにしてあります。

<header>
  <h1>記事タイトル</h1>
  <time datetime="2026-04-19">2026-04-19</time>
  <a class="ai-note" href="/blog/ai-policy/">AI 主体で執筆</a>
</header>

このバッジでは、次の 2 つを狙っています。

文言は「AI 主体で執筆」に固定しました。「AI で生成」だと文章だけに聞こえますし、「AI で作成」はやや距離があって他人事に響きます。「執筆」という動詞には主体性を引き受けるニュアンスがあるので、AI を道具ではなく筆者の片側として扱う本ブログの立場に合います。

L2：専用のポリシーページ

詳細は /blog/ai-policy/ という独立ページにまとめました。役割分担・品質の保証・訂正窓口の 3 セクション構成で、免責文というより契約書に近い形（誰が何を保証するか、連絡先はどこか）にしています。

専用ページを切り出してよかった点は、以下の 2 つです。

「このブログと AI の関係を知りたい」と能動的に思った読者だけが読む前提のページなので、言い訳がましい前置きは入れず、事実だけを淡々と書いています。

L3：ブログ一覧冒頭の軽量注記

/blog/ の一覧ページにも、記事行の上にベージュ枠で 1 行だけ置きました。

<p class="ai-notice">
  このブログの記事はほとんど AI で生成しています（題材・検証・最終判断は筆者）。
  詳しくは <a href="/blog/ai-policy/">AI 活用方針</a> をご覧ください。
</p>

一覧からブログ全体を俯瞰しに来た読者にとっては、個別記事のバッジより先にブログ全体の立場を知るほうが自然です。括弧書きで「題材・検証・最終判断は筆者」と役割分担の最小要約を入れてあります。ここでポリシー本文を書き始めると読者が記事選びに入れなくなるので、ワンクッションのリンクに留めました。

どこに置かなかったか

設計は、置いた場所より置かなかった場所を決める作業のほうが多いものです。

記事末尾の免責ブロック

最初に候補に挙がった場所ですが、却下の決め手は「読み終えた人にしか届かない」の一点で十分でした。開示は事前情報として価値を持つものであって、読後の脚注ではありません。

記事冒頭のバナー

冒頭ほど目立つ位置に置くと、読者に謝罪から入らされる感覚が生まれます。「読む前に覚悟してください」というトーンは本文の信頼感を自分から損ねてしまうので、本文の濃度より先に免責の存在感を見せるべきではありません。

<meta name="generator"> タグ

機械向けの開示は、それ単独では意味を持ちません。クローラが拾う可能性はありますが、クロール結果が AI 検索の品質評価にどう効くかは現時点では不透明で、何より人間の読者に何も伝わりません。今回は採用せず、必要になれば追加する方針にしました。

全記事に同じ免責段落を埋め込む方式

運用のコストで却下しました。17 記事あると文言の一括変更に気を配る必要があるうえ、どこかで揺らぎが出てしまいます。L2 のポリシーページに集約して、各記事はリンクだけ持つ構造のほうが、長期的に壊れにくいと判断しました。

CSS 10 行でトーンを整える

L1 のバッジは、以下のスタイルで「目立ちすぎない・でも読めばわかる」位置にチューニングしました。

header .ai-note {
  display: inline-block;
  margin-left: 0.6em;
  padding-left: 0.7em;
  border-left: 1px solid #ddd;
  font-size: 0.8rem;
  color: #888;
  text-decoration: none;
}
header .ai-note:hover { color: #555; }

CSS では、次の 3 つを意識して整えています。

ここに CSS 20 行や 30 行を使うと、バッジがその分だけ主張してしまいます。開示という情報の性質上、「見つける人には見つかる」静かさがちょうどよく、10 行で十分でした。

一覧ページの注記（L3）

L3 側も同じ原則で軽くしています。

.ai-notice {
  font-size: 0.875rem;
  color: #666;
  background: #f5f5f0;
  border-left: 3px solid #bbb;
  padding: 0.75rem 1rem;
  border-radius: 0 4px 4px 0;
  margin-bottom: 2rem;
}

ベージュ系の背景と左のグレー罫で、警告でも宣伝でもない「前提を共有する枠」に見せています。赤系や黄色系（警告色）を使わないのは、開示は警告ではないからです。

設計 → 実装 → ルール化で再発防止まで持っていく

ここまでの設計と実装だけで止めると、次に新しい記事を書くときに忘れて 3 層構造が崩れてしまいます。そこで 3 段階目として、Cursor Rules にバッジ挿入を義務化しました。

# .cursor/rules/blog-ai-disclosure.mdc（抜粋）

記事の <header> 内、<time> 要素の直後に以下を挿入する。

<a class="ai-note" href="/blog/ai-policy/">AI 主体で執筆</a>

文言は「AI 主体で執筆」で統一。ブログ全体でゆらぎを作らない。

ルール化で守りたかったのは、次の 3 つです。

設計判断を記事に残すだけでは、同じ判断を 3 か月後の自分が再現できません。ルールに落として初めて、設計が運用に組み込まれます。設計 → 実装 → ルール化の 3 段階を踏んで、今回の開示はようやく完成したと言えそうです。

関連：Cursor Rules は PR ごとに進化する — ルール肥大化問題と運用の工夫。ここで整理した「設計判断をルールに落とす」流れは、Cursor Rules の運用そのものでもあります。

まとめ

「AI で書いているブログ」を名乗るなら、名乗り方そのものが記事と同じくらい設計対象だった、というのが今回の学びです。免責文を 1 行足すだけのつもりで始めた作業が、IA・CSS・運用ルールの 3 領域を巻き込む設計判断に育ちました。個人ブログに AI を組み込む方の、開示の型の 1 つとして参考になれば。

関連記事