結論：プログラマーじゃない私が、ブログを半日で立ち上げました。
- かかったお金：年1,500円
- 自分で書いたコードの行数：0行
- 全部やってくれた相棒：AI「Claude Code」
この記事は、そのときの記録です。
何をどんな順番でやったのか。詰まったポイントも全部書きます。これから個人サイトを作ってみたい人の参考になればうれしいです。
このサイトのこと
このサイトはもともと「東京23区の家賃推移を見せるサイト」でした。
そこから「Claude Code で作ったものを記録するブログ」に方向転換しました。それが、今読んでいるサイトです。
下に書いている流れは、最初に家賃サイトを立ち上げたときの記録がベースです。作り直しで気づいたことも足しています。
かかった時間とお金
| 項目 | 値 |
|---|---|
| 全部の実時間 | 約半日 |
| 自分でやった作業 | 30〜45分 |
| 住所代（ドメイン） | 年1,500円 |
| 置き場所代（サーバー） | 0円（無料プラン） |
何を作ったか
ざっくり言うと「自分専用のホームページ」です。
具体的にはこんな要素が入っています。
- 自分だけのアドレス：
yachin-tokyo.com - 置き場所（サーバー）：Cloudflare の無料プラン
- 検索エンジンへの登録：Google と Bing に「あるよ」と知らせる
- 検索結果で目立つ表示：質問と回答が直接出る、サムネ画像が出る
- シェアされたときのサムネ画像：X や LINE で大きく出るやつ
- 更新を1クリックで終わらせる仕組み
「個人ブログを公開する」要素は、ほぼ全部入っています。
使った道具
| 何 | 採用したもの | わかりやすく言うと |
|---|---|---|
| 置き場所 | Cloudflare Workers | 無料のサーバー |
| 住所（ドメイン） | Cloudflare Registrar | 1番安いお店 |
| サイト本体 | Python | 文章から自動でホームページを作る |
| グラフ表示 | Chart.js | 折れ線グラフを描く機能 |
| サムネ画像 | Pillow | Pythonで画像を作る道具 |
| 開発作業 | Claude Code | プログラマーを雇う代わり |
これ全部、Claude Code に「こういうの作って」と頼みました。
私がやったのは「方向性を決める」「クレジットカードで支払う」「『ここ違うよ』と伝える」の3つだけです。
全体の流れ（8ステップ）
- 何を作るかを Claude Code と話して決める
- Cloudflare に登録 → 住所を年1,500円で買う（10分）
- 置き場所を作って、最初の公開（5分）
- 自分の住所と置き場所をつなげる（5分）
- 検索エンジン用の情報を整える（30分）
- Google に登録 + サイト一覧の送信（15分）
- Bing にも登録（5分）
- 検索で目立つ表示の警告を全部つぶす
7と8だけ少し詰まりました。次に詳しく書きます。
詰まったポイント4つ
1. アドレスの末尾「.html」が消える問題
yachin-tokyo.com/aaa.html でアクセスすると、自動で .html が消されます。
これ自体は問題ありません。
困るのはサイト内のリンクや「正式アドレス」設定が .html 付きのままのとき。検索エンジンが2つのアドレスを別物と判断する可能性があります。
→ サイト内の全アドレスを「.html なし」に統一して解決しました。
2. 検索で目立つ表示の警告（5件）
Google には「リッチリザルト」という機能があります。検索結果に画像やQ&Aが直接出る、あれです。
設定が正しいかチェックする無料ツールがあります。試したら警告が5件出ました。
中身は2種類でした。
- 公開日のフォーマット不足：「2026-05-05」だけだとダメ
- 正解は「2026-05-05T12:00:00+09:00」（時刻と国の時差も含める）
- 著者のホームページアドレスが書かれていない
直したら全部緑（OK）になりました。
3. Bing の自動取り込みが「サイトが見つからない」
Bing には「Google での登録を引き継ぐ」便利機能があります。
しかし、Google で登録したばかりだと Bing 側で見えないことがあるみたいです。
→ Google と同じやり方（ページの裏側に目印を貼る）で直接登録したら、1分で完了しました。
4. データを見ずに文章を書いてしまった
これが一番しょうもない失敗です。
「家賃が上がる中、部屋の広さは縮小しているはず」と決めつけて文章を書きました。
実際のデータを見たら、逆に広くなっていました。
→ AI に頼んだ後も、内容のチェックは自分の仕事です。
AI と自分の役割分担
Claude Code に丸投げしたこと
- HTML / CSS のコードを書く
- データ処理プログラム（Python）を書く
- サーバーの設定ファイルを書く
- 検索エンジン用の機械が読む情報を作る
- サムネ画像を作るプログラムを書く
- 記事の下書きを書く
- 困ったときの解決策を考える
自分でやったこと
- 何を作るか決める（方向性）
- クレジットカード入力（お金の操作はAIに任せられません）
- ブラウザでのボタン操作
- 文章のチェック（事実の確認）
人間がやるのは「決断」と「物理的なクリック」だけ、という感じでした。
学んだ7つのこと
- 無料の
〇〇.workers.devでも普通にサイトは動く - 住所を買うなら Cloudflare 自社のお店が一番ラク
- アドレスの末尾「.html」は外して統一する
- 公開日は時刻と時差まで含めて書く
- Bing の登録は手動の方が確実
- サムネ画像はプログラムで自動生成できる
- AI に任せても、内容のチェックは自分の仕事
今後
このブログには「Claude Code でこんなの作りました」を順番に書いていきます。
次回は、前テーマだった「東京23区の家賃推移を見せるサイト」の作り方を詳しく書きます。
ブログ自体も Claude Code に作ってもらいました。
自分で1行もコードを書いていないのに、本格的なサイトを作れる時代です。
最後に:自分の思い
正直、ここを書くのは恥ずかしいです。
でも、書きます。「読者は記事じゃなく、その向こうにいる人を見る」と知ったからです。
このブログには、Claude Code で作ったものを順番に書きます。成功も失敗も、恥ずかしい思い込みミスも全部です。
伝えたいことは1つだけ。
失敗しても、大丈夫です。
エラーで途方に暮れた日も、事実と逆の文章を公開後に直した日もありました。それでも半日で、事業になりそうな何かが形になりました。
「自分には無理」と思っているあなたの、最初の一歩のきっかけになれば、うれしいです。
この記事も Claude Code に書いてもらいました。「結論先行・一文60文字以内・数字を使う・誰向けか明確・自分の思いで締める」の5点を意識した版です。