はじめに
こんにちは。
普段はインフラエンジニアとして働いています。
最近AIの進化がすごく、
「思いついたアイデアをその日のうちにサービスとして公開できる時代になった」
と感じています。
そこで今回は、
SES・SIer・社内SEのどれが向いているか診断するサービス
を約5時間で作って公開してみました。
実際に公開したサービスはこちらです。
👉 https://career-diagnosis.pages.dev/
もしよければ記事を読みながら触ってみてください。
作ったもの
サービス名
エンジニア働き方診断
URL
簡単な質問に答えるだけで
- SES向き
- SIer向き
- 社内SE向き
を診断できます。
診断時間は約1分。
結果画面では
- 適性割合
- 向いている理由
- 注意ポイント
- 他の働き方との比較
まで確認できます。
なぜ作ろうと思ったのか
転職活動をしていると
- SES
- SIer
- 社内SE
- 自社開発
など様々な働き方が出てきます。
しかし、
結局どれが自分に向いているの？
という人も多いと思います。
私自身も
- SESはスキルが伸びる
- SIerは安定している
- 社内SEは働きやすい
くらいのイメージしかありませんでした。
そこで、
簡単な診断形式で可視化できたら面白そう
と思い作ってみました。
開発環境
今回使用した環境はこちらです。
PC
- MacBook Air
エディタ
- Visual Studio Code
フロントエンド
- Next.js
- React
- TypeScript
CSS
- Tailwind CSS
ソース管理
- Git
- GitHub
デプロイ
- Cloudflare Pages
AI
- ChatGPT
今回はサーバーも契約していません。
完全無料構成です。
開発環境構築
まずはNode.jsをインストール。
brew install node
確認。
node -v
npm -v
Next.jsプロジェクトを作成。
npx create-next-app@latest
設定。
✔ TypeScript
✔ ESLint
✔ Tailwind CSS
✔ App Router
✔ src directory
インストール後。
npm run dev
ブラウザで
http://localhost:3000
へアクセス。
診断ロジック
診断ロジックは非常にシンプルです。
例えば質問。
{
text: "来週から担当案件が変わると言われたら？",
options: [
{
text: "むしろワクワクする",
value: "SES",
},
{
text: "普通に対応する",
value: "SIER",
},
{
text: "かなりストレスを感じる",
value: "IN_HOUSE",
},
],
}
回答ごとにポイントを加算します。
answers.forEach((a) => {
if (a === "SES") scoreMap.SES++;
if (a === "SIER") scoreMap.SIER++;
if (a === "IN_HOUSE") scoreMap.IN_HOUSE++;
});
割合計算
診断結果は割合表示にしました。
例えば
SES 5
SIer 2
社内SE 1
なら
SES 62.5%
SIer 25.0%
社内SE 12.5%
になります。
コードはこちら。
const sesPercent = Number(
((scoreMap.SES / total) * 100).toFixed(1)
);
const sierPercent = Number(
((scoreMap.SIER / total) * 100).toFixed(1)
);
const inHousePercent = Number(
(
100 -
sesPercent -
sierPercent
).toFixed(1)
);
これで合計が必ず100%になります。
スマホファーストで設計
今回は最初からスマホ表示を優先しました。
理由は単純で、
アクセスの大半がスマホだからです。
トップ画面
表示するものは最小限。
- サービス名
- 説明
- 診断開始ボタン
のみ。
余計な情報は削りました。
質問画面
質問数を表示。
1 / 8
選択肢は押しやすいサイズに。
<button>
むしろワクワクする
</button>
結果画面
結果画面では
- 適性グラフ
- 特徴
- 注意ポイント
- 転職理由
- 他タイプとの比較
を表示しています。
AIで画像作成
結果画面に表示する画像はAIで作成しました。
例えば
SESをイメージした近未来ロゴ
社内SEをイメージした企業システム管理者
などです。
昔ならデザイン制作だけでかなりコストがかかったと思います。
AIのおかげで個人開発のハードルがかなり下がりました。
一番苦労したところ
実は診断ロジックではありません。
UIです。
特にスマホ表示。
最初は画像の上下に大きな余白ができました。
原因はこちら。
object-contain
画像全体を表示しようとして余白ができていました。
最終的に
object-cover
へ変更。
<img
src={imageSrc}
className="w-full h-full object-cover"
/>
これで綺麗に表示できるようになりました。
Cloudflare Pagesで無料公開
今回は無料で運用したかったので
Cloudflare Pagesを選択しました。
まずGitHubへPush。
git add .
git commit -m "release"
git push
Cloudflare Pagesで
Create Project
↓
GitHub連携
↓
リポジトリ選択
するだけ。
ほぼ5分で公開できます。
さらに便利なのが、
GitHubへPushすると
自動デプロイされること。
個人開発との相性はかなり良いと思います。
ChatGPTがなかったら完成しなかった
今回一番感じたことです。
正直、
ChatGPTがなかったら5時間では完成しませんでした。
例えば
- Tailwind修正
- TypeScriptエラー
- UI改善
- レスポンシブ対応
- SEO相談
などを全部相談しながら進めました。
以前なら数日かかっていた作業が、
数時間で終わる時代になったと感じます。
SEOについて
診断ツールだけではSEOは弱いです。
そのため今後は
- SESとは？
- SIerとは？
- 社内SEとは？
- SESから社内SEへ転職する方法
- 社内SEは本当に楽なのか
などの記事も追加する予定です。
ツール単体ではなく、
ツール＋記事
が重要だと考えています。
今後やりたいこと
今後追加したい機能。
- 診断精度向上
- SEO記事追加
- SNS集客
- 求人比較機能
- 転職体験談掲載
- アフィリエイト改善
まずは月1000PVを目標にしています。
実際に触ってみてください
今回作成したサービスはこちらです。
エンジニア働き方診断
診断時間は約1分です。
SES・SIer・社内SEで悩んでいる方はぜひ試してみてください。
感想や改善案も大歓迎です。
まとめ
今回は
MacBook Air + Next.js + Tailwind CSS + Cloudflare Pages + ChatGPT
だけで診断サービスを公開してみました。
改めて感じたのは、
AI時代はアイデアを持っている人が強い
ということです。
完璧になるまで作り込むより、
まず公開して改善する方が圧倒的に学びが多いと思います。
もし何か作ってみたいアイデアがあるなら、
ぜひ小さくても公開してみてください。
想像以上に早く形になります。
最後まで読んでいただきありがとうございました。