このブログがどうやって生まれたのか、を残しておこうと思います。
きっかけは「ツールを作りたい」という一点でした。公開できるブログを用意しようと思ったのは、その少し後のことです。
Claude Codeを使い始めたのは、ここから2週間ほど前のこと。 金融SEとして20年システム開発をしてきたとはいえ、AIコーディングアシスタントはほぼ初体験でした。それでも、ツールを作り、ブログを立ち上げ、記事まで書けてしまった——その体験記です。
きっかけは、投資シミュレーターを自作したこと
発端はインデックス投資の取崩しシミュレーターです。
あるYouTuberが、モンテカルロシミュレーションの考え方とGoogleスプレッドシートで作ったインターフェースを紹介されていました。動画を見て「自分もこういうツールが欲しい」と思ったのが直接のきっかけです。
その動画の内容をClaude Codeに読み込ませ、「こういう考え方で、こういう機能を持ったツールを作って」と伝えながら実装しました。コードは自分では1行も書いていません。出来上がったものを実際に触ってみて、「ここはこう動いてほしい」「これはバグっぽい」と気づいたことをClaude Codeに伝えて修正していく——その繰り返しで完成させました。
「この計算ロジックはどうなっている？」とClaude Codeに仕様を聞けばすぐ答えてくれるので、中身を理解しながら改善できるのもAIでのノーコード開発ならではの体験でした。
ツールが動くようになると、「これを公開したい、せっかくなら解説記事も書きたい」という気持ちが出てきました。それがこのブログの始まりです。
使った技術スタック
| 用途 | 採用したもの |
|---|---|
| AIアシスタント | Claude Code |
| 静的サイトジェネレーター | Hugo（PaperModテーマ） |
| ホスティング | Cloudflare Pages（無料枠） |
| ソースコード管理 | GitHub |
静的サイトジェネレーターについては、自分では決めていません。「個人ブログを作りたい。どういうサービス（選択肢）があるか調べて」とClaude Codeに相談したところ、「Claude Codeとの相性・管理のシンプルさ・無料ホスティングとの組み合わせを考えると、Hugoが良い」 というアドバイスをもらいました。テーマはPaperMod、ホスティングはCloudflare Pages（無料）という構成も、同じ会話の中で決まりましたが、正直、テーマなどこのブログをClaude Codeで書いてもらう中で知ったことも多いです。
自分がしたのは「ブログを作りたい」と伝えることだけで、技術選定はClaude Codeに任せた形です。
作業の流れ
0. チーム設計（最初の一手）
実は作業の最初は、ブログサーバのセットアップでも記事執筆でもありませんでした。
Claude Codeに「ブログ運営チームを作って」と指示することが、最初の一手でした。
ブログ執筆・SEO・ツール開発・資産管理など、やりたいことをタスク別の専門エージェントチームとして設計してもらいました。「記事を書いて」と言えばライターエージェントが動き、「デプロイして」と言えばインフラエージェントが動く——そういう仕組みをまず整えました。
この記事そのものも、その流れで作られています。Claude Codeがまず下書きを書き、筆者が実体験を補足・修正し、最後にClaude Codeが構成と表現をチェックする——という形です。
1. コンセプト設計
チームが整ったら、Claude Codeに「このブログのコンセプトを一緒に整理して。私の経歴・興味・収益化の方向性を踏まえて」と指示しました。
出てきた問いに答えながら整理されたのが、4つのコンテンツ柱です。
| コンテンツ柱 | 選んだ根拠 |
|---|---|
| 高配当株の実践記録 | リベシティ・リベ大を参考に高配当株投資を実践中。リアルな数字を公開できる |
| AI × 資産管理 | Claude Codeで投資ツールを自作している。体験を発信できる |
| 金融の仕組み解説 | 銀行・クレカシステムを担当者視点で解説できるブログは国内にほぼない |
| 金融ニュース深掘り | SE目線で金融ニュースを読み解く切り口は差別化になる |
特に「クレカの仕組みを内側から語れる人間が書くブログ」は、調べても見当たりませんでした。クレジットカード会社のシステムを約5年担当してきた経験が、差別化の核心だとClaude Codeにも整理してもらいました。
収益化の方針（AdSense + クレカアフィリエイト）もこの段階でドキュメントとして確定し、以後の作業はすべてこの方針に沿って進みました。
2. Hugo + PaperModのセットアップ
「ブログを開設したい。選択肢を整理して」とClaude Codeに相談したところ、複数の構成案を提示してくれました。その中からHugo + PaperMod + Cloudflare Pagesを選んだところ、「では進めます」という感じで、セットアップが自動的に始まりました。
インストールコマンドの実行・テーマの設定ファイル記述・日本語環境の調整まで、Claude Codeが手順を示しながら自動で進めてくれました。自分がやったのは、コマンドをターミナルに貼り付けることだけです。「このオプションは何？」と聞けばその場で説明してくれるので、Hugo初心者でもつまずかずに進められました。 なお、Hugoとは「Markdownファイル（.md）を書くと、自動的にHTMLのWebサイトに変換してくれるツール」ということで、Claude Codeでブログを記載するとMarkdownファイルというテキストファイルができるのですが、それをブログの形にしてくれる変換ツールのようなイメージです。 テキストファイルを作成して、アップすればブログになるというのは、Claude Codeと相性が良いのだと思います。
3. 記事の執筆
「この記事を、こういう読者向けに、こういう構成で書いて」と指示するだけで、構成案・下書き・frontmatter（メタデータ）まで一式が出てきます。
自分の役割は、実体験を補足することと、事実と異なる部分を修正することだけです。「ここは実際こうだった」「この表現は違う」と伝えると即座に直してくれます。
また、細かいニュアンスについては、Markdownファイルをテキストエディタで開いて直接修正することもあります。その後、Claude Codeに構成をチェックしてもらって完成です。
4. Cloudflare Pagesへのデプロイ
「このブログをCloudflare Pagesにデプロイして、finlab-se.comで見られるようにして」と指示しました。
GitHubへのpush・Wrangler CLIを使ったデプロイ・カスタムドメイン設定まで、Claude Codeが手順を出しながら自動で進めてくれました。SSL証明書もCloudflareが自動発行するため、セキュリティ設定で詰まることもありませんでした。
そして、次回以降は、ブログのテキスト作成からサーバへのアップロードまで自動的にやってくれました。 また、途中でサムネイル画像を入れたいと思い、そちらもサイズ等を指示して入れるようにしました。
ハマったポイント3選
順調に見えましたが、実際には何度かつまずいています。
その1: 記事を書いたのに表示されない
最初の記事を書いてビルドしたとき、サイト上に何も表示されませんでした。
原因は日付のタイムゾーン問題でした。frontmatterに書いたdate: 2026-04-12がUTCで解釈されると、日本時間では「まだ未来の記事」として扱われ、デフォルトでは非表示になります。
hugo server --buildFutureフラグを付けることで確認できるようになりました。本番ビルドでも同様のフラグを付けるか、日付に時刻とタイムゾーンを明示することで解決しました。
その2: Cloudflare PagesとGitHubの認証がループする
CloudflareのダッシュボードからGitHubのOAuth連携を試みたところ、認証画面がループして先に進めなくなりました。
解決策はWrangler CLI（Cloudflareの公式CLIツール）を使った直接デプロイです。ブラウザ上の連携をあきらめ、ターミナルからnpx wrangler pages deployでデプロイする方法に切り替えました。CLIからの操作は素直に動き、以降はこちらを使っています。
その3: Wranglerの認証でポートが使用中になる
Wranglerの認証コマンドを実行すると「ポート8976が使用中」というエラーが出ました。
前回の認証プロセスが残っていたためです。Windowsのタスクマネージャーで該当プロセスを強制終了し、再実行することで解決しました。
実は、これらの問題のほとんどはClaude Codeが自動で検知・解決してくれたものです。私自身が意識して気づいたのは1つだけで、「おかしいかも」と伝えたらあとはClaude Codeが全部対処してくれました。
金融SEとして感じたこと
Claude Codeを始めて2週間で、ツール・ブログ・記事がほぼ同時に完成しました。
仕事でシステム開発をしていると、「欲しいものを要件定義して、設計して、実装する」という流れに慣れています。Claude Codeを使った個人開発は、この流れと本質的に同じでした。違いは自分がユーザーであり、決裁者でもあるという点、そしてAIコーディング自体はほぼ初体験だったという点です。
それでも「こうしたい」という意図さえ伝えられれば形にできる——これは使い始めの自分にとって、想像以上の体験でした。
「この機能はいらない、もっとシンプルにしたい」「この表現は読者に伝わりにくい」という判断を、誰かに通すことなく即座に反映できます。仕事の開発では当然存在する調整コストがゼロです。
コードを1行も書かずにツールが動く——「アイデアから動くものが数時間で出来上がる」スピード感は、業務のシステム開発では体験しにくいものでした。
記事執筆・ツール改修・設定変更を同じ画面で並行して進められる点も、個人開発の体験として新鮮でした。
これからやること
現在の記事数は数本です。まずはAdSense審査に向けて20記事を目標にコンテンツを積み上げていきます。
並行して、以下も進めていく予定です。
- クレカアフィリエイトの導入
- シミュレーターの機能改善（高配当株の配当再投資シミュレーションなど）
- ポートフォリオの実績公開
「自分が欲しいツールを作り、それを使いながら投資を続ける」というサイクルを、このブログで記録していきます。
シミュレーターはこちらから無料で使えます。自分の条件を入れて、一度動かしてみてください。