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

ネ

ネクストライブ株式会社

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
この記事が役に立ったら、いいねをお願いします!
個人が特定されることはありません。
#課外活動

おすすめの記事

  • AI時代に、プログラミングを学ぶ意味はあるのか?開発の最前線に立つエンジニアに聞いてみた
  • AIが答えをくれる時代に、あえて「答えを出さないAI」をつくった会社の話
  • あなたはどのタイプ?エンジニアの活躍を左右する"適性"とは
  • 未来の自分、想像できる? 10年働いた先輩に、Before/After聞いてみた!
  • パン屋の最新設備が凄すぎる!大人気ベーカリーのリニューアルの裏側を徹底調査!
  • 想定外に立ち向かえ! 予定通り進めてなんぼの“立て直し力”
  • 目が覚めたら「コウヨウ土木」の「新人・施工管理」になっていた!?~あなたなら、こんな時どうする?~
  • 【クイズで学ぶ!】不具合の原因はどっち?ハードorソフト捜査官
  • 建物の健康診断”をする仕事? 設計でも施工管理でもない、「調査技術職」という第三の道
  • 本場の名店で修業を積んだシェフが語る 「今日より明日」のフランス料理
  • 【第1回/構造編】電車はなぜ脱線しないのか?~線路に隠された“構造”のヒミツ~
  • 【配属ガチャと無縁の働き方!】 正社員だけど派遣!? 派遣なのに正規雇用!? 「常用型派遣」って何??
  • 【街ブラ企画】これって職業病!? 街を歩けば実感する『土木工事』の存在感!
  • 「課題を解決する」って、つまりこういうこと。 目の前のお客様が困っている【その先】に本当の課題がある。
  • “京都人の心”を未来に繋ぐ  京都老舗工務店が語る、伝統建築の継承と信頼
ネ

ネクストライブ

ネクストライブ株式会社

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

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