🦫
「エンジニアタイプ診断」の開発の裏側

TechTrain公式
2025/02/05に公開
こんにちは、株式会社TechBowlエンジニアのかけです。今回は、1月末にリリースしたエンジニアタイプ診断の開発裏側についてお話ししようと思います！

 エンジニアタイプ診断とは

当社がこれまでに蓄積してきたキャリア支援の知見を活かし、回答者のエンジニアとしてのタイプを診断します。この診断では、約30項目の質問に答えることで、回答者のエンジニアとしての特性を8つのタイプに分類します。診断は「働き方・マインド」「技術指向性」「キャリアプラン」という3つの観点から分析を行います。
診断結果は全部で8種類。動物をモチーフに表現し、あなたのエンジニアとしての特徴や得意分野が詳しく解説されています。

 開発背景私はもともとTechTrainのユーザーで、現在は開発に携わっています。エンジニアタイプ診断の構想を聞いた時、「僕がユーザーの時にあれば…！」と強く感じました。
というのも、私は文系出身で営業職を経験した後、IT業界へジョブチェンジしました。その過程で、「人柄」や「適性」といった、スキルや経験だけでは伝えきれない部分をどのように表現し、判断すればいいのか悩んだことがあります。
また、マネジメント業務を担当していたときにも、メンバー一人ひとりのタイプや適性が分かっていれば、より適切なコミュニケーションができ、成長の機会を提供しやすくなったのではないかと感じました。
自分または相手のパーソナルな部分は見えてるようで見えない部分であり、これを読んでいる皆様も多少は身に覚えがあるのではないでしょうか？
こうした経験があるからこそ、この診断の開発に関われたことをとても嬉しく思っています。エンジニアとしてのスキルを高めるだけでなく、自分の特性を理解し、組織の中でどのような役割を果たせるのかを考える――そんなきっかけを提供できるツールになれば幸いです。

 こだわった点
 UXの工夫診断では質問数が多いため、途中で飽きてしまったり、回答に迷ってしまったりすると、離脱につながる可能性があります。そこで、最後まで楽しみながら進めてもらえるよう、以下の工夫を取り入れました。
質問文をコンパクトに整理

2択の回答テキストは詳細かつボリュームがあるため、質問を「あなたはどっち派？」とシンプルに表現し、上部に固定。これにより、視認性を高め、スムーズに回答できるようにしました。
スムーズな遷移でストレスを軽減

回答すると自動で次の質問へスクロールする仕様にし、操作の手間をなくしました。
実際にユーザーからも「回答可能な部分が順番に表示されるので、回答の抜け漏れを防げるし、自動スクロールがあるのも助かる！」といった声をいただき、工夫が良い結果につながったと実感しています。

 UIの工夫自社キャラクター「プル」を際立たせるため、UIには以下の工夫を施しました。

※「プル」についてはこちらのプレスリリースをご確認ください。
動物と調和するテーマカラーの選定

動物それぞれにカラーがあるため、それと喧嘩せずにかつ可愛らしさを引き立てるカラーを選びを心がけました

回答数に応じてプログレスバーとともにプルも動く仕様

プルが動く仕様については社内でも好評でしたが、実際にユーザーからも好評でこういう細かいギミックにこだわって良かったです。

 苦労した点
 コードバックエンドはシンプルな構成でしたが、フロントエンドはユーザー体験を向上させるために多くの工夫を施しました。
特に、自動スクロールやアニメーションの処理は試行錯誤を重ね、スムーズな動作を実現するまでにかなりの時間をかけました。
以下は、自動スクロール機能を実装する際に使用したサンプルコードです。
import { useRef } from "react";

const SampleComponent = () => {
  const questionRefs = useRef<(HTMLDivElement | null)[]>([]);

  const handleScroll = (index: number) => {
    questionRefs.current[index + 1]?.scrollIntoView({ behavior: "smooth", block: "center" });
  };

  return (
    <div>
      {["質問1", "質問2", "質問3"].map((question, index) => (
        <div key={index} ref={(el) => (questionRefs.current[index] = el)}>
          <p>{question}</p>
          <button onClick={() => handleScroll(index)}>次へ</button>
        </div>
      ))}
    </div>
  );
};

export default SampleComponent;
useRefについては、実際に使ってみることでその便利さに気づき、学びの多い機能でした。今回の実装でも、スクロールのために非常に役立っています。

 デザイナーとの連携エンジニアタイプ診断で特に重要だったのが、UIのクオリティでした。
デザイナーとの連携においては、以下の方法で円滑に進めました。
仕様やデザインの共有は Figma で一元管理
Slack を活用し、スムーズな情報共有を実現。
基本的にはテキストでのコミュニケーションを行いながら進めていましたが、最も調整が難しかったのはレスポンシブデザインの部分でした。
PCやスマホのデザインはFigmaで表現されているので特に問題はないのですが、タブレットのような中間的なデバイスに関しては、実装者とデザイナーでイメージにズレが生じることがありました。
私自身、デザイナーと連携して仕事をした経験があったため、イメージを共有して合意を取ることでコミュニケーションコストをかけつつも解決できましたが、そうでない場合は後から修正が必要になることもありました。
そのため、**「タブレットの場合のデザインも見えるようにする」**という形で認識合わせを行うことにしました。Figmaでのデザインを「正規」として扱い、その「手本」を明示することで、デザイナーと実装者間での認識ズレを減らすことができました。
とはいえ、どうしても表現しきれない細かい部分に関しては、別途仕様メモとして資料に残し、決定事項をFigmaに集約することで、開発をスムーズに進めました。
デザイナーの工数が増えるという問題はありますが、デザインを見える形で共有することが最も誤解の少ない方法であり、効率的に進めるためには重要だと感じました。

 リリース当日リリース完了し、検証を進める中で想定外のトラブルが発生しました！
SNSでシェアするOGP画像が表示されないという問題が発覚したのです。原因は、OGP画像の取得処理をクライアントサイドで行っていたことにありました。SNSでの拡散を前提としたコンテンツだったため、OGP画像の表示は必須でした。
弊社ではステージング環境にBasic認証をかけていたため、事前検証が十分にできませんでした。しかし、ステージング環境以外でもcurlを使って確認したり、既存のOGP対応ページがあればそれと統一した実装を行うなど、事前に防げるポイントがあったと反省しています。
急いで修正を行い、無事OGP画像は表示されるようになりましたが、問題はここで終わらず「画像が小さいから大きくしよう！」との声が

これもOGP画像の表示を急いだために確認が漏れた事案となりました...
追加対応を重ね、最終的にプレスリリースから約6時間後には全体の修正が完了しました。
SNSにはリリース初期にOGPなしの投稿が溢れてしまいましたが、診断・シェアしてくださった皆さまには本当に感謝の気持ちでいっぱいです！

 最後にこのエンジニアタイプ診断を通じて、スキルだけでなく、自分や身の回りの人の特性や強みを発見するきっかけになれば嬉しいです。
今後も「楽しく学べる」コンテンツを提供していきますので、ぜひお楽しみに！
👉 エンジニアタイプ診断をはじめる
これからもTechTrainをよろしくお願いします！