All posts

AI と一緒にサイトを作るとき、人間がやること

コードを書くのは AI。でも、決める・確かめる・鍵を持つ・出すのは人間でした。このエレベーターを作って見えた役割分担の話。

コードは、ほとんど書いていません

このエレベーターのコードは、ほとんど AI の Claude が書きました。
わたしが打ったのは、ターミナルのコマンドと、管理画面の文章くらいです。

それでも、「AI が作ったサイト」とは思っていません。作っている間ずっと、人間にしかできない仕事があったからです。

役割分担はこうなりました

Claude がやったこと

  • トップページのコード、色・動き・チャイムの実装
  • 確認用のモックを作って、ドアや階数表示をテスト
  • エラーの原因探しと修正
  • 記事の下書き、タイトルや説明文の案出し

わたしがやったこと

  • 「上にスクロールするエレベーター」というアイデア
  • 実際の画面を見て、聞いて、触って確かめる
  • GitHub や Cloudflare のアカウントと権限の管理
  • 公開するかどうかの判断
  • 記事の言葉を、自分の言葉に直す

人間がやること 1:何を作るかを決める

「エレベーター型にしよう」「1フロアに記事1本」「地下は暗く、地上は明るく」。
これは AI に聞いて出てきた案ではなく、わたしが最初に決めたことです。

AI は、決まったことを形にするのはとても速い。でも、何がおもしろいかは教えてくれません。そこを決めるのは、作る人の役目です。

人間がやること 2:見て、聞いて、触って確かめる

チャイムを付けたとき、Claude は「テストで鳴る処理が動いたことを確認しました」と言いました。でも、わたしのパソコンでは鳴りませんでした。

Claude は自分で作ったモックでテストしていましたが、スピーカーから本当に音が出たかは、AI には聞こえないのです。「鳴らない」と伝えたら、原因(音の準備が終わる前に鳴らそうとしていた)を見つけて直してくれました。

スクロールしたときの気持ちよさ、ドアが開く速さ、文字の読みやすさ。こういうことは、人間が実際に触ってみるしかありません。

人間がやること 3:AI の報告をうのみにしない

記事を公開したあと、Claude に確認を頼んだら、「表が崩れて、縦棒の文字がそのまま出ています」と言われました。
でも、わたしの画面では、表はきれいに表示されていました。

原因は、Claude がページを読み込む道具が、表を文字に変換して読んでいたこと。ほかにも、古いキャッシュを見て「記事がまだ出ていません」と言われたこともありました。

スクショを見せたら、Claude はすぐに間違いを認めました。AI の報告は、最後は自分の目で確かめる。 これは、とても大事だと感じました。

agaru-web-b2-2.png

人間がやること 4:鍵を持つ

GitHub に入るとき、ブラウザに「GitHub CLI があなたのアカウントにアクセスしようとしています」という画面が出ました。
そこには、リクエストした場所と時刻が書かれていて、「本当に自分が今やった操作か」を確かめてから、許可のボタンを押しました。

アカウント、パスワード、パスキー、公開の権限。こうした鍵は、人間が持っておくものです。AI に作業をお願いしても、鍵を渡すかどうかは毎回自分で決めます。

人間がやること 5:「出す」と決める

最後の git push(公開)は、毎回わたしがやりました。
手元で動きを確かめて、「これでいい」と思ってから出す。もし何か起きても、自分が出したものなら、自分で責任を持てます。

人間がやること 6:言葉を自分のものにする

記事の下書きも Claude に手伝ってもらいました。でも、そのまま公開はしていません。

「よかった!普通読みだった!」のような一言や、自分が調べて感じたことを書き足して、はじめて自分の記事になります。逆に、AI が書いた文には「誰が書いても同じ」感じが残ります。

AI が得意だったこと

公平のために、AI が本当に助かったところも書いておきます。

  • 調べる前に確かめてくれる:日本語化しようとしたとき、「その設定にすると、記事が全部表示されなくなる」と、変更する前に気づいてくれました
  • 地味な修正が速い:文字の折り返し、余白、色の調整を、言えばすぐに直してくれる
  • 説明がうまい:WordPress にたとえて説明してもらうと、新しい仕組みでもすぐ理解できました

これは遠い昔の思い出なんですが、まだ人類が全て手書きでコードを書いていた頃、このサイトのように表示エリアにピタッと吸着して頭出ししてくれる動作を作るのになんだかんだで1週間ほどかかったことを思い出しました。あっちのブラウザで見るとちょうどいいのに、こっちのブラウザだとズレている、なんてことを繰り返しながら実装したサイトのあしらいの動作さえ、エレベーターという言葉からAIは読み取って、言われる前にこれを入れようよ!と提案してきました。もちろん、実装も数分です。あの頃の自分に、教えたい。どのくらい驚くかな。

まとめ

AI と作るときの、わたしの役割はこの5つでした。

  1. 何を作るか決める
  2. 見て、聞いて、触って確かめる
  3. AI の報告を確かめる
  4. 鍵を持つ
  5. 出すと決める

コードを書く時間が減ったぶん、決めることと、確かめることに時間を使えるようになりました。これが、AI と一緒に作るいちばんの良さだと思います。

さあ、もうひとつ上の階へ。

Discussion

No comments yet