ラーメン屋が、Claude Codeでワイルドエリア仙台の情報サイトを作った話

厨房自作アプリ

ポケモンGOのイベント「ワイルドエリア仙台」の情報サイトを、Claude Codeで作りました。サイト制作の入門編やり方をまとめます。実際に作ったラーメン屋おっさんの記録です。

作ったサイトはこちら。
https://jikaseimenkirinji.com/pokemon-wildarea-sendai.html
https://jikaseimenkirinji.com/pokemon-wildarea-sendai-matome.html

載せた内容は、イベント情報のまとめ、天気、交通アクセス、スタンプラリー、3Dマップ、荷物預かり、英語版などです。

Claude Codeとは

パソコンの中のファイルを読んだり、プログラムを書いたり、実行したりしてくれるAIです。ふつうのチャットAIは、答えを文章で返すだけ。Claude Codeは、サイトのファイルそのものを作って、スマホから指示して直してくれます。

1. 「何をやるか」を決める

いちばん大事なのはここです。いきなり「サイトを作って」と頼んでも、思ったものはできません。結局何をやるか…この一点で七割が決まります。地場発信の価値に乗っかったた今回、たまたまポケモンワイルドエリア仙台だったことになります。

今回のゴールは、「イベントに行く人が、必要な情報をまとめて見られるサイト」。
正直に言うと、裏にはGoogle広告料、荷物預かりの紹介料、ウーバータクシーの紹介料もありますが、まずはサイトの中身に集中しました。

載せる項目を、先に紙に書き出します。

  • 開催日時
  • 会場へのアクセス
  • 天気と服装
  • 地下鉄、バス、タクシー
  • スタンプラリー
  • 荷物預かり
  • 公式発表と更新履歴
  • 3Dマップ
  • 英語版

2. 最初は「構成案」だけ出してもらう

いきなり作らせません。まず、こう頼みます。

ポケモンGOワイルドエリア仙台のイベント情報サイトを作りたいです。スマホで見やすくして、HTML、CSS、JavaScriptで作ります。まず、サイト全体の構成案を出してください。まだファイルは変更しないでください。

案を読んで、おかしなところを直してから、作らせます。

3. 一度に全部作らせない

たくさん頼むと、間違いを直すのが大変になります。小分けにします。

  1. トップページだけ作る
  2. 天気と服装のページを作る
  3. アクセスのページを作る
  4. トップから各ページへのリンクを付ける

作る → 見て確認する → 次へ。この繰り返しです。

4. 情報は、必ず確認する

情報サイトで、いちばん気をつけたところです。
私はポケモンをほとんど知りません。だから、知ったかぶりすらもできません笑

  • 調べる先は、公式サイト、気象庁、仙台市交通局、仙台市観光局、JR。常連さんから聞いた話も、事実ベース、出どころを確認→AIにURLをバンバン食わせます。
  • AIに書かせた文章を、そのまま事実にしません。
  • 確認できないことは、「未発表」「確認できない」「個人の報告」と書きます。

具体的にはこうです。

  • 天気: 気象庁が何時に発表したかを付ける。
  • 地下鉄: 交通局が言っているのは「混雑の見込み」まで。公式の発表と自分の言葉は、分けて書く。

5. ファイル更新は、プログラムにやらせる

イベントの情報は変わります。天気も変わります。
日本語版と英語版で10ページ以上あるサイトを、手で直すと必ずミスが出ます。Pythonのプログラム自動更新スクリプトを作ってもらいました。たとえば

11月8日の最高気温を11℃から12℃に変更してください。日本語版、英語版、画像、SNS投稿文に同じ数字があれば、すべて確認してください。更新前にバックアップを取り、変更後に古い数字が残っていないか検索してください。

天気は、気象庁のデータを自動で取ってくるプログラムも作りました。数字を手で打ち込まなくて済みます。ここがClaudCodeのヤバさの所以。

6. 間違えたら止まる仕組みを作る

更新プログラムには、次の決まりを入れました。

  • 直す前に、バックアップを取る。
  • 直す文章が「ちょうど1か所」でなければ、直さずに警告を出す。
  • 直した場所に目印を付ける。
  • やったことをREADMEに書く。
  • 2回実行しても壊れない。

AIに「間違えないで」と頼むだけでは足りません。間違えたときに止まる仕組みを作っておくと、安心して更新できますが、AIも人間も間違えます。パソコンはスマホの指示で動いています。

7. 作ったあとの確認がいちばん大事

Claude Codeに、確認も頼めます。音響機器のルーパーのように半永久的に頼めますが人間がチェックした方が早いですが、そこは選択できます。

  • スマホの幅で、表示が崩れていないか(これが多数)
  • リンク切れがないか
  • 日本語版と英語版で、数字が同じか
  • 古い日付が残っていないか

ただし、AIの確認だけでは完成にしません。最後は、自分のスマホで見ます。
今回も、画像の文字がはみ出したり、古い数字が別のページに残ったりしました。作るより、確認のほうが大事でした。スマホで指示→スマホで確認→パソコンのファイルの更新状況を確認→アップ

8. 手順はSKILL.mdに

やった作業は、READMEに記録。
さらに、何度も使う手順は「SKILL.md」という手順書にまとめる

  • 一次情報を確認する
  • 出典と発表日時を付ける
  • 確認できないことは断定しない
  • 更新前にバックアップを取る
  • 更新後に古い数字を検索する
  • スマホで表示を確認する

これを残しておけば、次のイベントでも、一から説明しなくて済みます。
(ちなみに、フォルダのルールを書く「CLAUDE.md」というファイルもあります。いつも守るルールはCLAUDE.md、繰り返す作業の手順はSKILL.md、と使い分けると便利でした。)

9. 公開する

HTML、CSS、JavaScriptのサイトは、サーバーにドラックすれば公開できます。うちのようにWordPressを使っていても、独立したHTMLページを置けます。

公開したら、スマホで必ず見ます。

  • リンクは正しいか
  • 画像は出るか
  • 日本語版と英語版のリンクは正しく飛ぶか

そして、情報が変わったら更新します。公開してからが本番でした。作業の半分以上にスマホ。

10. アクセスは増えた。でも、SNSのフォロワーは微減。

サイトのアクセスは、爆増しました。
でも、SNSのフォロワーは微減。ラーメン屋のアカウントで、ポケモンの情報を毎日投稿したからかもしれません。ただし、これは推測です。

アクセスが増えた理由も、まだ分かりません。

  • 事実ベースの書き方がよかったのか
  • ポケモンのプレイ画面とかの埋め込みが皆無
  • そもそもイベントの検索が多かったのか

次は、SNSの投稿ごとにUTMを付けて、検索から来た人とSNSから来た人を分けることも可能。今のところ、まだ1回の実験です。

まとめ

ポケモンを知らないラーメン屋でも、Claude Codeでイベント情報サイトを作れました。プログラミングができなくても大丈夫でした。

  1. 作りたいものを箇条書きにする
  2. 一つずつ作る
  3. 確認する
  4. 間違いを直す
  5. 更新の仕組みを作る
  6. これを繰り返す

Claude Codeは、サイトを作る道具であり、作りながら勝手に学習、覚える道具でもありました。何かサイトを作ってみたい人の参考になればうれしく思います。

参考サイト
https://jikaseimenkirinji.com/wildarea3d.html
https://jikaseimenkirinji.com/pokemon-wildarea-sendai-matome.html

Views: 45