腹が減ったので架空のピザ屋HPを作ったら、思ったより本気になった話

腹が減った。
誰しも今日はピザの口や。って日あるやん？

それが今回のHP制作の始まり。

HP制作で副業をしたい。
でも、まだ見せられる実績が全然ないって人おらん？

これ結構大きい壁やと思うねんなー。

今日はどんな記事なんですかい旦那？

「ポートフォリオを作ればいい」と言われる。
でも、何を作ればいいのかわからない。って人に向けた記事やで！！

今回は、Claude Codeと画像生成AIを使って、
架空のピザ屋「pizza GANG」のHPを本気で作ってみたで。

架空やけど、遊びちゃう。
自分の実績として見せられるくらい、
しっかりと世界観から作ることにしました。

まず考えたのは、HPにするかLPにするか。
てかそもそもHPとLPって人は以下参照して〜

腹減った！pizza GANG作るぞ！

ピザ屋なら、
メニュー、店舗情報、アクセス、予約など、
載せたい情報はいっぱいあった。

ただ今回は、架空案件であり、
ポートフォリオとして見せる目的もある。

なので、複数ページのHPではなく、
1ページで世界観と魅力が伝わるLP型のHPにしたで。

ブランド名は「pizza GANG」。

ただ、GANGという名前はそのままだと少し怖い。
なので犯罪っぽい意味ではなく、
“腹ペコの仲間たち”というニュアンスにした。

世界観は、
ストリート × アメリカンダイナー × ちょい悪マスコット。

黒、赤、チーズイエロー、生成りを中心にした、
ちょっとワルそうだけど可愛さもあるピザブランド。

いきなりClaude Codeに作らせない。

今回やってよかったのは、
Claude Codeにいきなり作らせなかったことや。

先に、プロジェクト専用のCLAUDE.mdを作った。
CLAUDE.mdとは？

正直、ここが初心者には地味に大変やったわ。

Macのテキストエディットで作ろうとしたら、
保存形式が.rtfになったり、直したと思ったら.txtになったり。

ChatGPTに毎回聞きながら進めた。

でも最終的にpizzaフォルダの中にCLAUDE.mdを置けたことで、
制作の方向性はかなりブレにくくなった。

CLAUDE.mdは一度作っちゃえば使いまわせるからオススメやで。

Claude CodeではOpusを使用。

最初からコードを書かせるんじゃなくて、
まず制作に必要な質問をClaudeしてもらう流れにしてもらった。

こういう質問に答えていくことで、
ただの「ピザ屋っぽいサイト」ではなく、
pizza GANGらしいサイトに近づいてった。

Pizza GANGのデザインを作成するで！

さらに今回は、画像生成AIもかなり使った。
使ったのはMedJourneyやで。

架空のピザ屋やのに、
素材が揃ってくると「あれ？この店渋谷にあったよな？」とか錯覚する。

作ってる最中にめちゃくちゃ腹減ったもん。

ピザの画像を見て、店内の雰囲気を作って、
メニューっぽい世界観を考えていると、
「これ、ほんまに行ってみたいな」
と思うくらいには、自分の中でリアルになっていった。

最近邪道と言われがちなパイナップル乗ってるピザにハマってます。

今回やってみて一番感じたのは、
AIでHPを作るときに大事なのは、いきなりコードを書かせない。
ということやな。

誰に向けたサイトなのか。
どんな雰囲気にしたいのか。
何をやらないのか。

ここを決めてからClaude Codeに渡すと、
完成物の説得力が全然変わる。

AIは「いい感じにして」と丸投げするより、
こちらが言語化した世界観を形にしてくれる相棒やと改めて感じたわ。

実績ゼロでも、架空案件を本気で作れば、ただの練習ではなく作品になる。

今回のpizza GANG制作で、それをかなり実感した。

実際に作ったサイトはこれやでー。

言い訳するわけちゃうけど、７割の出来で公開してるから、スマホ表示はどうかまだ試してない。

甘めで評価してやー。

こういう残りの３割をクライアントと詰めていくんやろな。

まだ駆け出しやけど、こういう制作物を積み重ねながら、自分のポートフォリオを育てていくわ。

ほな。