絵本LP
絵本のようにめくって読む体験型ランディングページ。AI自動化コンサルの世界観をストーリーで伝える。
LP制作体験型UINext.js
制作裏側を見る →概要
何を作ったか
大谷選手の試合を3年追い続けてきた経験から生まれた完全個人プロジェクト。日中仕事をしながら夜に録画で試合を見る際、ネタバレを避けながらX(Twitter)の反応や分析も楽しみたいという自分自身の課題を解決するために作りました。
目的
なぜ作ったか・誰向けか
何を作ったか
大谷翔平の打席ログ可視化 + ネタバレ回避X反応閲覧サイト
誰向けか
大谷翔平ファン・MLB録画視聴派のファン
種別
個人プロジェクト / 趣味
工数
どのくらいの時間がかかったか
合計: 約10時間
MLB API調査・要件整理
約1時間
XのAPI課題調査・代替設計
約3時間
Claude Code実装
約4時間
テスト・修正
約2時間
使用ツール・技術
どんなツールを使ったか
Claude CodeChatGPTMLB Stats APIOpen CrawlNext.jsVercel
実装ステップ
どんな順序で作ったか
1
MLB Stats APIを調査・実装
MLB公式のAPIはシンプルな作りで扱いやすく、打席データの取得はスムーズに実装できました。
2
XのAPI代替手段を設計
公式XのAPIは高額で公開サイトには使えないため、自前PCで動かすOpen CrawlでツイートURLを収集し、埋め込み表示する方式を設計しました。
3
Claude Codeで実装・公開
ChatGPTに実装プロンプトを生成してもらいClaude Codeで実装。Vercelで公開し、X公式アカウントでも発信を続けています。
苦労した点
問題と解決策
課題
XのAPIが高額で、公開サイトへの導入が現実的でない
解決策
自前PCで動かすOpen CrawlにツイートURLを収集させ、埋め込み表示する方式に変更。X規約に反しないやり方で実装を実現しました。Open CrawlのAPIコスト問題は今後の課題として残っています。
学び・再利用できる知見
次に活かせること
- ✓良いプロダクトはニーズの把握が大切。自分が当事者だと要件が明確になり、開発がスムーズに進む
- ✓外部APIのコスト・制約は事前に調査が必須。特にX APIは想定以上に高額
- ✓「まず動くものを作って公開する」が最優先。残課題は後から解決できる
関連プロジェクト
他の制作裏側も見てみましょう