メインコンテンツへスキップストーリー
大学時代あこがれ
コードを書いている人がかっこいいと思った。AIがコードを書くなんて想像もしなかった。プログラミングは自分には遠い世界だった。
ChatGPT 登場すげぇー！
ChatGPT に初めて触れて「すげぇー！」と感動した。ブログのライターとして使い始めた。仕組みなんて何も知らなかった。
生成AI実験可能性の発見
画像・動画・音楽の生成 AI に次々と触れた。スキルがなくても「やりたかったこと」を形にできる——かっこいい自分にたどり着ける道が見えた瞬間だった。
2025婚活スタート
アプリで始めた婚活。何度もうまくいかず、振り返りをブログに書き始めた。
2026.01ブログ構築
技術の進歩で、あの頃あこがれたことが自分にもできるようになっていた。Next.js + Supabase でブログを立ち上げ、VSCode の中だけで記事を書いて公開する仕組みを作った。
2026.02AI と協働開始
Claude Code（白蛇カズハ）と Gemini API を導入。小説で生まれたキャラの名を開発の相棒に引き継ぎ、設計・レビュー・画像生成・検索まで AI と一緒に作る開発スタイルが定着。
現在実験と記録
毎日の作業をログに残し、AI 初心者でも再現できる手順に変換して公開中。「あの頃の自分」でも追いかけられる記録を目指している。
スキル
用語にカーソルを合わせると、初心者向けの解説が表示されます。
Frontend
“最初のページが表示されたとき、白い画面すら嬉しかった”
Next.jsReactベースのWeb開発フレームワークウェブサイトの骨組みを素早く建てる設計図セット— ブログ本体のフロントエンド構築
Astro静的サイト生成に特化したフレームワーク必要な材料だけで軽く焼き上げるオーブン。余計なものを入れないから速い— ポートフォリオサイトを静的生成
ReactUIを部品化して組み立てるJSライブラリレゴブロック。小さな部品を組み合わせて画面を作る— クライアントコンポーネントで検索UI等を実装
TypeScriptJavaScriptに型安全性を追加した言語レシピに分量を必ず書くルール。『適量』を禁止して失敗を防ぐ— 全プロジェクトで型安全に開発
Tailwind CSSユーティリティファーストのCSSフレームワーク洋服の既製パーツ棚。襟・袖・丈を組み合わせるだけでコーデが完成— v4 でデザインシステムを構築
HTML / CSSウェブページの構造と装飾を定義する言語家の間取り図(HTML)と内装コーディネート(CSS)— CSS変数ベースのWarmテーマを設計
Backend / Infra
“記事を安全に管理し、検索できる仕組みが必要だった”
Supabase認証・DB・ストレージを備えたBaaSデータの金庫番。記事もユーザー情報も安全に管理するクラウドの番人— 記事管理・認証・PV分析のバックエンド
PostgreSQL高機能なオープンソースRDB超整理好きな図書館司書。どんな質問にも棚から正確に本を出してくる— pgvectorでセマンティック検索を実装
Vercelフロントエンド特化のホスティングサービスコードを置くだけで世界中に届けてくれる宅配便— ブログとポートフォリオのホスティング
Node.jsサーバーサイドJavaScript実行環境ブラウザの外でも動くJavaScriptの万能作業台— CLI スクリプト群の実行環境
REST APIHTTPベースのAPI設計パターンお店の注文カウンター。決まった形式でお願いすると、ちゃんと返してくれる— 検索・PV計測のAPIルートを設計
AI / Automation
“全部ひとりは無理だと悟った日に、AIに『手伝って』と言った”
Claude CodeAnthropicのAIコーディングアシスタント設計図を描いてレビューもしてくれる、24時間稼働の相棒エンジニア— 設計・レビュー・実装の自動化
Gemini APIGoogleのマルチモーダルAI API文章も画像も理解して生成できる、多才なアシスタント— 画像生成・SVG生成・エンベディング
pgvectorPostgreSQLのベクトル検索拡張言葉の意味を数字に変えて、似た話題を見つける翻訳機— 768次元ベクトルで意味検索を実現
Semantic Searchキーワードではなく意味で検索する技術『赤い果物』で検索してリンゴもイチゴも見つかる、空気を読む検索— ブログ記事のAI意味検索を構築
Shell ScriptsOSコマンドを自動実行するスクリプト毎朝のルーティンをメモ化した手順書。ボタン一つで全部やってくれる— 記事投稿・画像生成・日記クロージングを自動化
プロジェクト: my-blog
Before: 手作業で記事を書いて手動デプロイ
After: AIと協働で執筆・画像生成・公開を自動化
- ✓セマンティック検索 — Gemini Embedding + pgvector で意味検索
- ✓PV アナリティクス — 自前の計測 + 管理画面での統計表示
- ✓テーマ切替 — Light / Warm / Night の3テーマ
- ✓自動画像生成 — BEFORE/AFTER SVG + eyecatch PNG を CLI で生成
- ✓KPI レポート — 記事から自動集計し、ホームで可視化
- ✓月別投稿サマリー — バッジ表示で投稿ペースを可視化
ワークフロー
VSCode の中だけで、執筆から公開まですべて完結します。
📝Step 1
記事の執筆
Markdown ファイルを VSCode で直接編集
🤖Step 2
AI レビュー
Claude Code が設計・構成・表現をチェック
🎨Step 3
画像生成
Gemini API で SVG 挿入図 + eyecatch を自動生成
🚀Step 4
公開
CLI スクリプトで Supabase に upsert → Vercel に自動デプロイ
実験ダッシュボード
PV・売上・AI 時短効果をすべて公開しています。盛った数字は一切ありません。
ホームページの実験ダッシュボードでは、KPI レポート記事から自動集計したリアルタイムの数値を表示しています。