本文へ移動
Coffee Break Again AIと育てる、サイト制作の研究室

Guide

CBAで段落の下に余白を設け、指示例の背景と左線を外した制作画面
CBAの修正時に保存した実画面。指摘を、次も確認できる基準へ変えました。

AI指示書の書き方|同じサイト修正を繰り返さないための実例

広告(PR)

余白や囲みを何度も直したCBAの実例から、AIへの指示書に残す内容を説明します。正しい例、避けたい例、確認方法、古い指示の更新を、使える記入例で紹介します。

AIが同じミスを繰り返すとき、修正した一か所の外を見る

「余白を空けて」と頼んで一覧を直したあと、今度は記事の段落と指示例がくっついていました。このサイト、Coffee Break Againで実際に起きたことです。余白を説明する記事なのに、その記事自身の余白が足りない。直したつもりの場所とは別のところで、同じ不満が残っていました。

このとき必要だったのは、「もっと気を付けて」という一言を増やすことだけではありません。段落同士は離れていても、段落の次に表や画像が来た場合はどうか。どの組み合わせまで確認するのかを、次の作業でも使える形へ広げる必要がありました。

修正前のCBA。説明段落のすぐ下に、背景色と左線の付いた指示例がある
修正前の保存画面。説明文の末尾と囲みの間隔、左側の線と背景色が指摘の対象でした。 原寸画像を見る

さらに「左側の線と薄い背景の組み合わせがAIっぽい」という指摘もありました。これは運営者の好みです。そのままAIへ渡すだけでなく、「説明の囲みに左線と背景色を組み合わせない」と、見分けられる形に言い換えました。

AI指示書には、正しい例・避けたい例・確認方法を残す

修正後は、指示例を背景なしの上下の細い線で区切り、直前の段落からも離しました。同時に、文章・表・画像・指示例が隣り合う場所を確認する基準を、サイトの作業ルールへ追記しています。

修正後のCBA。指示例の上下を細い線で区切り、説明文との間に余白がある
修正後の保存画面。前の画像とはスクロール位置と文章量が異なります。段落の直後と囲みの形を見比べてください。 原寸画像を見る

指示書には、次の四つを一組で残します。「読みやすく」という言葉を、見本・条件・確認する作業へ分ける考え方です。

  • 対象:通常の記事ページ。トップの特別な演出は別にする。
  • 採用した基準:本文はPC16px・スマホ15px。本文中のまとまりの間隔はPC24px・スマホ20px以上。
  • 避けたい例:説明の囲みに左線と背景色を組み合わせること。文字を小さくして無理に収めること。
  • 確認方法:段落の次が表・画像・指示例の場所も、スマホとPCで間隔を測る。

この数字はCBAで採用した値です。どのサイトにも同じ数字を当てはめる必要はありません。自分の本文サイズと読みやすい画面を決め、それを判断の出発点にします。サイズの選び方とCSS例は、余白と文字サイズを整えた記事で説明しています。

MarkdownのAI指示書を、小さな記入例から作る

Markdownは、見出しや箇条書きを文字で書ける形式です。特別な画面を用意しなくても、メモに見出しを付ける感覚で整理できます。まずは、直近で繰り返した一つの指摘だけを残しましょう。

次は今回の基準を、他のサイトでも記入できる形へ組み直した例です。過去の依頼文そのものではありません。

# 記事ページの表示ルール
更新日:[今回決めた日]
対象:[通常の記事ページなど]

## 採用した見た目
本文サイズ:PC[ ]px、スマホ[ ]px
段落・表・画像・指示例の間隔:PC[ ]px、スマホ[ ]px
見本:[気に入ったページと、その画面画像]

## 避ける形
[例:説明の囲みに左側の太い線と背景色を組み合わせない]
[例:本文を小さくして枠へ押し込まない]

## 修正後に見る場所
段落の直後に表・画像・指示例が来る箇所。
同じ部品を使う別の記事も一つ開く。
スマホとPCで確認し、確認できた範囲を報告する。

見本は、サイト全体の画像だけでなく、該当する見出しと周囲の文章が読める大きさで残します。「このページのここ」と分かれば、AIの案を見直す自分自身の基準にもなります。

AIへの指示書は、作業前に読ませて古い決定を更新する

保存したファイルをAIが読んだかどうかは、別に確かめます。ファイル名を決めただけで、すべてのAIが自動で読み込むとは限りません。使っている画面で添付するか、ファイルを読めるAIへ場所を伝えます。

修正前に、添付した表示ルールと現在のページを読んでください。
今回に関係する基準を短く説明してから作業を始めてください。
過去の指示と今回の依頼が食い違う場合は、その箇所を示してください。
修正後は、採用した変更だけを表示ルールへ反映してください。
新しい決定に変わった古い指示は、現行ルールに残さないでください。

たとえば、以前は色付きの囲みを使っていたとしても、今回やめると決めたなら、古い指示を現行ルールから外します。変更の理由は履歴へ残せますが、今の作業でどちらを使うかは一つにしておきます。

サイト修正の結果と指示書を、同じ画面で確かめる

CBAでは、ルールを追記するだけでなく、本文中のまとまりの間隔や囲みの装飾を検査する項目も加えました。保存した文書と、実際にできた画面が一致しているかを見るためです。

指示書ができても、今後のミスがなくなると分かったわけではありません。今回の実例で示せるのは、繰り返された指摘を、対象・基準・避ける形・確認方法へ整理したところまでです。次の修正でも、その四つと実画面を照らし合わせます。

まずは一つ、最近AIへ言い直したことを選んでみてください。「何が嫌だったか」の横に「どうなればよいか」と「どこを見て確かめるか」を書く。それが、自分のサイトに合う指示書の最初の一項目になります。