こんにちは！ 私は普段、IT企業でWebデザイナーとして働いています。

私の職場には多くのエンジニアが在籍しており、個人で自由にサービスやアプリを開発する「社内ハッカソン」が定期的に開催されています。

「デザイナーだけど、何か作ってみたい。」

そんな思いから、私もこのハッカソンに参加することを決め、そこで開発したのが、エンジニア向けの英単語学習アプリPROGRAMMER QUEST（プログラマークエスト）です。

この記事では、Webデザイナーである私が、なぜエンジニア向けの学習アプリを作ろうと思ったのか、そして企画から開発、リリースまでの流れを紹介します。

デザイナーがアプリ開発に挑戦してみて感じたことや学んだこともお伝えできればと思いますので、これから個人開発やハッカソンに挑戦してみたい方の参考になれば嬉しいです。

---

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

ハッカソン（Hackathon）とは、「Hack（開発・創造）」と「Marathon（長時間取り組む）」を組み合わせた言葉で、決められた期間内にアイデアを形にし、アプリやサービスを開発するイベントです。

私の会社でも定期的に社内ハッカソンが開催されており、エンジニアだけでなくデザイナーも参加できます。

普段の業務とは異なるテーマに挑戦できるため、新しい技術を試したり、アイデアを形にしたりできる貴重な機会になっています。

---

作ったきっかけ

なぜエンジニア向け英単語学習アプリを作ろうと思ったのか。

実は、最初に参加した社内ハッカソンでは、まったく別のグルメ系アプリを作っていました。

開発を進める中で一番苦戦したのは「英語」です。

普段の仕事でも英語に触れることはありますが、今回のハッカソンではこれまで以上に英語を見る機会が多くありました。 そのたびに翻訳ツールを開きながら作業を進め、「英語がもっと読めたら、開発がスムーズに進むのに」と何度も感じました。

「英会話教室に通ってみる？」とも考えましたが、私が身につけたかったのは日常英会話ではなく、開発現場で役立つ英語です。 そこで調べてみたものの、エンジニア向けに特化した英語学習サービスは意外と多くありませんでした。

「それなら、自分で作ってみよう。」

そう思い、開発中に自分自身が感じた課題をもとに、エンジニア向け英単語学習アプリPROGRAMMER QUEST（プログラマークエスト）を制作することにしました。

---

PROGRAMMER QUEST（プログラマークエスト）とは

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

アプリでは、始まりの村（勉強モード）と魔王の城（テストモード）にチャレンジできます。

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

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

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

---

デザインについて

PROGRAMMER QUESTでは、「勉強」というよりも、「ゲームを遊んでいたら自然と知識が身についていた」と感じられるような体験を目指し、「RPG」をコンセプトにデザインしました。

まずは世界観を固めるためにオリジナルキャラクターを制作し、そのキャラクターをもとに全体のデザインやアプリ名を考えました。 キャラクターを起点に世界観を作り上げたことで、アプリ全体に統一感を持たせることができました。

UIは、学習に集中できるよう、できるだけシンプルな設計を意識しています。 操作に迷わずテンポよく問題を解いていけるよう、必要な情報だけを整理して配置しました。

画面設計はFigmaで行い、実装前にレイアウトや画面遷移を整理しながら制作を進めています。 また、ゲームらしい楽しさを演出するために、シンプルなアニメーションも取り入れました。 派手な演出ではなく、ボタンや画面の切り替えなどにさりげない動きを加えることで、操作する楽しさや心地よさを感じられるよう工夫しています。

学習アプリという堅いイメージではなく、「RPGを遊んでいるうちに自然と英単語が身につく」。そんな体験を目指してデザインしました。

---

実装について

デザインがまとまったところで、いよいよ実装フェーズに入りました。

今回参加したハッカソンメンバーは3人。 制作期間は約4か月です。アプリの開発には、Next.js（React）を採用しました。

制作は、週に一度、仕事終わりに集まって開発を進めるハッカソン形式と、各自が担当画面を持ち帰って進める宿題形式で進行しました。

開発を進める中で、「この機能も追加したい」「こんな画面があった方が使いやすい」とアイデアがどんどん増え、デザインと実装を行き来しながら少しずつアプリとしての形が見えてきました。

もちろん、謎のエラーにぶつかったり、思わぬバグが出たり…とバタバタしながらの開発でしたが、そのたびに「パワー！！」という謎の合言葉を掲げて乗り越えていきました。

そんなパワー精神のおかげもあって、楽しみながら無事に実装フェーズを走り切ることができました。

---

最後に

今回のハッカソンを通して、デザイナーである私にとって「アプリを作る」という貴重な経験ができました。

普段はデザインを担当することが多いですが、実際に実装まで携わることで、エンジニアの視点や開発の進め方をこれまで以上に理解できたと感じています。

また、「こんな機能があったら便利かも」「もっとこうしたら使いやすいかも」と考えながら形にしていく過程は、とても楽しく、ものづくりの面白さを改めて実感しました。

完成したPROGRAMMER QUESTも、まだまだ改善したいことがたくさんあります。 今後もアップデートを重ねながら、より楽しく学べるアプリへ育てていきたいと思っています。

デザイナーだからといって、挑戦できることがデザインだけとは限りません。 少し勇気を出して一歩踏み出してみると、新しい発見や学びがたくさん待っています。

この記事が、これからハッカソンや個人開発に挑戦してみたいと思っている方の背中を押すきっかけになれば嬉しいです。

最後まで読んでいただき、ありがとうございました！