5問診断ツールをClaude Codeで作った【技術スタック診断ツール開発記】

「自分が欲しかったもの」を作った

フリーランスSEがWebアプリ開発を始めるとき、「どの技術を学べばいいか」がわからない。

React・Vue・Nuxt・Next.js・Astro・SvelteKit。選択肢が多すぎて、どれから手をつければいいか迷う。

自分が迷ったので、自分で解決するツールを作ることにした。

▼ 技術スタック診断ツール（無料）

作ったものの概要

5つの質問に答えるだけで、最適な技術スタックを診断するツールだ。

質問内容（例）

どんなものを作りたいか（ブログ / ECサイト / ダッシュボード等）
フロントエンドの経験（なし / 少し / ある程度）
バックエンドの必要性（不要 / APIで十分 / 必要）
サーバーの管理（したくない / してもいい）
将来的な規模感（個人 / チーム開発）

出力内容

推奨技術スタック（3種類）
各スタックの特徴・向いているケース
関連する書籍のリンク（Amazonアフィリエイト）

開発の流れ

①要件の整理

Claude Codeに指示を出す前に、「何を作るか」を整理した。

入力：5問の質問（選択式）
処理：回答の組み合わせで技術スタックを判定
出力：推奨スタック3件＋説明
追加：Amazonアフィリエイトリンク

これを紙に書いてから、Claude Codeに指示を出した。

②最初の指示

Next.js 15でGitHub Pages向けの技術スタック診断ツールを作って。
5問の質問（選択式）に答えると最適な技術スタックを診断して表示する。
TypeScriptとTailwind CSSを使うこと。
basePath: "/tech-stack-advisor" で設定すること。

最初の指示でプロジェクト構造・基本コンポーネント・スタイルが生成された。

③判定ロジックの指示

判定ロジックは「自分が考えてAIに実装させる」アプローチを取った。

「どの回答の組み合わせで何を推薦するか」というロジック設計は自分でやって、それをAIに実装してもらった。

回答の組み合わせでスタックを判定するロジックを追加して。
- ブログ系：Next.js（静的生成）を優先
- ECサイト：Next.js（SSR）またはNuxtを推薦
- ダッシュボード：React + API構成を推薦
（省略）

④デザインの調整

デザインは「こういう雰囲気にして」という指示では精度が低かった。

「質問カードは白背景・角丸・影付き。選択肢はボタン形式で選択時は青く反転する。ヘッダーはネイビー」という具体的な指示に変えてから精度が上がった。

デザインを指示するときは「雰囲気」ではなく「具体的な要素・色・挙動」で伝える方がうまくいく。

躓いたこと

basePath関連のリンク切れ

GitHub Pagesでは basePath: "/tech-stack-advisor" を設定しているため、内部リンクや画像の参照でパスがずれる問題が発生した。

解決策：next/link コンポーネントを使う・画像は public フォルダに置いて next/image で参照する。

静的エクスポートでの制約

Next.jsの output: 'export' （静的エクスポート）はサーバーサイドの処理が使えない。

今回のツールはすべてブラウザ側で処理するため問題なかったが、APIルートやサーバーサイドレンダリングを使いたい場合は別のホスティング先が必要になる。

アフィリエイトリンクのnoopener設定

外部リンク（Amazonアフィリエイト）を target="_blank" で開く場合、セキュリティ上 rel="noopener noreferrer" を付ける必要がある。

Claude Codeに「外部リンクには必ずnoopener noreferrerを付けて」と指示したら、全部対応してくれた。

費用の内訳

| 項目 | 費用 | |---|---| | Next.js | 無料（オープンソース）| | GitHub Pages | 無料 | | Tailwind CSS | 無料（オープンソース）| | Claude Codeの使用料 | Anthropicサブスク込み | | 合計 | ほぼ0円 |

作って気づいたこと

「要件整理がゼロだとAIの出力も微妙になる」

最初に「診断ツールを作って」とだけ指示したら、全然違うものが出てきた。判定ロジック・デザイン・出力形式を事前に整理してから指示すると、一発目から使えるものが出てきた。

「途中で方向を変えると時間がかかる」

デザインを3回変えたら、コードが複雑になって手直しが大変だった。最初に「こういうデザインにする」を固めてから作り始めた方が速い。

「完成度を高くしようとしすぎない」

最初から完璧を目指すより、動くものを早く作って公開する。フィードバックを受けてから改善する方が結果的に良いものになる。

まとめ

Claude Codeで診断ツールを作るポイント：

最初に要件を整理する（入力・処理・出力・追加機能）
判定ロジックは自分で設計してAIに実装させる
デザインは「雰囲気」ではなく「具体的な要素」で指示する
途中で変更を最小限にする（最初に方針を固める）
動くものをまず公開する（完璧を目指さない）

フロントエンド経験がなくてもClaude Codeがあれば動くものが作れる。SEとしての「要件整理力」を活かすのが、うまく使うコツだ。