##概要
2026 年 3 月に開催された「技育 CAMP ハッカソン vol.1」で開発し、最優秀賞をいただきました！
人生初のハッカソンかつ個人チームでの参加だったので最初は不安でしたが、良い結果を残すことができて良かったです！
##制作物について
制作したのは「YOMi（ヨミ）」という一冊の本を一つの「星」に見立てて記録し、自分だけの星空を作る読書管理アプリです。
読書をしている人なら一度は経験したことがある「本を買ったのに結局読んでいない」「読書のモチベーションが続かない」「読書記録アプリで記録するのが面倒」「知識を身に付いている実感が湧かない」という悩み。
これらの悩みを解決し、楽しく読書管理をしてもらうためにこのアプリを制作しました。
##機能紹介
このアプリでは本を 3D の星で管理します。進捗が進むと星が輝いていき、最後まで本を読むと同ジャンルの星同士が線でつながり「星座」になります。これで知識の繋がりを可視化することが出来ます。
「化学の本をたくさん読んだから星座が大きくなってる！」というように自分の知識の広がりを眺めて楽しむことができます。
星をクリックすると、登録した本の詳細情報の確認や読書メモを書いたり、進捗を変更できます。
星を追加する際は、キーワード検索やバーコード読み取りで ISBN を使った検索ができます。検索結果は Google Books API で書籍情報を取得し、バーコード読み取りは zxing というライブラリを使いました。
(※ 動画は発表のスライドで使っていたものを転用しているので倍速です)
スマホのジャイロ機能にも対応しました。スマホを 360 度で動かして、自分の作り上げた星空を探索できます。未読本を「観測を待っている星」と捉えることで、読書への前向きな一歩を後押しする設計にしました。
さらに、本を星に見立てて管理するというコンセプトや使い方が分かるようにアプリを初めて開いたときに簡単なチュートリアルを表示するようにし、初めてのユーザーでも迷わないような設計になっています。
##技術スタック
技術スタックはこんな感じです。多いので箇条書きで書きます。
- フロントエンド
- フレームワーク: Next.js
- CSS フレームワーク: PandaCSS
- UI フレームワーク: LIftKit
- 3D グラフィック: Three.js
- ホスティング: Cloudflare Pages
- バックエンド
- フレームワーク: Hono
- バリデーション: Zod
- ユーザー認証: Better Auth
- ORM: Drizzle ORM
- データベース: Cloudflare D1
- 書籍情報: Google Books API
##こだわりポイント
今回の制作で特にこだわった部分は、UI 関連の表現とジャイロ機能です。
テーマが「宇宙」ということで、UI で世界観を壊さないように、綺麗に見えることを意識して作りました。
また、開発時に使った UI フレームワークの LIftKit は黄金比ベースで作られているため、人間が無意識に美しいと感じられるデザインになったと思います。フィードバックを頂いた方からも「iOS のガラスのように UI が綺麗で、Web アプリだと思わなかった。」という嬉しいお言葉をいただきました。
ジャイロ機能は開発終了の 3 日前に思い付いた機能でしたが、なんとか実装まで持っていけました。PC の DevTools で使えるデバイスモードでは、ジャイロ機能の検証ができないため、コードを書いて実機のスマホでテストして…を繰り返す作業をしていました。開発にかなり手間取った分、良い機能になったと思います。
