プログラミング初心者がAIとペアプロして、エンジニアの心をえぐる「キャリア診断LP」を本気で作ってみた

はじめに

はじめまして！これまでプログラミング経験はほぼゼロだったのですが、今回AI（Gemini）の力を借りて、「ITエンジニア キャリアパス＆パフォーマンス再現性診断」というWebツールのプロトタイプを作成しました。

まずは形になったものがこちらです！まだまだ荒削りなプロトタイプ版ですが、ぜひ一度、ご自身の「今の評価」が実力なのか環境のゲタなのか、診断してみてください。
👉 ITエンジニア キャリアパス＆パフォーマンス再現性診断をやってみる

最初は「ちょっと面白い診断ができればいいな」くらいの軽い気持ちだったのですが、AIと壁打ちをしているうちに、「もっとエンジニアに刺さるUIにしたい」「ロジックの矛盾が許せない」「結果のテキストがAIっぽくて不自然だ」と変なスイッチが入ってしまい……。気づけば、ロジックからUI/UX、テキストの細部に至るまで徹底的にこだわり抜いたプロダクトになっていました。

この記事では、非エンジニアの私が、ある一つのブログ記事をきっかけにAIとどのように対話し、どんな壁にぶつかりながらこのツールを完成させたのか、その奮闘記をまとめたいと思います。

開発のきっかけ：あるブログ記事「おい、辞めるな」との出会い

この診断ツールを作ろうと思った最大のきっかけは、「おい、辞めるな」というブログ記事を読んだことでした。

記事の中では、売り手市場に乗じて安易に転職しようとする若手エンジニアに対して、「今の高い評価は、本当に自分の純粋な実力なのか？」「自社のレガシーな環境や人間関係という『ゲタ』を履いているだけではないのか？」という鋭い警鐘が鳴らされていました。

これを読んだ時、「この『環境のゲタ（環境依存度）』を客観的に数値化して、転職後のパフォーマンス再現性を突きつける診断ツールがあったら面白いのではないか？」と閃いたのです。

よくある「いくつかの質問に答えるとおすすめの職種が出る」だけのマイルドな診断では、目が肥えたエンジニアには刺さりません。この記事が持つ熱量と鋭さを、そのままプロダクトに落とし込みたい。そうGeminiにリクエストしたところから、このプロジェクトは加速しました。

奮闘ポイント1：エンジニアの心を掴む「ハッカーライクなUI」

最初にこだわったのはファーストビュー（FV）です。
単なるアンケート画面ではなく、「自分のキャリアをコードで解析する」ようなハッカーライクなワクワク感を演出するため、コードエディタ風のターミナルUIをAIに提案してもらい実装しました。

<div class="editor-window">
  <div class="editor-header">
    <span class="editor-dot red"></span><span class="editor-dot yellow"></span><span class="editor-dot green"></span>
    <span class="editor-title">career_analyzer.ts</span>
  </div>
  <div class="editor-body">
    <p><span class="syntax-keyword">const</span> mySkill = <span class="syntax-keyword">await</span> Career.<span class="syntax-function">analyze</span>(currentJob);</p>
    <br>
    <p><span class="syntax-keyword">if</span> (mySkill.reproducibility < 50) {</p>
    <p>&nbsp;&nbsp;console.<span class="syntax-function">warn</span>(<span class="syntax-string">"⚠️ 環境変化時のパフォーマンス低下リスクを検出"</span>);</p>
    <p>}</p>
  </div>
</div>

また、結果のステータスをGitHubのPR（Pull Request）になぞらえ、「LGTM」「Needs Refactoring」といった表現にすることで、エンジニアに馴染み深い形に落とし込みました。

工夫した点
開発の途中で「俺の実力」といった男性的な表現が含まれていたのですが、より多様なエンジニアに使ってもらえるよう、AIに指示を出して全体をジェンダーニュートラルな表現へと修正させました。

奮闘ポイント2：ロジックの矛盾との戦い

開発中、最大の壁にぶち当たったのが「判定ロジックの矛盾」でした。

最初は「経験年数 × 年収」の2軸だけでマトリクス判定を出していたのですが、テストしていると「『環境依存度が高くて危険』と診断されているのに、マトリクスでは『外の世界ならあと200万高く評価される』と表示される」という明らかな矛盾に気づきました。

そこでAIに「これ、矛盾してるよね？」と突っ込みを入れ、計算ロジックの大幅な改修を行いました。

// 修正後のロジック（経験年数 × 年収 × 再現性の3Dクロス分析）
if (exp <= 3 && sal >= 650) { 
    if (reproducibility <= 50) {
        mTitle = "⚠️ 環境要因による評価の可能性";
        mDesc = "経験年数に対して非常に高い報酬を得ていますが、環境への依存度も高い数値を示しています。現在のパフォーマンスが「純粋な個人の技術力」によるものか、「自社のリソースや仕組み」によるものか切り分ける必要があります。";
    } else {
        mTitle = "💎 市場を牽引するトップ・タレント候補";
        mDesc = "若手ながら高い市場価値を持ち、かつ環境への依存度も低いという極めて優秀なステータスです。";
    }
}

単純な加減算ではなく、「職種ごとの基本ロス率」「年収と経験のギャップ（ゲタ判定）」などを組み合わせ、さらに「経験年数×年収水準×環境依存度」の3軸で分析。「若手で高年収だが環境依存（錯覚資産リスク）」「中堅で低年収だがポータブルスキルあり（やりがい搾取）」など、全18パターンのリアルなケースを網羅し、どんな回答でも矛盾しないようにしました。

奮闘ポイント3：AIっぽさを消すための「完全書き下ろしプロファイリング」

結果画面の「なぜこの職種が向いているのか」という理由（Rationale）の部分も、最初は「あなたが『〇〇』と答えたから〜」という、いかにもプログラムで変数を代入しただけの不自然な日本語でした。

これでは納得感が出ないため、代入方式を完全に廃止しました。

// 同一回答の純度（ブレ）を判定してアーキタイプを分類
let resultType = answers['q7']; 
const isPure = counts[resultType] >= 3;
const profileKey = resultType + (isPure ? '_PURE' : '_MIXED');

const typeBadges = {
  'A_PURE': '技術の専門性を追求', 
  'A_MIXED': '現場牽引型リード',
  // ...計8パターン
};

回答の組み合わせから「8つのアーキタイプ（純粋なスペシャリスト、現場牽引型リードなど）」を裏側で定義し、それぞれのタイプに向けてプロのキャリアコンサルタントが分析したような専用シナリオをハードコードで出し分けるようにしました。これにより、「図星を突かれた感」が劇的に向上しました。

奮闘ポイント4：徹底的な「納得感」を生む詳細トレースログ

さらにエンジニア的な「納得感」を高めるため、なぜその「パフォーマンス再現性（％）」になったのか、計算の根拠となる実行ログを画面上に表示する機能を追加しました。

// 納得感を補完する「実行ログ」生成の裏側
let traceHtml = '> 実行ログ: パフォーマンス再現性の算出根拠\n';

if (expLoss > 0) {
    traceHtml += `<span class="trace-minus">-[WARN] 経験年数による環境適応（暗黙知の蓄積） -${expLoss}%</span>\n`;
}
// 特定の回答の組み合わせによるクリティカル判定
if (answers.q8 === 'a' && answers.q9 === 'a') {
    traceHtml += `<span class="trace-minus">-[CRITICAL] 特有のコンテキストへの過度な適応 -11%</span>\n`;
}

ブラックボックスになりがちな診断のスコア算出ロジックをあえて可視化することで、「たしかに自分はここに依存してるわ…」と腹落ちしてもらえるようにしました。

また、当初は「極めて危険」など煽りが強すぎたため、ユーザーからの反発を考慮して「パフォーマンス再現性」という客観的な指標にリフレーミングし、フラットで専門的なトーンに調整しています。

おわりに：非エンジニアでもAIと「こだわりのプロダクト」が作れる時代

プログラミング初心者の私一人では、このような複雑な条件分岐やUIを持ったWebページを作ることは絶対に不可能でした。

しかし、「あの記事の熱量を形にしたい」「ここが不自然」「このロジックはおかしい」というプロダクトに対する「こだわり」や「要求」を自然言語でAIにぶつけることで、それを実現するコードをAIが書き、二人三脚で形にすることができました。

「コードが書けること」と同じくらい、「どういうプロダクトにしたいか」「ユーザーにどう感じてほしいか」を定義し、AIに的確なフィードバックを返す力が、これからの時代には重要なのだと身をもって実感しました。

まだプロトタイプ版なので、「ここの判定はおかしい！」「もっとこういう設問がほしい！」といったエンジニアの皆様からのマサカリ（フィードバック）も大歓迎です。

もしよければ、実際に診断をプレイしてみて、ご自身の「パフォーマンス再現性」がどれくらいか確かめてみてください！（そして、私のこだわりのロジックの穴を見つけてみてください笑）

👉 ITエンジニア キャリアパス＆パフォーマンス再現性診断をやってみる

結果をX（Twitter）でシェアしてもらえると、泣いて喜びます！この奮闘記が、これからAIを使って何かを作ってみたいと思っている方の参考になれば嬉しいです。