​【開発秘話】「診断結果はLINE登録で」に絶望した私が登録不要の「適職診断ツール」を自作した話

その「絶望」は、突然やってくる

​あなたは、こんな経験がありませんか?

​ふとSNSで見かけた「あなたの性格診断」や「適職チェック」。

ちょっとした暇つぶしや、仕事に行き詰まった時の気分転換に、「面白そうだな」と思ってポチッと押す。

​画面には「全20問!あなたの本質を暴きます」という魅力的なキャッチコピー。

あなたは真剣に、一つひとつの質問に答えていきます。

​「うーん、Aかな…いやBかも」

「これは自信を持ってハイ!」

​数分かけて、全ての質問に回答し終えました。

さあ、いよいよ結果発表です。期待に胸を膨らませて「診断結果を見る」ボタンを押します。

​そこで、画面に現れたのは無慈悲な一言。

『結果を見るには、LINEの友だち追加をしてください』

『メールアドレスを登録して、続きを読みましょう』

​……は?

​いや、その、無料で使わせてもらっている立場なので、文句を言う筋合いがないのは分かります。企業だってビジネスです。リード(見込み客情報)が欲しいのも痛いほど分かります。

​でも、いちユーザーとして言わせてください。

「あの数分間のワクワクを返せ!!!!!」

​ブラウザの「戻る」ボタンを連打し、そっとタブを閉じる時の、あの徒労感。

「私の性格を知りたかっただけなのに、なんで個人情報を差し出さなきゃいけないんだ」というモヤモヤ感。

​私は、これが本当に嫌いなんです。

​「ないなら、作ればいい」の精神で

​私は現在、資金もなければ人脈もない、たった一人の個人として「うしろぽっけ」というサイトを運営しています。

バックオフィス業務を面白くしたい、働く人の背中を少しだけ押したい。そんな思いで、日々PCに向かっています。

​ある日、ふと思いました。

「企業にはできない、個人のサイトだからこそできる『最高の診断ツール』が作れるんじゃないか?」

  • ​企業の目的は「リスト取り(営業)」だけど、個人の目的は「楽しんでもらうこと」だけでいい。
  • ​登録フォームなんていらない。
  • ​広告バナーで画面を埋め尽くす必要もない。
  • ​ただ純粋に、ポチポチ押して「へぇ〜!」と言って帰ってもらう。

​そんな「ユーザーファーストの極み」みたいなツールがあったら、絶対に需要があるはずだ。

誰も作らないなら、私が作ってしまえばいい。

​そう決意したのが、今回の開発の始まりでした。

​しかし、ここからが「地獄のこだわり」の始まりでもありました。

たかが診断ツール、されど診断ツール。

「個人開発だし、簡易的なものでいいや」で済ませればよかったものを、私の性格上、どうしても妥協できないポイントが次々と出てきてしまったのです。

​今回は、そんな「登録不要の本気診断ツール」が完成するまでの、技術とデザイン、そして少しの意地が詰まった開発秘話を書き残しておこうと思います。

目次

「おみくじ」にはしたくない。ガチ心理学との格闘

​AIを使うか、ロジックで戦うか

​やるからには、適当なランダム診断(「今日のラッキーアイテムは…」レベルのもの)を作るつもりはありませんでした。

ユーザーが求めているのは「暇つぶし」であると同時に、「あ、これ私のことだ」という納得感だからです。

​最初は、流行りの生成AI(ChatGPTなど)を裏側で動かして、自由記述から診断する……なんてカッコいい仕様も考えました。

「PythonでAPIを叩いて…」なんて技術記事を書けば、エンジニア界隈ではウケるかもしれません。

​でも、立ち止まって考えました。

「それ、ユーザーにとって本当に親切か?」 と。

​AIを使うと、診断結果が出るまでに数秒〜数十秒の「待ち時間」が発生します。

しかも、毎回微妙に言うことが変わるかもしれない。

何より、APIの利用料がかさめば、いつか無料で提供し続けることが難しくなるかもしれない。

​私が作りたいのは、「サクサク動いて」「誰でも無料で」「何度やっても芯がブレない」ツールです。

​そこで私が選んだのは、AIではなく「枯れた技術(定番の理論)」でした。

​職業選択理論「RIASEC」の採用

​キャリアカウンセリングの世界には、ジョン・ホランドという心理学者が提唱した「RIASEC(リアセック)」という超有名な理論があります。

人間の性格を「現実的」「研究的」「芸術的」「社会的」「企業的」「慣習的」の6タイプに分け、そのバランスで適職を見るというものです。

​「これだ!」と思いました。

​しかし、ここからが地味で孤独な作業の始まりです。

学術的な理論をそのまま使うと、質問数が60問とかになってしまいます。

これでは、スマホユーザーは途中で離脱します。

「精度を落とさず、どこまで質問を削れるか?」

  • ​「機械いじりが好き?」という質問はRタイプ。
  • ​「リーダーシップを取りたい?」はEタイプ。

​ノートにびっしりと質問案を書き出し、似たような質問を統合し、表現を柔らかくし……。

最終的に「12問(1分)」という極限のコンパクトさに落とし込みました。

​この12問は、適当に作ったものではありません。

私がコーヒーを何杯もおかわりしながら、心理学のモデルと睨めっこして削り出した「結晶」なのです。

​たった0.1秒の「気持ちよさ」に執着する

​ぷっくりボタンの秘密

​ロジックが決まったら、次は「見た目(UIデザイン)」です

ここで私が掲げたテーマは、「デジタルだけど、手触りがあること」

​世の中の診断ツールの多くは、無機質な「ラジオボタン(○ポチ)」が並んでいるだけです。

事務手続きの書類みたいで、やっていてテンションが上がりません。

​うしろぽっけの世界観は、もっと人間味があって、柔らかいものです。

だから、ボタン一つにも命を吹き込みました。

​CSS(デザインのコード)を書き殴り、影のつけ方を調整し、「押した瞬間にムニュッと沈み込む」 アニメーションを実装しました。

/* 実際のコードの一部 */
.btn-pukku:active {
  top: 6px; /* 押すと6px沈む */
  box-shadow: none; /* 影が消える */
}

たったこれだけのことです。

でも、この「押した感」があるだけで、12問の回答作業が「作業」から「遊び」に変わるんです。

スマホの画面越しに、指先が喜ぶ感覚。これを実現するために、何度も何度も自分のスマホで連打テストを繰り返しました。

​レーダーチャートへのこだわり

​そして、結果画面。

ここにも「こだわり」という名の意地があります。

​ただ文章で「あなたは〇〇タイプです」と出すのは簡単です。

でも、人間は「図形」を見ると直感的に理解し、そして「誰かに見せたくなる」生き物です。

​そこで、Chart.js という技術を使って、診断結果を「六角形のレーダーチャート」で描画することにしました。

  • ​バランス型なのか?
  • ​一点突破型なのか?

​自分の歪(いびつ)な形を見て、「うわ、偏ってるな〜(笑)」とニヤリとしてほしい。

その一瞬のニヤリのために、JavaScriptのプログラムと格闘し、スマホの狭い画面でも綺麗にグラフが収まるように調整を重ねました。

「役に立つ」と「楽しい」の間に

​個人だからこそ、できることがある

​正直なところ、企業が予算をかけて作った診断ツールに比べれば、機能の多さでは勝てないかもしれません。

私には大規模なデータベースもなければ、何十人もの開発チームもいないからです。

​でも、「ユーザーへの優しさ」だけは、負けていないつもりです。

  • ​結果を見るのに、会員登録はいらない。
  • ​広告で誤クリックを誘うようなこともしない。
  • ​難しい言葉を使わず、直感で楽しめるようにする。

​これらは、利益を追求しなければならない企業にとっては「悪手(儲からないこと)」かもしれません。

でも、しがらみのない個人のサイトだからこそ、「自分がユーザーだったら、こうして欲しい」という純粋な願いを、そのまま形にすることができました。

​あなたの「背中」を押すために

​この「うしろぽっけ」というサイトは、働く人の背中(バックオフィス)を支えたいという思いで運営しています。

​仕事は、人生の多くの時間を占めます。

だからこそ、「自分は本当は何が得意なんだろう?」「どんな環境なら輝けるんだろう?」と悩む時間を、少しでも減らしたい。

そして、その悩むプロセスすらも、ちょっとしたエンターテイメントに変えたい。

​そんな想いを込めて、ボタンの押し心地ひとつ、言葉の選び方ひとつまでこだわり抜いて完成させたのが、今回の診断ツールです。

​さあ、遊んでみてください

​開発裏話はこれでおしまいです。

長々と語ってしまいましたが、百聞は一見にしかず。

登録不要、完全無料、所要時間は1分。

​コーヒーでも飲みながら、ゲーム感覚でポチポチしてみてください。

そして、もし結果のグラフを見て「あ、なんか分かるかも」とニヤリとしていただけたら、開発者としてこれ以上の喜びはありません。

​あなたの「隠れた才能」が、ここから見つかりますように。

\ 登録不要・1分で完了 /
あなたの「隠れた才能」を見てみませんか?

診断ツールを試してみる 🚀

※個人情報は一切保存されません

よかったらシェアしてね!
  • URLをコピーしました!
目次