Product Case Study / 2026 働き方転機ノート
AI × UX × Career & Fortune
観測記録OBSERVATION RECORD / 452E0BCFRECORDED : 2026-08-10DOMAIN : IMPLEMENTATIONSTATUS : ARCHIVED

占いサイトを作ろうと思ったら、
キャリア診断サービスになった。
AIと2日で作った「働き方転機ノート」

最初は「占いサイトでも作ってみようかな」くらいの軽い発想だった。ところが作り始めると、占いだけでは現実の判断まで進めず、キャリア情報だけでは気持ちが追いつかない人がいることに気づいた。そこで、感情と現実を同じUXの中で整理する無料診断を、企画から公開・計測まで約2日で形にした。

働き方転機ノートのトップページ。落ち着いたアイボリー背景に、働き方を考える女性と無料診断への導線が表示されている
公開中のトップページ。占いの神秘性や転職サービスの営業感より、立ち止まって考えられる余白を優先した。

「占いサイトでも作ってみようかな」から始まった

当初は、個人でアフィリエイトも試しながら、占いを題材にしたサイトを作る程度の構想だった。その頃、私自身も転職や今後の働き方を考えていた。さらに妹と話した際、30代後半で出産などもあり、今後のキャリアや転職に迷っているという話を聞いた。

転職したい気持ちはあっても、最後の踏ん切りがつかないことがある。今動いてよい時期なのか、運勢を見たくなる人もいる。逆に、占いをきっかけに、自分の働き方を初めて考え始める人もいる。

作っている途中で、これを「占いからキャリアへ」「キャリアから占いへ」の両方に動けるサービスにした方が、実際の迷いに近いのではないかと思った。そこから、単なる占いページではなくなっていった。

占いだけでは、現実の判断まで進まない

占いは、自分の特徴や気持ちを別の角度から見直すきっかけになる。しかし「運勢がよいから転職する」という結論だけでは、生活費、勤務時間、求人条件、これまでの経験といった現実の判断材料が抜けてしまう。

一方、キャリア診断や求人情報だけでも、最後の一歩が重い人がいる。条件を比較して合理的には動けそうでも、不安や納得感が整理されていなければ決断できない。人生の意思決定には、合理的な判断と感情的な納得の両方がある。

占いは気持ちを整理する。
求人情報は現実を確かめる。
最後に決めるのは、利用者本人である。

「占い × キャリア」という交差点を、双方向にした

働き方転機ノートでは、入口を一つに決めていない。すでに求人を見始めている人と、まだ転職という言葉にしていない人では、最初に必要な情報が違うからだ。二つのルートは診断結果で交差し、どちらから入っても、気持ちと現実の両方を確認できる。

Route A / Career First

キャリアから占いへ

  1. 転職したい
  2. 求人を見始める
  3. 条件的には動けそう
  4. 最後の決断に不安が残る
  5. 占いで特性・時期・気持ちを整理する
  6. 自分で最終判断する
Route B / Fortune First

占いからキャリアへ

  1. 仕事にモヤモヤする
  2. まだ転職までは決めていない
  3. 占い・運勢を確認する
  4. 今の働き方とのズレに気づく
  5. キャリア上の選択肢を見る
  6. 求人・市場・働く条件を確認する

そこで作った「働き方転機ノート」

40代・50代女性を主な対象に、今の仕事を続けるか、転職するか、今の働き方が合っているかという迷いを整理する無料診断である。登録は不要で、生年月日や回答はブラウザ内で計算し、診断情報を保存・外部送信しない。

Input
生年月日・任意の出生時刻
Situation
主な悩みと5つの現状チェック
Work
現在の主な役割
Action
転職準備の現在地

公開版は女性向けに設計しているため、性別入力は置いていない。ユーザーの年齢や性別から家族状況を推測せず、仕事の状態と本人が選んだ悩みを材料にする設計である。

実際の診断は、作るほど複雑になった

結果は「あなたは○○タイプ」で終わらない。四柱推命の計算、選んだ悩み、5つの現状チェック、現在の役割、転職準備状況を組み合わせ、その人が次に確認できる情報までつなぐ。

占い結果 × 現在の悩み × 仕事内容 × 職場状況 × 転職準備
Result Structure
  • 四柱推命から見た本人の特徴
  • 4つの現在地タイプ
  • 今回の悩みと5つの回答の整理
  • 今日できる小さな一歩
Career Connection
  • 適職候補と向いている理由
  • 現在の経験をどう接続できるか
  • 求人を見る際の確認ポイント
  • 力が出る職場と避けたい職場
診断結果サマリー。現在地タイプ、今日の一歩、5つの回答、3つの適職候補が表示されている
実際の診断結果サマリー。結論、今日の一歩、適職候補を先に置き、詳しい根拠は後から読める。
向いている仕事・役割の結果画面。適職候補と、向いている理由、現在の経験が活きる点が表示されている
適職名だけでなく、向いている理由、今の経験とのつながり、求人で確認する点まで表示する。

裏側は複雑、表側はシンプル

内部では多くの条件を扱っているが、ユーザーが行うことは「質問を選ぶ」「結果を見る」「次に知りたいことを選ぶ」の三つに近い。複雑なロジックを理解しなければ使えない診断にはしたくなかった。

制作時に大きなUX設計書やペルソナ資料を順番に作ってから実装したわけではない。これまでマーケティング、UX、EC、Web改善を繰り返してきた経験から、「この人はここで迷う」「この回答なら次にこれが必要」「この画面は結論を先に見せる」「占いの専門情報は必要な人だけ開く」といった判断を、画面とロジックへ直接落としていった。

後からGoogle UX Design系の考え方に当てはめれば、Empathize、Persona、User Story、Customer Journey、Problem Statement、How Might We、Value Proposition、Decision Flowなどに整理できる。フレームワークを無視したのではなく、過去の反復によって一部が内在化され、直感的に処理できるようになっていたのだと思う。

診断の今の状態を選ぶ画面。複数の悩みから一つを選ぶシンプルな入力UI
入力は選択式を中心にし、前の回答は上に残る。ユーザーが現在地を見失わず、いつでも見直せる構成にした。

2日で、企画書ではなく実際に触れるサービスまで進めた

約2日で行ったのは、HTMLを一枚作ることではない。アイデアを、公開後に検証できるプロダクトへ変えるまでの一連の工程である。

Plan
コンセプトと利用シーンを決める対象、悩み、占いとキャリアの役割分担、二つのユーザールートを整理した。
Design
質問、診断構造、結果の順序を設計する現状チェック、現在地タイプ、適職候補、職場条件、今日の一歩を一本につないだ。
Build
四柱推命計算とキャリア結果を実装するブラウザ内計算、条件分岐、パーソナライズ、UI、レスポンシブ表示を実装した。
Trust
ガイド・法務・安全導線を揃える診断の仕組み、FAQ、プライバシー、利用規約・免責、公的相談先を用意した。
Ship
Gitから公開・計測まで接続するGitHub、Cloudflare Pages、独自ドメイン、GTM、GA4、SEO基礎、Search Consoleで検証できる状態を整えた。

AIに「全部任せた」わけではない

AIをかなり使った。ただし、AIがサービスの目的を決め、勝手に完成させたわけではない。人間側とAI側の分担は、次の形に近い。

Human

問題と判断基準を持つ

  • 問題設定とコンセプト
  • UX、入出力、診断構造
  • 採否と違和感の発見
  • レビューと最終品質判断
AI

実装と反復を速くする

  • コーディングと実装案
  • 大量の条件処理
  • 修正とテスト支援
  • UI実装と反復改善

AIは「ページを作る道具」というより、実装速度を大きく上げるチームメンバーとして扱った。目的、制約、判断基準を渡し、出てきたものを見て、違和感を言語化し、修正する。その往復が制作の中心だった。

Git、Cloudflare、GTM、GA、Search Consoleまで一人でつなぐ

個人開発で重要なのは、画面が表示できることだけではない。更新できる、壊れたら戻せる、公開後の反応を見られるところまでつながって、初めて検証可能なプロダクトになる。

実装Vanilla HTML / CSS / JavaScript。診断と四柱推命計算はブラウザ内で実行し、外部の診断APIや診断データベースを使わない。
四柱推命節入り時刻を含む暦計算、命式、蔵干、通変星、大運、流年、仕事鑑定を実装。通常日と境界日のテストを用意した。
品質管理Node.jsの単体・整合性テストとChromium E2Eを用意し、GitHub Actionsでも同じ検証を実行する。
公開Git / GitHubで履歴を管理し、Cloudflare Pages向けの成果物を生成。独自ドメインとHTTPSで公開する。
計測専用GTMコンテナからGA4へ、診断開始、診断完了、外部導線などの許可イベントだけを送る。生年月日や診断回答は計測へ渡さない。
検索title、description、canonical、構造化データ、sitemap、robotsを整え、Search Consoleで公開後の検索状況を確認できるようにした。
診断結果の後に、占いで気持ちを整理するルートと求人市場で働く条件を確かめるルートが並ぶ画面
診断結果の後に置いた二方向の分岐。どちらかを一方的に勧めず、今知りたい方を本人が選ぶ。

一番変わったのは、「仮説検証の速度」だった

以前なら、企画、UX、デザイン、開発、テスト、公開、計測までをつなぐだけで数週間から数か月かかっていた。今回は「占いとキャリアは、意思決定上クロスするのではないか」という仮説を、企画書で議論して終わらせず、約2日で実際に触れるWebサービスへ変えた。

公開後は、アクセス、診断開始、診断完了、外部導線などを観測できる。そこで初めて、市場から答えを得られる。AIによって短縮されたのは、コードを書く時間だけではない。

仮説 → プロダクト → 検証

この一サイクル全体を短くできることが、AIを個人開発に使う大きな意味だと感じた。

売れるかどうかは、まだ分からない

プロダクトとして形にはできた。しかし、このコンセプトが市場に刺さるか、アフィリエイトで収益化できるか、事業として成立するかは、まだ検証前である。

2日で作れたことと、2日で成功したことはまったく違う。ここで言えるのは、仮説を市場へ出せる状態にしたことまでである。成功を決めるのは制作速度ではなく、公開後の反応と、その反応をもとに何を直すかだ。

それでも、この2日間で得たものは残る

仮に大きな収益につながらなくても、仮説から実物を作り、UXを実装し、診断ロジックを組み、Gitから公開環境まで接続し、マーケティング計測まで用意した経験は残る。

今回は、占いの専門性だけでも、キャリア情報だけでも、コーディングだけでも成立しなかった。ユーザー課題を見つけ、異なる領域をつなぎ、表側の体験を簡単にし、公開後の検証まで回せる形にする必要があった。

結果として残ったのはWebページではなく、企画、UX、判断基準、実装、検証のつながりそのものである。自然な制作記録として見ても、次に別の仮説を試すための土台として見ても、このプロジェクトには十分な価値があった。

占いとキャリアを組み合わせたのではない。
感情と現実を、同じ判断の中へ戻した。

働き方転機ノートを実際に見る ↗