はじめに
初めてのProgateハッカソンに参加してきました。過去に一度、完全オンラインのハッカソンに参加したことはありましたが、オンラインでの事前開発＋オフラインでの2日間の開発・発表という形式のハッカソンには初めて参加したため、なかなか新鮮でした。
また、なんと初めての参加で最優秀賞をいただくこともできました。
せっかくなので、今回の開発で考えたことや感想などを残す目的でこの記事を執筆します。
ハッカソン概要
- イベント名：Progateハッカソン 2026.07
- テーマ：おもてなし
- 事前開発：2026.06.24~07.03（オンライン）
- 開発・発表：07.04~05（対面）
作ったもの
概要
- アプリ名：たびぽん - TABIPON
- 旅先で写真を撮影、その写真がスタンプ調に加工され、アルバムに蓄積されていく
- スタンプをアルバムに追加する際に、スマホを振り下げることでスタンプを押すことができる
技術スタック
- 形式：iOSアプリ
フロントエンド
- 言語：
TypeScript - フレームワーク：
React Native/Expo
バックエンド
- 言語：
Python - フレームワーク：
FastAPI
インフラ
- APIサーバー：
Railway - DB：
Supabase Postgres - ストレージ：
Supabase Storage
開発の流れ
事前開発
キックオフの事例紹介で加速度センサーの話が出ていて、そこから「加速度センサーを使ったら面白いものが作れそう」というチームメンバーの声があり、私がアイデアを膨らませていく形で「たびぽん」の原型ができました。加速度センサーは今までに使用したことがあったことからイメージがつきやすかったため、スマホを上から下に振る動きでスタンプを押すことができたら、面白い体験になり、周囲の人から見えても「あの人たちは何をしているんだろう」と興味を持ってもらえるものになるのではないかと思いました。
有名な観光地にはすでに様々なサービスやグッズ、スタンプラリーが存在しますが、穴場の観光地や自分にとって思い出に残ったスポットでも、どんな場所でもオリジナルスタンプに変換できるというのが話し合いの中で面白いのではないか、となりコンセプトになりました。旅行アプリにありがちな観光地の記録だけでなく、個人的な思い出の場所も残せるようにすることで、旅先での体験に寄り添うおもてなしを表現しました。
機能として、カメラ・ハプティクスなど盛り込みたいものが多かったため、Webアプリではなくネイティブアプリという形式を選びました。
また、MVPも早い段階で決めていて、「スマホを振り下ろしてスタンプを押す」という体験がアプリの核なので、その体験を最大化する、という方向で詰めていきました。
役割分担
3人チームで、私はアイデア出し・デザイン作成・フロントエンド実装全般・スケジュール管理を担当しました。役割としては上流から下流まで一通り関わる形になりました。（多いですね）
チームの中で一番フロントに詳しいこと、UIの作成を担当したかったこと、また次の予定の設定や話し合いの議事録をとっていたことから、自然と開発スケジュールやタスク管理の役割も担っていました。
UIの作成
1からデザインファイルを作成した方針とその理由
ハッカソンではAIによってUI/UXとロジックを同時に実装するケースが多いかと思いますが、あえてデザインを確定して上で実装に移る形にしました。作成した方法としては、pencilというfigmaライクなデザイン作成ツールでワイヤーフレームを作成したのち、デザインカンプを作成しました。
この方針にした理由として、100%AIによってデザインされたプロダクトは情報・導線設計に多少なりとも違和感があり、アイデアが良くてもプロダクトの良さを活かしきれない側面があると感じていたからです。直感ですが、情報の優先順位が考慮されていない配置・必要以上の色数が使用されている傾向が強いような気がします。
特にハッカソンでは時間が限られているため、こうした部分は切り捨ててしまいがちです。ですが、せっかくのアイデアの魅力を最大限伝えるには、おろそかにしてはならないと考えてました。 特に今回は、「スマホを振ってスタンプを押せる」という体験を重視していたため、この体験のノイズにならないよう、また最大限楽しめるような画面構成を目指して作成しました。
実際にやったこと
作成方針は以下のとおりです
- どんなことをするアプリかをまとめたものをClaudeに渡し、ワイヤーフレームを作成させる
