推しアイデア
皆で変更したい校則を共有して、投票することができる！
世界を変えよう-school rules-
―
あなたの投稿と投票で、学校の規則が変わる！
作った背景
テーマの"こうそく"から"校則"を連想。校則変革を学校全体で感じることのできるアプリを作成することにしました！
推し技術
ユーザビリティを考慮した美しいUIと レスポンシブ！ また、フロントをNext.js、バックをRailsで作成することで、作業の効率化を図りました。
プロジェクト詳細
概要
校則変更案を投稿し、学校の友人たちと共有することができます。 投稿にいいねをつけたり、他人の案を見ることで友達と盛り上がりながら校則について考えることができます！ 校則変革を目の当たりにできることも…‼️
作った背景
中高生にとっては学校が世界の全て でも校則がなぜ変更できないかを聞いたり、先生に交渉するなどはなかなかできないと思います。 そんな学校の校則を、友人と盛り上がりながら変革に携わることができれば、より学校生活が楽しくなると考えました😀
主な機能と画面構成
ログイン
Webアプリを開くとまずログイン画面が表示されます。
アカウント作成した際にデータベースに保存されているアカウントでログインすることができます。
アカウント作成は下の"アカウント作成はこちら"から飛ぶことができます。
アカウント作成
新規アカウントを作成します。
メールアドレス、パスワード、アカウント名、学年、性別という多種のデータを保持します。
学年、性別は統計にも利用されます！
投稿の表示/新規投稿
ログイン後のホームページです(これはパソコンの画面になります)
他のユーザの投稿が表示されます
右下のプラスボタンを押すと…
新規投稿が可能です！
投稿はすぐに反映されます
ユーザ情報の表示
ログインしているユーザの情報を提示します。
自身の投稿を振り返ることも可能です！
校則の表示
登録された校則が表示されます。
変更案を投稿するにあたって校則は確認しておきましょう！
こだわった箇所
- Figmaでの入念な話し合い
早くからFigmaで細かい仕様まで話し合い、方向性を決定しました。
- UI →ターゲット層である中高生が扱いやすいデザインを心がけました。 色を三色程度で抑え、あたたかみのあるオレンジを基調としました。
サイドバーの表示や、リスポンシブデザインを意識しました！
- DBに関連性を持たせること →ログインしているユーザーがこのポストに対してのいいねを持っているかを判定する際に必要だった。
- データの分析 →カテゴリ別、学年別などのデータ数をカウントすることで、どの校則に関する意見が多いかわかるようにした
使用技術
