2026-02-22.11.26.11.mov

エラベル(Elabel)

道を選ぶサポートをする新感覚フローチャート共有SNS

チーム名

チームSA(チーム5)

背景・課題・解決されること

私たちは1回生で、様々な経験を積む段階にいます。
しかし、私たちは知識不足や経験不足からしばしば「何をしたらいいか分からない」、「何が向いているのか分からない」という状況に陥りがちです。 そこで、YESとNOだけで答えるフローチャートを用いることで意思決定が簡単になるのではないかと考え、プロダクトの構想に至りました。

プロダクト説明

フローチャートを共有するSNS

フローチャートをサイト内で手軽に作成・投稿することができるSNSです。
フローチャートはなかなか自分で制作することが難しいですが、今回のプロダクトはそれをみんなが作れるものにしています。 SNS形式にすることで、自分の意見を発信したり、多くの人から多様な意見を取り入れたりすることができます。
サイトはこちらから

操作説明・デモ動画

操作説明

サイトのホームでは、「View」、「SignIn」、「LogIn」を選ぶことができます。
ログインしなくても閲覧(View)はすることができます。
サインインの後ログインをすると、フローチャートを作成・投稿できるようになります。

デモ動画

2026-02-22.11.26.11.mov

注力したポイント

アイデア面

ブレインストーミングを行い、多様な意見を出した後、テーマである「『本当に欲しい』をカタチに」を基準に選定を行いました。 メンバーが抱える身近な問題を中心にアイデアを出すことで、本当に欲しいプロダクト案を考えることができたと思います。

デザイン面

操作性を高めるためにUIをシンプルに実装しました。また、ロード中の画面切り替えはストレスにならないようにreact-routerを用いてSPAでのページ遷移を実装しました。MUIやFramer Motionを活用して洗練されたデザインを目指しました。再利用性を高めるためUIパーツを細かく分割し、コードの可読性を上げる設計を徹底しました。

その他

いいねとランキング機能の実装によってユーザーが「ためになった！」と思ったフローチャートを優先的に見ることができるようにしました。

使用技術

Frontend

• React
• TypeScript
• Vite
• Material-UI (MUI)
• React Flow
• React Router
• Framer Motion

Backend

• Python
• FastAPI

Database & Infrastructure

• Supabase