【社内ハッカソン】デザイナーがエンジニア向けアプリ作ってみた。

ネ

ネクストライブ株式会社

2026/07/02

記事画像
 
  • PROGRAMMER QUEST(プログラマークエスト)の宣伝
  • そもそもハッカソンって?
  • 作ったきっかけ
  • デザイン
  • 実装
  • 最後に

こんにちは!デザイナーのせきちゃんです。
私は、ネクストライブの社内ハッカソンに参加してるのですが、
今年の夏にエンジニア向けの学習アプリをリリースしました。 

アプリの名前は「PROGRAMMER QUEST(プログラマークエスト)」。
プログラマークエストとは、エンジニアがよく使う英単語を学べる学習アプリです。

この記事では、デザイナーの私が社内ハッカソンに参加し、PROGRAMMER QUEST(プログラマークエスト)を作ることになったきっかけや開発の流れを、簡単に紹介したいと思います!


PROGRAMMER QUEST(プログラマークエスト)の宣伝


PROGRAMMER QUEST(プログラマークエスト)とは、エンジニアがよく使う英単語を学べる学習アプリです。アプリでは、始まりの村(勉強モード)と 魔王の城(テストモード)にチャレンジできます。

始まりの村では、プログラミング英単語を学べます。 「初級モンスター討伐」では単語帳形式で学び、「上級モンスター討伐」ではタイピング形式で練習できます。

魔王の城は、実力を試すステージです。 「四天王討伐」は4択形式のテスト、「魔王討伐」はタイピング形式で挑戦します。

英単語の意味はもちろん、正確な綴りまで覚えられるようになっており、学んだ知識を実際に使える形として身につけながら、エンジニアとしてのレベルアップを目指せるアプリになっています。




PROGRAMMER QUESTはこちら → https://programmerquest.com/


そもそもハッカソンって?


ハッカソンとは、短期間でアイデアを形にする開発イベントです。 
決められたテーマの中で、エンジニア・デザイナー・企画などの多職種が集まり、数時間〜数日の限られた時間でプロダクトを完成させます。

今回私が参加したのは、ネクストライブで開催された社内ハッカソン。 
有志のメンバーが集まり、職種を越えてチームを組んでプロダクト作りに挑みました!


作ったきっかけ


実は、最初の社内ハッカソンでは、まったく別のグルメ系アプリを作っていました。
最初のアプリ制作の開発を進める中で、苦戦したのは「英語」。
もちろんデザイナーとして働いていても英語は必要ですが、
今回のハッカソンでは、圧倒的に英語に触れる機会が多く、何度も翻訳アプリに頼ることになりました。

「いっそ英会話教室に通ってみる?」とも考えましたが、私が覚えたいのは英会話ではなく実務に役立つ英語。
調べてみたものの、エンジニア向けに特化した英語学習サービスはあまり多くありませんでした。

そんな中、もともと作ろうとしていたアプリは、進めるうちにどんどんアイデアが膨らみ、短期間のハッカソンでは絶対に完成しないボリュームになってしまいました。
開発も徐々に停滞していく中、私の中で「とりあえず形になるものを作りたい!」「どうせ作るなら、この開発に役立つものにしたい!」という思いが強くなっていきました。

そこでハッカソンのメンバーに相談し、グルメ系アプリの開発は進めつつ、短期間でサクッと形にできそうな英単語学習アプリPROGRAMMER QUEST(プログラマークエスト)を開発することになりました。


デザイン


ハッカソンメンバーに相談する前に、ある程度見せられる形にしたいと思い、まずはアプリ名を考えました。
ChatGPTと相談していく中で惹かれた名前は「QUEST(クエスト)」。
クエストをクリアしながらエンジニアとしてレベルアップしていくというコンセプトで、アプリ名は PROGRAMMER QUEST(プログラマークエスト)に決定しました。

そう思った瞬間から、デザインが一気に進み始めました。 
アプリ構成は「勉強モード」と「テストモード」の2つ。

楽しみながら英語を学べることをテーマに、始まりの村(勉強モード)と魔王の城(テストモード)という2つのクエストを用意しました。

モンスターを倒しながらレベルアップし、魔王討伐に向けてクエストに挑戦するストーリーをイメージして作成しました。


実装


デザインがまとまったところで、いよいよ実装フェーズに入りました。
今回参加したハッカソンメンバーは3人。制作期間は約4ヶ月。
今回のアプリでは、Next.js(React)を採用しました。

制作は、週に一度、仕事後に集まるハッカソン形式と、各自が担当画面を持ち帰って進める宿題形式。
開発の中で、必要な機能やページがどんどん増えていきましたが、デザインと実装を行き来しながら少しずつアプリとしての形が見えてきました。

もちろん、謎のエラーにぶつかったり、思わぬバグが出たり…とバタバタしながらの開発でしたが、そのたびに「パワー!!」という謎の合言葉を掲げて乗り越えていきました。
そんなパワー精神のおかげもあって、楽しみながら無事に実装フェーズを走り切ることができました!


最後に


今回のハッカソンでは、普段触れない技術に挑戦したり、エンジニアと密にコミュニケーションを取りながら進めたりと、デザイナーとしてとても貴重な経験ができました。

何より、自分が「欲しい!」と思っていたアプリを、メンバーと力を合わせて形にできたことが本当に嬉しかったです。思うように進まない瞬間もありましたが、振り返ると全部ひっくるめてとても楽しい制作時間でした。

そして今は、新しいメンバーと一緒に次のアプリ制作にも挑戦しています。 
完成はまだまだですが、しっかり学びながら、楽しく作っていきたいと思っています。
もちろん、グルメ系アプリもいつか完成させるつもりです!!


デザイナーがエンジニアと協力しながら作ったPROGRAMMER QUEST(プログラマークエスト)。
魔王討伐のクリア条件は少し難しめですが、ぜひチャレンジして遊んでみてください!
0
この記事が役に立ったら、いいねをお願いします!
個人が特定されることはありません。
#課外活動

おすすめの記事

  • パティシエとしてどう生きる?働き方・店選び・独立——未来を広げるキャリア講義
  • 鎌倉時代から続く有馬最古の宿  一皿、一泊、一会話に宿る、老舗旅館の哲学
  • 【京都・老舗工務店が直伝!】付加価値で選ばれる施工管理の心得
  • 「技術の前に、心がある」一流の鮨職人がたどり着いた、一貫の奥深さ。
  • 『街を守るクエストへ RPG風で体験するインフラ設計の世界』 〜ロード・オブ・エンジニア 若手技術者奮闘記〜【成長・やりがい編】
  • 未来の自分、想像できる? 10年働いた先輩に、Before/After聞いてみた!
  • 奈良県の人気パン屋が教える! 〜大手には出来ない強みを生かし、地元のお客様に愛される秘訣とは〜
  • 『街を守るクエストへ RPG風で体験するインフラ設計の世界』 〜ロード・オブ・エンジニア 若手技術者奮闘記〜【調査・検討編】
  • 【街ブラ企画】これって職業病!? 街を歩けば実感する『土木工事』の存在感!
  • 【密着一年取材】若手社員と現場のリアル ~vol.4 もうすぐ入社、まる3年…何もかもが想像以上! ~
  • 目が覚めたら「コウヨウ土木」の「新人・施工管理」になっていた!?~あなたなら、こんな時どうする?~
  • 「ITの世界は突然“嵐”がやってくる。」 そのとき、エンジニアはどう動く?
  • 建設業界を目指す人必見! 社会人デビューのリアルレポ【完成に近づく現場から】
  • 【クイズで学ぶ!】不具合の原因はどっち?ハードorソフト捜査官
  • 創業から50年、厚木で受け継がれる創業の思いとこだわりを紐解く!
ネ

ネクストライブ

ネクストライブ株式会社

本社:大阪府大阪市福島区福島1-4-4 セントラル70 3F

No image available
ネクストライブ
ネクストライブ株式会社
本社:大阪府大阪市福島区福島1-4-4 セントラル70 3F