P2HACKS2025 アピールシート

プロダクト名

U'n'IVERSE(ユニバース)

コンセプト

対面でのコミュニケーションを円滑にする、学生向けの気軽な名刺交換サービス

対象ユーザ

• 日ごろから創作活動に励み人間関係を広げたいと考える学生。
• 様々な分野の創作に興味を持ち、同じ趣味を持つ人を探している学生。
• 気が合う友達を作りたいがすでにコミュニティができており、もうだれかに話しかける雰囲気ではないなと思っている学生。

利用の流れ

1. スキャンを選択するとカメラモードに切り替わり、相手の名刺のQRコードを読み取ることができます。
2. サインアップして自分の名前、肩書、ソーシャルリンクを入力すると、名刺が自動生成され、相手との名刺交換をすることができるようになります。
3. 名刺を交換すると、画面下には交換した相手とのつながりを表すユニバースが展開されます。
4. 交換した人の友達(自分とは名刺交換していない人)が薄暗く表示され、次の共有先を見つけることができます。

推しポイント

テーマを大事に

「キラキラ」というテーマから、「星」「星座」と発想を広げ、星座・宇宙といった世界観を大事にしています。本プロダクトは、全体的な配色から落ち着いたテーマを見せながら名刺のデザインやプロダクトロゴから未来のテクノロジー感を見せてくれます。本プロダクトの重要機能「UNIVERSE」では今までに名刺を交換した人の交友関係を光の線でつなぎ、まるで星座のような関係図が表れます。
交換した人の友達が薄暗く表示され、「次この人と交換しよう！」と次の共有先を見つけることができます。既に共有した人を挟んでコミュニティを広げていくことができます。自分だけのUNIVERSEを広げていきましょう！

一般的な堅い雰囲気の名刺交換を、気さくな挨拶を交わすようなカジュアルなものへと変化させた本プロダクトは名刺一枚で相手のソーシャルアカウントへのアクセスを簡単に行うことができます。「自分のキラキラ」を表現するツールとして「名刺」を活用し、星に見立てたソーシャルアイコンから、自分のソーシャルアカウントを共有できます。デジタル名刺であることを表現するために、名刺の角をタップすると裏返るアニメーションを実装したこともポイントです。

実運用を想定したユーザー体験

Figmaを用いたUI/UXデザインに力を入れました。ユーザー登録や名刺表示、UNIVERSEの表示などアイデア出しの時点で実装したい機能が多くなっていました。そこで、UI/UXデザインには特に力を入れ、ページ遷移や表示する情報の整理などをしました。宇宙という世界観を保ちながら、プロダクトの実現したいことがしっかり伝わるユーザー体験を目指しました。

デザインは全て自作

二人のデザイナーの腕により、プロダクトロゴからUIデザイン、発表資料や紹介動画など細部までこだわってデザインされています。デザインは見た目の良さだけでなくユーザー体験にも影響します。使ってみたくなる、使い続けたくなるような魅力的なプロダクトを目指してメンバーで方向性を合わせながらデザイン、実装しました。また、動画内で使用した楽曲もメンバーによって製作されています。これによりプロダクトの世界観を十分に表現できる動画を作ることができました。

スクリーンショット(任意)

開発体制

役割分担

• おんねない：PM/フロントエンド
• まろん。:バックエンド/フロントエンド
• オリーブ:UI,UXデザイン/発表資料作成
• シ〇タロ:UI,UXデザイン/発表資料作成

開発における工夫した点

コミュニケーションをしっかり

オンライン/オフラインどちらのコミュニケーションも大切にしながら開発しました。

オンラインでは、Discord, Notion, GitHub Projectsを活用して雑談からタスク振りまで積極的に行いました。開発に直接かかわるタスクはGitHubのIssue, メンバー間の様々な共有事項はNotion, 雑談や連絡はDiscordと役割によってわけることで情報の体系化を図りました。Notionにて自分の性格ややりたいことを共有したり、Discord内のtimesやz-チャンネルなどで日ごろの小さなコミュニケーションも大切にしました。

オフラインではチームの顔合わせ、事前の勉強会などで毎度昭和温泉を利用しました。オフラインでしかできない効率重視の相談やちょっとした雑談など、いい温泉と美味しいご飯と共に楽しみました。ハッカソン中も平日は大学で集まり、顔を合わせながら開発を進めました。

心身ともに健康に

開発に一番大切なのは健康です。身体の健康は活動時間に直接影響してきますし、心の健康もパフォーマンスに影響します。前述の通り温泉に入ったり食事をとったりすること、またタスク管理によって徹夜をしない開発を実現しました。プロダクトの品質を維持しながらメンバーの健康にも気を配ったマネージメントを心掛けました。

事前に共通認識を作る

昭和温泉での勉強会などを通して、事前にメンバーで技術スタックや使うツールを選定しておきました。そうすることで、デザイナーとエンジニア間でのコミュニケーションエラーが起きづらく、エンジニア同士でも開発の効率化が可能になります。特にデザイナーにTailwindCSSとShadcn/uiを用いることを事前に伝えておいたことで、実現不可能なデザインにならず、スムーズに実装に移ることができました。

練習プロダクトの製作

全く同じスタックでハッカソン開始前1週間を利用してプロフィールページの作成をしました。ここでコミュニケーションツールの使い方の確定や、様々な技術仕様の勉強をしました。デザイナーはFigmaの使い方やTailwindCSSクラスの勉強、エンジニアは環境構築、マネージャーはタスク管理やIssueの立て方の勉強を事前にすることで、スムーズに開発に移ることができました。特にタスク管理に関しては、役割分担やIssueの立て方を確認しておいたことが開発において大きく影響していると思います。

デプロイされている

バックエンド/フロントエンド共にVercelを用いてデプロイされています。実際の運用環境でメンバーが使っていくことで開発段階では見つけられないバグやユーザー体験の改善点を洗い出すことができます。
また、発表の際にも実際に使っていただくことができます。ぜひご体験ください。

ユーザー登録/ログインができる

Supabaseを用いてデータベースを設計しています。ユーザー登録からログイン、交換したユーザーの情報まで全て同期されます。

また、セキュリティ面も意識して実装しています。パスワードはフロントでhash化してから送信しています。QRコードはバックエンドで任意のランダムな文字列を生成し、5分で有効期限が切れるようになっています。本プロダクトは実際に会って名刺を交換することを想定している為、QRコードをスクリーンショットなどで共有して、むやみにユーザーを増やしていくことができない設計になっています。QRコードが任意の文字列であるため、サイト内のスキャナーで読み取らないと機能しないなどの配慮もされています。

PWA Web Appに対応

モバイルでの実用性、配布やアップデートなど保守管理のしやすさのどちらも実現するためにPWA Web Appに対応しています。Webアプリとしてネイティブアプリのようにモバイルデバイスのホーム画面に追加でき、いつでもアクセスできます。

開発技術

利用したプログラミング言語

• TypeScript
• JavaScript(テスト)

利用したフレームワーク・ライブラリ

• Hono
• React
• Next.js
• html5-qrcode
• react.qrcode
• TailwindCSS
• Vitest(テスト)

その他開発に使用したツール・サービス

• Figma
• GitHub
• Shadch/ui
• Supabase
• Vercel
• VSCode
• GitHub Copilot
• Prettier
• ESLint