SEになろうプロジェクト第3弾-第4回～Codexをつかってみる～

「SEになろうプロジェクト」は、プログラミング言語の仕様を学ぶのではなく、プログラムで現実の課題をどのように解決するかを体感するプロジェクトです。第3弾は、俳句の会のホームページ作成に挑みます。

制作にCodexを使ってみよう

前回に続き、ホームページ制作はデザインと中身をどんどん作っていく段階です。しかしながら手が止まっているのが現状です。そこで、生成AIを使ったサポートをしてみようかなと思ったのが今回です。

ちょうどChatGPTが6にアップデートされました。これの成績が非常に良いということで、ChatGPTのエージェント機能であるCodexを使ったホームページ制作を進めていきます。

トップページの制作から

Codexを使うと言っても、普段の会話とそう違うわけではありません。実現したいことを指示して、それに対する回答または成果物が出てくる、それを確認して修正を加えていくという手順です。

最初に取り組むのはトップページです。ホームページの顔であるトップページを、これまで練り上げたデザイン方針に従って作り込んでいきます。

また、ホームページ自体にCodexから接続して、中のデータや設定情報を読み取ります。その読み取った結果と合わせて、新しいデザインを提案させます。

Codexとホームページをつなぐ技術のことをMCPと言います。特に覚える必要はありませんが、MCPという言葉を聞いたら「生成AIと何かアプリケーションを結んでいるんだな」と思い出してくれれば結構です。

これのおかげで、特殊なアプリケーションを使わずとも、普段使っているアプリケーション（今回は WordPress）を直接生成AIで編集することができます。これが ChatGPTだと、チャット画面に出てきたコードを手でコピペして内容を移す必要がありますが、この手間がまったくなくなります。

Codexの提案はきれいだが、気に入らない

Codexへの最初の指示は少し特殊です。WordPress＋Lightningで作っているということ、そして後でブロックに変換しやすいような作りにすることを指示しています。

なぜブロックに変換するかというと、このホームページは公開後にユーザーが修正をするためです。したがって、ユーザーが修正しやすい状況にしておくことが大切です。そのため「最終的にはブロックに分解する」という指示を冒頭にしておきます。これがないと、Codexが自由にページを制作してしまい、とても分解できないようなひとまとまりのデザインになってしまいます。それはそれで使いどころを間違えなければいいのですが、今回はそれではダメということです。

出てきたデザインはなかなか綺麗で方針にも沿ったものでした。しかしながら、担当のメンバーに聞いてみると気に入らない部分がありました。

なぜかを言語化していくと「固い」ということで、さらになぜなぜで突き詰めていくと、使っているフォントが明朝体であり、それが固い印象を与えているということでした。であれば明朝体を優しいフォントに変えてあげる、この場合であれば丸ゴシックに変えてあげると見た目の印象が変わります。

また、コバルトブルーを差し色で使いたいということでしたので、コバルトブルーを差し色で使うように指示を追加します。

何度か追加で指示をした後、OKが出ましたのでこれをWordPressに送ります。このあたりも全部自動でやってくれるというのを目の前で実演しました。

ChatGPT-6 astraはおおぐらい

ちょっとした失敗談があって、今回ここまでをChatGPT-6のastraで実行しました。そしたら大食らいなことで、5時間の使用分をあっという間に使い切ってしまいました。もう少し持つかなと思ったんですが、1ページ作るだけで終わってしまいました。

そこで急遽、溜まっていたリセットを使い、性能の低いモデルを使いつつ進めていきます。

これ普段の使い方も一緒で、難しい課題を解くときは上位のモデルを使い、単なるアップデートや検索、置き換えなどの負荷の低い操作のときは下位のモデルを使った方が、より効率的に長く生成AIを使うことができます。

今回はいい経験になったかなと思います。

続けて、句集と会員の句を編集する

トップページの更新が終わったので、他のメンバーで句集と会員の句のページの編集を進めます。

句集については、トップページと同様に新しくページを作っていきます。モックアップを作って確認し、修正を加えながら完成させて、最終的にWordPressにアップするという手法です。

一方、会員のページについては、すでに画像を上げており、さらに縦書きのページを作っていました。これをまたゼロから作り直すのはもったいないので、以下のような手順を踏みます：

1. まずはCodexに既存のWordPressから現存のデータをダウンロードしてくるところから始める
2. 落としてきたデータに対して、こちらの指示で「どういう風にしたいか」という修正点を指示する
3. Codex側で完成させてからWordPressに戻す

AIの提案が気に入らなければ、修正させれば良い

生成AIのモデルを下げたこと（下位のモデルにしたこと）も影響しているかもしれません。以前ほど一発で「いいな」と思うデザインではなくなってきました。でも、気に入らなければ何遍も修正させれば良いのです。

ただ、修正のさせ方については注意が必要です。どこをどのように変更するのか、言葉を選んで指示する必要があります。途中説明しましたが、AIがきちんと判別できるように指示をしなければなりません。

そこで私が試した方法は一つです。プロンプトを読んで「あなたならどのように操作しますか？」と聞いたときに、自分でも疑問に残るところや迷いがあったようでした。その迷っているところを解消してあげればよいのです。「自分でもう一度読んで間違いがないだろう」と思えるプロンプトを書けば問題ありません。

ただ、画像の中にある文字と、その上に重ねている文字の判別がついていないようでした。これは小学校4年生だと仕方のないところかもしれません。「画像の文字は画像として認識し、テキストはテキストとして認識する」ため、そこはあまり気にする必要はないのかな、と私なら考えるところです。

結果としてそれは杞憂で、AIははっきりと画像の文字と認識していました。小学生の書いたプロンプトでも十分に認識した上で、デザインの変更をしてくれました。

次回予告

次回は10月10日午後から。場所は同じく太子町地域交流館です。最終回、ここまでわたしも修正します。最後の手直しです。