どうぶつ性格占い

25問の回答から、12匹のどうぶつのうち自分に近い1匹がわかる性格占いWebアプリ。人間OS診断のどうぶつ版。

どうぶつ性格占いの紹介画像。左に肉球アイコンと「どうぶつ性格占い」のタイトル、「あなたを、12のどうぶつに。」のキャッチコピー、「25問・約3分」「結果画像」「友達と比較」のラベル。右に、電球を持つキツネ、探検帽のイルカ、ハートを抱くゴールデンレトリバー、おしゃべりするペンギン、毛糸玉で遊ぶネコ、王冠のライオンのゆるかわイラストが並ぶ。

人間OS診断の仕組みはそのままに、結果を「12匹のどうぶつ」で表すように作り替えた性格占いです。Big Five(開放性・誠実性・外向性・協調性・情緒安定性)の考え方をベースに25問の回答から5つの傾向をスコア化し、重み付き距離が最も近いどうぶつを表示します。キツネ・イルカ・フクロウ・カピバラなど12匹のイラストは、指示書を書いてCodexの画像生成で描かせ、キツネを基準絵にして全員の絵柄をそろえました。柴犬やリスがキツネと見分けにくかったため、毛色や耳の形を指示書で指定し直して描き直しています。元画像からサイト用画像・OGP画像・タイプ別の共有ページまでをスクリプトで一括生成し、結果画像の保存や友達との比較も人間OS診断と同じく使えます。

診断ロジックはそのまま、見せ方だけを入れ替える

どうぶつ性格占いは、人間OS診断の25問・採点・タイプ判定をそのまま使っています。変えたのは、12タイプそれぞれに割り当てたどうぶつと、名前・イラスト・文言です。

対応づけはタイプの性格から決めました。好奇心が強くひとりで考えるタイプはキツネ、計画的にコツコツ進めるタイプはビーバー、人や物事のバランスを整えるタイプはカピバラ、という具合です。タイプIDもどうぶつ名に変え、共有リンクが /animal/t/fox/ のように読めるURLになるようにしました。

人間OS診断と同じドメインで公開するため、ブラウザに保存するキーの名前を分け、ふたつの診断結果が混ざらないようにしています。

イラストはCodexに指示書を渡して描かせる

12匹のイラストと集合絵、アイコンは、共通スタイル(2〜2.5頭身のデフォルメ、パステル調、文字なし)とどうぶつごとのポーズ・小物・背景色をまとめた指示書を書き、Codexの画像生成で作りました。最初にキツネを描かせ、それを基準に残りの絵柄をそろえています。

並べてみると、柴犬風のイヌとリスがキツネと見分けにくくなっていました。そこで、イヌはたれ耳でクリーム色のゴールデンレトリバー、リスは丸い耳とこげ茶の毛色に大きなしま模様のしっぽ、と見分けるための特徴を指示書に書き足して描き直しています。集合絵も、個別の絵を参照させて毛色や小物を一致させました。

画像の差し替えを1コマンドにする

生成した元画像は1枚1.7MB前後あるため、そのままは公開しません。4:5に切り抜いた720×900のWebP、トップの集合絵、OGP画像、アイコンまでをPythonのスクリプトで一括生成し、タイプ別の共有ページとOGP画像も型定義から作り直します。

元画像のフォルダは書き出し対象から外しているので、イラストを描き直したときは画像を置き換えてスクリプトを流すだけで済みます。

使用技術
  • HTML
  • CSS
  • JavaScript (Vanilla)
  • Canvas API
  • Codex (画像生成)
  • Python (Pillow)
  • Cloudflare Workers
担当
  • 企画
  • タイプとどうぶつの対応づけ
  • イラストの指示書作成・AI画像生成のディレクション
  • 画像・共有ページ生成の自動化
  • 公開
成果
  • wakame.dev 配下で公開中
  • 12匹+集合絵のイラストをCodexの画像生成で制作し、絵柄を統一
  • 元画像からWebP・OGP・共有ページまでをスクリプトで一括生成
制作期間
2026-10
ステータス
公開中

← 制作実績の一覧へ戻る