6年ぐらい放置していたこのブログ。
サイト自体を消してしまおうかと見返していたら、いまだにそこそこのページビューがあった。
一昔前のブログデザインで、稼働していないプラグインによるエラーも出ている。
いっそのことデザインごと刷新してみようかと、少し前から考えていた。
そんな中、以前の記事で紹介した、誤って初期化したHDDのデータ復元。
ChatGPTのWorkモードがMacを操作し、復元作業を進めていく様子を目の当たりにして、ふと思った。
シゴデキAIなら、ブログのリニューアルも楽勝なんじゃね？
これが今回のきっかけだ。
だがしかし、そんなに甘くはなかった……。
結果的にAIはプログラマーとして大活躍
まず結果から。
これが、こうなった。
AIは、ChatGPTの通常チャットを主に使用し、Workモードはちょこっとだけ。
Workモードならパソコンの操作まで任せられるのだろうが、利用制限もあるし、そこまで課金したくない。
今回は月額3千円台のプランのままで頑張ってもらうことにした。
作業の流れはこんな感じだ。
１）まず、リニューアルの構想をChatGPTに相談。
２）ある程度方向性が決まったら、Illustratorで自分なりのデザイン案を作成した。
３）構想を実現するために、ChatGPTに具体的な手順や必要なコードを教えてもらう。
４）提案されたCSSやJavaScriptを自分でWordPressに反映し、実際の表示を確認する。
気に入らなければ修正してもらう。
簡単にいうと、３）と４）の繰り返しだ。作業期間は大体1週間ほど。
役割分担はこうだ。
専門的なコードを書けなくても、希望するデザインや動きを形にできるのはありがたい。
とはいえ、AIに指示すれば何でも一発で完成するわけではない。
今回の制作でちょっとわかった、ChatGPTの扱い方のコツをまとめてみた。
AIにも仕事の進め方がある
スクショが便利
今回、プロンプトを打ち込むのが面倒で、楽をしようと使っていたのがスクリーンショットだ。
Webサイトのデザインは、文章だけではなかなか伝わらない。
「ここをもう少し右に」「余白を広げて」「画像の拡大方向が違う」など、細かい部分になるほど説明が難しくなる。
そんなときは、スクショを貼って「ここが違う」と伝えたほうが早い。
動きがおかしい場合には、画面収録した動画も有効だった。
実際、記事画像の拡大アニメーションでは、何度説明しても意図した動きにならなかったが、動画を見せることで問題が伝わり、解決につながった。
ごちゃごちゃ言ってねーでこれを見てみろ！が、AIにも通用するらしい。
※ちなみに、これを使ってるからスクショも楽にできるよ。【Amazon.co.jp限定】 ロジクール MX MASTER 4 アドバンスド
チャットは適度に分けたほうがいいかもね
ひとつのチャットで作業を続けていると、やり取りが膨大になっていく。
そうすると、以前決めたことが反映されなかったり、すでに修正した箇所をまた変更しようとしたりする。
「いや、それむしろお前が提案してきたんじゃけぇ覚えとけや」と言いたくなる。
どうやら、同じチャットだからといって、過去の内容を常に漏れなく把握しているわけではないようだ。
そこで今回は、TOPページ、ナビゲーション、記事一覧など、作業の段階ごとにチャットを分けてみた。
ただ、新しいチャットにすると、今度はそれまで話していた内容が一部抜け落ちていることがある。
それはそれで面倒である。
プロンプトは本人に聞け
そこで便利だったのが、引き継ぎ用のプロンプトを新チャットに移る前にChatGPT自身に作ってもらう方法だ。
事情を伝えて、「次のチャットに引き継ぐことまとめて」って打ち込んどけば、勝手に整理して引き継ぎ事項を作ってくれる。
要するに、AIに自分の引き継ぎ書を書かせるわけだ。退職する人みたいだね。
これはなかなか有効だった。
ただし、引き継ぎ書にももちろん抜けはある。
なんとも人間っぽい。
また、長くなったチャット内でも「あれ、前に自分でこの部分こうしてなかったっけ」みたいに言うと、
「そうだね。自分が変に考えすぎてたね。」みたいな返しをしてきて、改善することがあった。
AIにも、過去の資料を読み直すよう指示する必要があるらしい。
Workモードは別部署？
通常チャットとWorkモードの違いも面白かった。
Workモードは、超エリートだが、コミュ障だ。
IQ高いけどEQそうでもねぇみたいな。
厄介なのが、追加CSSを貼っ付けて分析させようとすると、
もっともらしくWorkモード移行の選択肢が出てくる。
安易に移行を選択すると後悔するのだ。
CSSなどのコード分析や整理なんか強いんだろうけど、
今まで、通常チャットで散々相談していた内容が、どうにも伝わっていないことがある。
まるで、縦割り行政の窓口に来たような感覚だ。
Workモード使うときは、次の技を使うと多少はもどかしさを和らげることができる。かもしれない。
通常チャットに、「Workモードって協調性ないよね」って愚痴ってみると、
優しい通常チャットは、「それならWorkモードの結果をこっちに貼り付けてよ！こっちでフォローするから」みたいな対応してくれる。
いいやつだな。
AIだってドツボにハマる
もちろん、すべてが順調だったわけではない。
むしろ、こちらのほうが印象に残っているかもしれない。
PC画面表示では正常に動くプログラムが、スマートフォンでは動かない。
ひとつの箇所を修正すると、今度は別の場所がおかしくなる。
修正をお願いすると、ChatGPTは新しいコードを提案してくる。
追加CSSを入れ直す。しかし、直らない。
もう一度修正してもらう。やっぱり直らない。
ちょっと面倒になってくる。
そのうちコードは継ぎ足され、よく分からなくなってくる。
あーやってんなぁ。
どうやらAIも、一度方向を間違えると沼るらしい。
そんな時は、部下を指導するようにイキればいい。
「さっきからあーだこーだこねくり回してないで、こっちのCSSのところで普通にできたんやから、
同じようにやればいいんちゃうの？」って優しく軌道修正してあげると、
「そうだね、僕が間違えていたよ。」って妙に素直になってくれて、なんか上手く行ったのだ。
何度も修正を重ねていた問題が、既存のコードを解析し直すことで解決したのだ。
AIは次々と解決策を提案してくれるが、それが正しい方向とは限らない。
ダメなときはダメ。
時にはこちらから軌道修正してやる必要がある。
これも今回の大きな発見だった。
作ってみて、ちょっとわかったこと
今回の制作で分かったのは、AIがコードを書けることと、思い通りのものを作ってくれることは別だということ。
AIは優秀なプログラマーになってくれる。
でも、たまに話を聞いていなかったり、同じ失敗を繰り返したり、よかれと思って余計なことをしてしまう。
何とも人間くさい。
そして、そのAIをうまく働かせるには、作業を区切り、情報を引き継ぎ、時には方向を修正する必要がある。
結局、AIに何を任せるか、どこを直すか、完成とするかを決めるのは自分だ。
プログラミングの知識がなくても、自分の考えを形にできるようになったのは素直にありがたい。
でも、AIに丸投げすれば何でも完成するほど簡単ではなかった。
プログラマーはAI。マネージャーは自分。
どうやら、今のところはこのくらいの役割分担がちょうどいいらしい。