SEになろうプロジェクト第3弾-第5回～Claude Codeをつかってみる。そして最終回～

2026年10月12日 2026年10月12日 nakahara_takahiro

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

制作にClaude Codeを使ってみよう

SEになろうプロジェクト第3弾、俳句結社「姫路青門」さんのホームページ制作の続きです。今回はClaude CodeとCodexの両方を使いました。残りのページの制作と、サイト全体の見た目を整える作業に取り組んでいます。

Claude CodeとCodex、2班に分かれて残りのページを作る

前回はOpenAIのCodexを使いました。メンバー全員で一つの画面を見ながら、一つのチャットを触ってサイトを作り込んでいきました。今回はメンバーを2班に分け、一方にClaude Code、もう一方にCodexを担当してもらいました。

考え方はどちらも同じです。MCP（AIと外部のサービスをつなぐ共通の仕組み）でサイトに接続し、生成AIからページを操作します。私は断然Claude派です。とはいえ、道具の好みは使い比べてみて初めて言えることなので、両方触ってもらうことにしました。

残っていたのは一、二ページです。前回決めたコンセプトに沿ってAIに指示を出し、一ページずつ作っていく流れはもう経験しています。前半はその続きを進めてもらいました。

一ページずつ作るとブレる。整えるのもAI、確かめるのは人間

後半の本題は、サイト全体の印象を整えることです。

一ページずつ作り込んでいくと、どうしてもブレが出ます。人間が作ってもブレるのと同じで、生成AIも完全に統一された仕上がりにはなりません。共通部分にあるべきパーツがあったりなかったりします。フォントがページごとにバラバラだったり、見出しの付け方のフォーマットが変わっていたりもします。なかなか盛大に、ちぐはぐなデザインをしてくれます。

そこで、サイト全体を見直してデザインの統一を図る作業をAIにさせました。ただし、本当に整ったかどうかは人間の目で確かめなければいけません。

反対に、あるページだけあえてコンセプトを一部外す、というテクニックもあります。どこを揃えて、どこを外すか。ここはAIに任せきりにせず、人間が制御するところです。

俳句を「説明する」画像をやめる

並行して、細部の作り込みも進めました。中でも考えさせられたのが、俳句に添える画像です。

五・七・五の十七音をそのままAIに渡して画像を作らせると、その句を説明するような画像ができます。これはこれで面白いです。経験の浅いうちや若い人は、言葉の意味や解釈の仕方がわからないことがあります。そんなときに絵や写真風の画像があると、イメージしやすいのだと思います。

ただ、句を説明する画像には、印象を固定してしまうという副作用があります。

たとえば「紫陽花や登校班の傘開く」という句があります。登校の様子を実写風の写真で載せてみたところ、私が思い浮かべていた絵とは違うものが出来上がりました。読む人によっても、思い浮かべる景色は違うはずです。自分が通った学校を思う人もいれば、子どもや孫の通う学校を思い浮かべる人もいるでしょう。

俳句の読み方は、受け取り手の感性に委ねられるものです。読み方や捉え方を押しつけてはいけない。俳句の会の岡本さんにそう教えていただきました。ここは改めなければなりません。

では、どうするか。アイディアを出してくれたのは高校生のメンバーでした。句の全体を説明するのではなく、一部分だけをワンポイントで絵にするという案です。先ほどの句なら、傘が開く様子だけを抽象的に描きます。

なるほど、と思いました。この方針で作っていくことにしました。

AIに丸投げしても、欲しいものは出てこない

生成AIを使うと、何も考えなくても成果物が出てきて、すごいと感じることがあります。俳句を説明する画像が出てきたときもそうでした。けれど、自分たちの欲しいものをAIに作らせるには、こちらがしっかり指示をしなければなりません。その考え方のもとで作り込んでいくと、納得のいくものが出てきました。

AIを使えば何でもきれいにできる、というわけではありません。生成AIが出てきてからずっと言い続けていることですが、今回改めてそう考えました。これからAIが進歩しても、ここは変わらないと思います。融通の利く人間に「いいように作ってよ」と頼んでも、良いものが出てくるとは限りません。AIの振る舞いが人間に似てくるほど、曖昧な指示ではこちらの望むものは出てこなくなるでしょう。何が欲しいのかを、こちらから具体的に伝える必要があるということです。

一方で、AIの使い方は進歩が早いです。どんどん使いやすくなり、簡単に成果が出る道具も次々に出てきています。そうした道具は積極的に使いながら進めていきます。

サイトは概ね出来上がりました。小中高のメンバーと一緒に、生成AIにうまくフォローさせながら作ってきたサイトです。あとは依頼主の皆さんと話をしながら細部を詰め、公開へと進めます。

これで、ホームページ制作の第3弾はおしまいです。