前回、色の次は画像の重さで躓いた話を書いた。原因はいつも同じだった。AIに相談して、返ってきたコードを自分でコピーして、ファイルに貼り付けて、動かしてみて、エラーが出たらまたそれをAIに貼り付けて聞き直す。この「コピペの往復」が、記事が増えるにつれてどんどん重くなっていった。
そんなときに知ったのが、ファイルを自分で読んで、自分で書き換えてくれる「Claude Code」というツールだった。
チャットのやり取りに感じ始めた限界
ブログを始めた頃は、チャット画面でAIに相談するだけで十分だった。構成を考えてもらう、文章のたたき台をもらう、分からない用語を聞く。そこまでは無料版でも問題なかった。
ところが「サイトのここを直したい」という話になると、様子が変わってくる。AIが書いてくれるのはあくまで文字としてのコードで、それを実際のファイルに反映するのは自分の仕事だった。該当箇所を探して、コピーして、貼り付けて、保存する。1回で動けばいいが、大抵どこかでズレる。閉じタグが1つ足りない、貼り付け位置がずれている——そんな地味なミスで表示が崩れ、またチャットに戻ってエラーメッセージを貼り付ける。
記事が2〜3本のうちは我慢できた。それが十数本になり、直したい箇所も増えてくると、この往復だけで夜が終わるようになっていた。
「コードを書くAI」と聞いて、正直ビビった
そんな折、SNSで「Claude Code」という名前を見かけた。説明を読むと、ターミナルという黒い画面から動かす、エンジニア向けのツールらしい。パソコンもさほど得意ではない50代の自分には、正直ハードルが高く感じた。
それでも、コピペの往復に疲れ切っていたこともあり、藁にもすがる思いで導入してみることにした。難しい設定は動画や解説記事を頼りに、なんとか一つずつクリアしていった。
最初にお願いした、小さすぎる作業
最初から大きなことを頼む勇気はなかった。試しにお願いしたのは、記事一覧のカードから、当時つけていたアイコン画像を外してすっきりさせる、という小さな見た目の調整だった。実際に送ったプロンプトの一部を、そのまま載せておく。
専門用語も交えず、普段の言葉のままで書いた。それでも、ファイルのパスと「対象はこの3ファイルだけ」という範囲さえ伝えれば、ちゃんと該当箇所を探し出して直してくれた。
動いた瞬間に変わったこと、変わらなかったこと
実行してもらうと、Claude Codeは3つのファイルを自分で開き、該当のCSSとJavaScriptを書き換え、最後に「何を変更したか」を日本語で説明してくれた。もうコピペをする場面がない。これだけで、作業にかかる体感時間が半分以下になった。
変わらなかったのは「見た目が本当に崩れていないかを確認するのは自分の役目」ということだった。実際、スマホ幅での「もっと見る」ボタンの展開など、細かい挙動は自分の目でブラウザを開いて確認する必要があった。任せきりにはできない、という感覚は今も変わっていない。
それでも、手を動かす部分をまるごと引き受けてくれるようになったことで、自分は「何を、どこまで直してほしいか」を考えることに集中できるようになった。役割がはっきり分かれた、という感じに近い。
今のプロンプトの型：背景・依頼・確認
この頃から、お願いごとを整理して伝えるようになった。今も基本はこの3つの順番のままだ。
- 背景：今どういう状態で、なぜ困っているか（例：記事が増えてカードが縦に伸びすぎている）
- 依頼：具体的に何をどうしてほしいか、対象ファイルも指定する
- 確認してほしい観点：完了後にどこを見て判断してほしいか（PC/スマホ幅、ダークモードなど）
特別なことは何もしていない。会社の仕事で誰かに作業を依頼するときと、実はそう変わらない。次の記事では、この型のまま少しずつ大きな作業――記事同士のつながりや導線づくり――を任せていった話を書いていく。