🤖

AIで会社HPを半年運用してみた——イベント会場でも記事が書ける開発体験

に公開
2026/04/20
AI
GitHub
Astro
Claude
ひとり開発
idea

1人アドベントカレンダー2025 20日目。

今日は、ひとり会社の運営ネタです。会社のホームページをAI（Claude）と一緒に半年運用してきた話を書きます。

きっかけ：「HP作らなきゃ」の焦り

2025年7月、前々からの悩みがありました。

「会社設立から2年近く経つのに、ちゃんとしたHPがない」

特に外向きに活動を広告する必要もなかったので、会社設立のときになくてもパスできた関係から後回しになっていたHPですが、
システムエンジニアをやっているのにHPすらないのもなんかなぁ…。とずっと思っていました。

本業のシステム開発案件や、ハンドメイドのイベントや制作に追われて、HPを作成・整備する時間を捻出することを後回しに——。

そこで試してみたのが、AIとの協働開発でした。

最初の指示：雑でいい

夫からは早く始めたほうがいいと言われていたClaude CodeやCursor。起動して、最初に出した指示はこんな感じでした。

Wells合同会社のホームページを作ってください。
- フレームワークはAstroで作りたい
- 言語は、TypeScript。
- CSSは、TailwindCSSで管理する
- コンテンツ管理は Astro Content Collectionsで、マークダウン処理も使いたい。
- レスポンシブデザインは必須

これだけで始めました。

そして「より良いHPをつくるために、必要な情報や不足している情報は遠慮なく聞いて欲しい。私も精一杯情報を伝えるので忖度なく本来の実力を発揮して欲しい」と指示を送ると、
Claudeが「もう少し情報をください」と聞いてきて、会話しながら要件を固めていきました。対話が噛み合い始めた感じです。

※当時は4系の初期を使っていたはずで、”本気を出して"というと本来の力を発揮する、というような内容（だったと思う）が書かれていたので、上記のプロンプトで指示をだしました。
都度ベストプラクティスはかわるのでぜひ、Claude:プロンプトのベストプラクティスは、目を通して活用ください。

  • 「カラーパレットはどんな雰囲気がいいですか？」
  • 「事業内容、もう少し詳しく教えてください」
  • 「代表ページは別に作りますか？」

自分でも言語化できていなかった「こういうサイトにしたい」が、対話の中で見えてきた感覚がありました。

数時間でここまでできてしまった！

その日のGitログを見返すと、驚きの密度でした。

17:45 Wells合同会社ホームページの初期実装
18:41 商品画像スライドショー機能とデザイン改善
18:58 ブランディング強化とデザイン統一
19:00 プロジェクトドキュメンテーション追加
19:04 SNSリンクをクリック可能に変更
19:37 Wells合同会社ホームページ完全リニューアル
19:44 子供向けワークショップ実績とイベント企画事業を追加
20:01 トップページをビジネス中心に再構成、代表専用ページを分離
20:37 代表社員の経歴を技術内容中心に更新、最新実績を追加
21:35 定款条文の直接記載を顧客向けの魅力的な表現に変更
23:11 ヒーロー背景画像変更と統計情報の矛盾解決

※ 隠す必要もないので、GitHubにclaude.mdとセットでPublicで見える領域に置いてます。よかったら見てください。
このおかげで、GitHub PagesへGitHub Actionsを使っての自動ビルドをそのまま無料でページの公開までできてしまっています！

約6時間で、土台として十分な完成度のHPができた。

👉 実際のHP: https://wells.jp/

もちろん、自分がずっとPCの前にいたわけではありません。途中でご飯食べたり、他の作業したりしながら、「次はここ直して」「この表現おかしいから変えて」と指示を出していただけでほぼほぼつくれちゃいました！

時には、「それはダサいな」なんていいながら。

AIに指示を出しながらコーディングする「Vibe Coding」で作った感じです。
ただし、あまりローカルでの起動等は得意ではないみたいで、npm run devのコマンド等は、自分でターミナル実行して動かしました。

CLAUDE.mdという仕組み

このプロジェクトで一番よかったのは、CLAUDE.mdというファイルを作ったことです。

これは「プロジェクトの取扱説明書」みたいなもので、以下の情報をまとめています。

  • 会社情報（名前、設立日、事業内容）
  • デザインルール（カラーパレット、フォント）
  • 表現ガイドライン（「コンサルティング」は使わず「技術サポート」など）
  • 開発コマンド（npm run devでポート9000）
### 表現ガイドライン
- **年数表記**: 「17年」などの具体的年数は避け、「豊富な」を使用
- **コンサルティング**: 使わず、「技術サポート」「お手伝い」などを使用
- **ご相談**: 「お問い合わせ」に統一

これがあると、毎回説明しなくても、AIが文脈を理解してくれるのです。

たとえば「新しい記事書いて」と言うだけで、会社のトーンに合った文章が出てくる。いちいち「うちは一人会社で〜」「ハンドメイドもやってて〜」と説明しなくても良くなりました。

イベント会場で記事を書く

ここからが本題。AIとHP運用して一番よかったことの話です。

状況

ハンドメイドイベントに出展すると、こんな流れになります。

  1. 朝から会場入り、設営
  2. 日中は接客
  3. 夕方に撤収
  4. 帰宅後は疲れてバタンキュー

「イベントレポート書こう」と思っても、帰ってからは疲れちゃってるし、終わっちゃっていることなのでやる気もでない…。

でも、イベント中って意外と空き時間があるんです。

  • お客さんが途切れた数十分
  • 撤収後、電車を待つ時間

やったこと

イベント中の空き時間でPCを開き、Claude Codeにこんな感じで指示を出します。

今日、竹芝のBamboo Grass Marketに出店しました。
お知らせ記事を書いてください。

- 日時: 2025年11月1日
- 場所: アトレ竹芝
- 人気だった商品: ペット用スヌード
- 印象的だったこと: スヌードを腹巻きとして使いたいというお客さん

これだけ伝えると、CLAUDE.mdを参照して、サイトのトーンに合った記事を生成してくれます。

「写真欲しいのある？」とか聞くと、『会場の雰囲気やブースの雰囲気のわかる写真を撮ってください！』『XXXが人気だったんですね、ぜひアイテムの写真も撮ってください』などと。写真の依頼が。

写真をAirDropでPCに送り、ファイルのパスを伝えれば、HP内に適切にサイズ調整してpng形式にしてマークダウンの画像タグも入れてくれる——。

あとは「もうちょっとカジュアルに」「この部分削って」と微調整して、git pushするだけでいけます！

プロンプトにイベントのHPなんかも伝えればリンクも入れてくれるし、簡単ですね。

イベントの最中に、もう記事が公開されている。

GitHub Actionsにデプロイのパイプラインも入れているので、mainブランチにpushするだけで公開完了。

時々、情報を嘘つくことがあるのですが（ハルシネーションが起こる）、それは公開前に自分で読み直して修正すればいいです。
逆に私が修正したことで発生した誤字脱字みたいな凡ミスや、文章が冗長になってしまった部分は「記事をレビューして」と言ってしまえば直してくれます。

実際のやり取り例

2025年11月1日、竹芝イベント後のやり取りを再現すると：

私: 「今日の竹芝イベントの記事書いて。スヌードが人気だった。」

Claude: 「イベントの詳細を教えてください。日時、場所、どんな商品を出しましたか？」

私: 「11/1、アトレ竹芝。ペット用スヌードと人用スヌードのおそろいコーデが好評。あと、スヌードを腹巻きに使いたいって人がいて面白かった」

Claude: 「記事を作成しました。『竹芝「Bamboo Grass Market」に出店しました』というタイトルで、以下の構成にしています...」

このやり取り、イベント中の人が少ないタイミングでの10分くらいで終わりました。

半年間の運用記録

Gitのコミットログを数えてみました。

期間 主な作業
2025年7月 初期構築、デザイン調整（1日で基本完成）
2025年8月〜9月 イベント記事追加（根津、あわい祭）
2025年10月 技術書博覧会記事、SEO対策
2025年11月 複数イベント記事、アドベントカレンダー準備
2025年12月 アドベントカレンダー連動更新

約半年で70以上のコミット。

これを一人でやったと思うと、なかなかの量かなと思います（我ながらちゃんとHP運用できているほうだと思います）。
でも、実感としては「そんなに頑張った覚えがない」感じなんですよね。

うまくいったポイント

1. CLAUDE.mdで文脈を共有

毎回説明しなくていいのが楽でした。「新しい記事書いて」で通じてます。

2. Gitで履歴が残る

「前に何書いたっけ」がすぐ分かるので、"Gitの履歴見て考えて"みたいな雑な指示もできました。過去の記事を参照して書いてもらえるのはよかったな、と思います。

また、記事同士のリンクも提案してくれるので楽でした。

3. マークダウンベース

Astro + Content Collectionsの構成が、AI との相性抜群。複雑なCMSより、ファイルベースのほうがやりやすいですね。

エンジニアの場合、GUIでわざわざ投入するより、mdファイルを取り扱えるのが楽かもしれません。

4. 完璧を求めない

最初から100点を目指さなかったのも更新につながったのかも。

「とりあえず公開して、あとで直す」を実現できました。

注意点・限界

画像は自分で用意

AIは文章は書けるけど、写真は撮れないので、イベントの写真は自分で撮って、ファイル名を伝える必要はありました。

この点は今のところ困っていないので、当分はClaude Codeで運用することになると思います。

ニュアンスの調整は必要

「もうちょっとカジュアルに」「この表現は違う」という微調整は人間の仕事になります。

大丈夫だろうと思って雑にしかレビューしないとあとから「うーん…」みたいな書き方になってることもありました。

あと、売り上げ報告なんかも次のイベントの整理のために赤裸々にClaude Codeに伝えているんですが、値段や売り上げをわざわざ書こうとしちゃうので消してもらったりしました。

Git操作は必要

git add, git commit, git push は自分でやる（Claude Codeも実行できるけど基本は私がしています）。

ひとり会社×AIの可能性

ひとり会社って、「なんでも自分でやらなきゃいけない」と思いがちです。

  • 開発
  • 営業
  • 経理
  • HP更新
  • SNS運用
  • etc...

でも、AIを「もう一人のチームメンバー」として捉えると、景色が変わります。

**「一人だけど、二人体制」**みたいな感覚。

特にHP運用みたいな「やらなきゃいけないけど、本業じゃない」タスクを任せられるのは大きいな、と思いました。

おわりに

「AIでHP運用」と聞くと、なんか大げさに聞こえるかもしれません。

でも実態は、**「ちょっと賢いアシスタントとチャットしながら更新してる」**くらいの感覚です。
一緒に伴走してくれる感じに近いですね。

"やりたい"と思ったことを、心理的ハードルなしでシームレスに成果に繋げるための後押しをしてくれるツール・パートナーだと思います。

イベント会場で、空き時間にPCやスマホからポチポチ。帰る頃には記事が公開されてる——。

この体験は、1年前の自分には想像できなかったと思います。

正直、もっと早くにClaude Code使っておけばよかった！と思います。

ひとり会社で「HP更新できてない...」と悩んでいる方、試してみる価値はあると思います。
（もちろん、ご協力もさせていただきますね！（CM））

明日は「Upsiderで資金管理」について書く予定です。

📚 1人アドベントカレンダー2025 全記事一覧

megusunu

🐦 X (@megusunu)
🧶 megusunuLab（ハンドメイド）
🏢 Wells合同会社

GitHubで編集を提案

Discussion