はじめに
先週、無謀な挑戦をしました。
「Claude Codeだけで、OKR管理SaaSを1週間で完成させる」
結果から言うと、**週間使用量98%**でギリギリ完成。
この記事では、開発中に得た技術的な気づきやハマりポイントを共有します。
作ったもの
Founders Direct Cockpit（FDC）
OKRで掲げた戦略を、現場のタスクまで一気通貫で落とし込む目標達成プラットフォームです。
- OKR管理（Objective / Key Results）
- Action Map（カンバン形式の戦術管理）
- TODO管理（4象限マトリクス）
- Google OAuth認証
- ワークスペース・権限管理
👉 https://app.foundersdirect.jp/
技術スタック
- Next.js 14 (App Router)
- TypeScript
- Prisma + PostgreSQL (Supabase)
- NextAuth.js (Google OAuth)
- Resend (メール送信)
- Vercel (ホスティング)
- Claude Code (開発パートナー)
技術的な気づき
1. App Routerでの環境変数の扱い
ハマったポイント： Resend のAPIキーをモジュールレベルで初期化したらビルドエラー
// ❌ ビルド時にエラー
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST(request: NextRequest) {
// ...
}
// ✅ 正解：ハンドラ内で初期化
export async function POST(request: NextRequest) {
const apiKey = process.env.RESEND_API_KEY;
if (!apiKey) {
return NextResponse.json({ error: 'メール設定が不正です' }, { status: 500 });
}
const resend = new Resend(apiKey);
// ...
}
App Routerはビルド時に静的解析を行うため、環境変数が存在しない状態でモジュールが評価されます。APIルートではランタイムで初期化するのが安全です。
2. Resend のドメイン設定
メール送信でResendを使いましたが、独自ドメインからの送信にはDNS設定が必要です。
必須レコード：
- DKIM: TXT レコード (resend._domainkey)
- SPF: MX レコード (send → feedback-smtp.ap-north...)
- SPF: TXT レコード (send → v=spf1 include:amazonses...)
任意：
- DMARC（到達率向上のため推奨）
Tips: 設定前のテストには onboarding@resend.dev を使えばDNS設定なしで動作確認できます。
3. スマホ対応のCSS設計
ハマったポイント： PCでは見えるログインボタンがスマホで消える
原因は display: none の範囲設定ミス。
/* ❌ ボタンも消えてしまう */
@media (max-width: 768px) {
.mainNav a {
display: none;
}
}
/* ✅ ボタン以外を非表示に */
@media (max-width: 768px) {
.mainNav a:not(.btn) {
display: none;
}
}
さらに、スマホではヘッダーを2行レイアウトに変更：
@media (max-width: 768px) {
.mainHeader .container {
flex-wrap: wrap;
height: auto;
}
.mainNav {
width: 100%;
justify-content: center;
margin-top: 8px;
}
}
4. NextAuth.js + Prisma でのユーザー初期化
新規ユーザー登録時に、デフォルトのワークスペースを自動作成する必要がありました。
// auth.ts の callbacks
callbacks: {
async signIn({ user, account }) {
// 新規ユーザーの場合、ワークスペースを作成
const existingUser = await prisma.user.findUnique({
where: { email: user.email },
});
if (!existingUser) {
await prisma.workspace.create({
data: {
name: `${user.name}のワークスペース`,
ownerId: user.id,
},
});
}
return true;
},
}
注意点： NextAuthのadapterを使っている場合、signIn コールバックの時点ではまだDBにユーザーが作成されていない場合があります。タイミングに注意が必要です。
5. 14日間トライアルの実装
// ユーザー作成時にトライアル終了日を設定
const user = await prisma.user.create({
data: {
email,
trialEndsAt: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000),
},
});
// トライアル残り日数の計算
const daysRemaining = Math.ceil(
(user.trialEndsAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24)
);
Claude Code との開発フロー
効率的だったパターン
-
スクショを見せて修正依頼
- 「スマホでログインボタンが見えない」+ スクショ → 3分で解決
-
一言で意図を伝える
- 「CTAボタンを全部フォームセクションへのリンクに変えて」
- Claude Codeが関連箇所をすべて特定して修正
-
エラーメッセージをそのまま貼る
- ビルドエラーをコピペするだけで原因特定→修正→コミット
気をつけたこと
-
こまめにコミット：動作確認できたらすぐ
git push - 1タスク1指示：複雑な指示は分割する
- 使用量を意識：残り10%を切ったら優先度を整理
1週間で実装した機能一覧
✅ Google OAuth認証
✅ OKR管理（CRUD）
✅ Action Map（カンバン、ドラッグ&ドロップ）
✅ TODO管理（4象限マトリクス）
✅ ワークスペース機能
✅ ユーザー招待・権限管理
✅ 14日間無料トライアル
✅ 申込フォーム（Resend連携）
✅ LP（レスポンシブ対応）
✅ 利用規約・プライバシーポリシー・特商法ページ
まとめ
Claude Codeを使った開発で感じたのは、「実装」の時間が圧倒的に短縮されるということ。
その分、以下に時間を使えます：
- 何を作るかの設計
- ユーザー体験の検討
- 動作確認とフィードバック
「AIがコードを書く時代」は、エンジニアが不要になる時代ではなく、エンジニアがより本質的な仕事に集中できる時代だと感じました。
14日間無料で試せます。OKRがタスクまで繋がる体験をぜひ。
質問やフィードバックがあれば、コメントで教えてください。