採用ページをドット絵RPGにした理由と作り方 — LEADEAS QUEST 制作記録

2026年8月19日、私たちはドット絵RPGの世界観で作った採用ページ「LEADEAS QUEST」を公開しました。画面をスクロールすると主人公がフィールドを歩き、要所要所で開くメッセージウィンドウが会社紹介や募集要項を語りかけてきます。旅の終着点には応募フォームがあり、名前も「ぼうけんしゃ とうろく」です(このフォームは公開直後に世界観へ合わせて作り込みました)。条件を上から下へ読むだけだった採用ページを、旅する体験に作り替えました。

なぜ「旅する採用ページ」にしたのか

採用ページの多くは、募集要項という条件表を上から下へ読むだけの体験になりがちです。条件を読み終えたところで離脱されても不思議はない、と私たちは考えました。LEADEAS QUESTでは、スクロールに合わせてドット絵の主人公がフィールドを歩き、出会うウィンドウが会社紹介と募集要項を少しずつ語ります。応募フォームまでを「ぼうけんしゃ とうろく」という旅の一部として設計し、往年の16ビットRPGを思わせる世界観で最初から最後までを統一しました。

旅の設計 ― 4つのジョブと応募フォームまで

募集職種はエンジニア・デザイナー・マーケター・営業の4つで、いずれも正社員・業務委託の両方で応募できます。働き方はリモート中心・フレックスです。ジョブ選択画面では各職種にステータスバーと一言紹介を付け、途中で「ジョブへんこう」もできるようにしました。どの職種にも当てはまらない人のために、オープン応募の入口も別に用意しています。

旅の道中では「なかまの森」や「はたらきかたの宿」といったステーションでメッセージウィンドウが開き、会社のことや働き方を語ります。ゴールは応募フォーム「ぼうけんしゃ とうろく」で、送信後には「とうろく かんりょう!」、最後は「— FIN —」で締めくくります。効果音は「おと ON/OFF」でいつでも切り替えられます。

作り方 ― ドット絵はぜんぶ <canvas> に描いている

ページ自体は本サイト(Next.js)から /recruit で配信される、1枚の静的HTML(約1,400行)です。フレームワークは使わず、ドット絵は画像ファイルでなくすべて <canvas> に描画しています。主人公スプライトは16×24px、タイトル画は256×144px、フィールドマップは240×2048pxをタイル描画、戦闘用の敵キャラクターは24×24pxです。CSSの image-rendering: pixelated を使うことで、拡大表示しても輪郭がにじみません。

主人公が歩く動きはscrollイベントで位置を更新しているだけのシンプルな仕組みで、マップ上の「ステーション」に到達するとメッセージウィンドウが開きます。ウィンドウは青のグラデーション地に白枠、カーソルや強調は金色、草原の色にはLeadeasの緑を採用しました。16×24ピクセルという限られたドット数で人物の個性を立たせる古典的な技法も、制作にあたって研究しています。

人間とAIエージェントの分担

私たちは2026年4月設立のIT企業で、実装・レビュー・監査・コンテンツ制作を役割ごとに分けたAIエージェント群と人間が協働する開発組織を運用しています。LEADEAS QUESTの企画・制作もこの体制で進めました。ページの中の「はたらきかたの宿」というウィンドウには、実際に社内で使っている道具として、口頭より記録を優先するドキュメント・ファーストの進め方、Claude Code・GitHub・Zulipという道具、リモート中心・フレックスタイムの働き方、副業や週数日の業務委託での参加相談も可能なことを書きました。

もう一つの「なかまの森」というウィンドウには、こう書きました。「この会社、じつは 人間より AIしゃいんのほうが 多い。」実装・レビュー・監査・コンテンツ制作を専門特化したAIエージェントたちが分担し、人間のしごとは判断と最終承認に絞る、という私たちの実際の体制をそのまま採用ページに載せています。同じウィンドウの最後には「…かんぺきに回っているとは言わない。まだ ためしながら 育てている最中だ。」とも書きました。ここを盛らずに書くかどうかは、公開前に私たちが判断した点です。

公開後に起きたこと

プレスリリースの配信は2026年9月3日でした。配信当日17時24分時点のPR TIMES上のPVは191、提携配信面への転載は毎日新聞デジタル・産経ニュース・時事ドットコム・東洋経済オンラインなど30媒体に及びました。いずれもPR TIMESの提携配信面への原文転載であり、編集記事として個別に取材されたわけではありません。

作ってみて分かったこと

公開後もいくつか改善を重ねました。応募フォームを世界観のまま追加し、スマートフォンでメッセージウィンドウが重なる不具合を直し、スマホでも十分に歩ける区間を確保するためにマップを縦に延長しました。募集条件に残っていた(仮)の表記も外して確定させ、GA4での計測も後から組み込みました。旅の体験を壊さずに応募フォームやスマホ対応、計測といった実務要件を後から積み増す作業は、最初から全部を作り込むよりも神経を使う作業でした。

まとめ

楽しませる設計と、きちんと動く設計は、別々に検証したほうがいいというのが今回の実感です。同じような採用ページやWebサイトのご相談は、お問い合わせからご連絡ください。

出典:

• PR TIMES: 群馬のIT企業Leadeas、ドット絵RPGの世界を旅する採用ページ「LEADEAS QUEST」を公開
• LEADEAS QUEST(採用ページ)

※ この記事は AI を使用しています。Leadeas が自社開発した AI エージェント基盤で下書きを作成し、人間のレビューを経て公開しています。AI ネイティブ開発会社として自社の技術をそのまま実演する目的で、この手法を用いています。(詳しくは AI 利用ポリシー)