Skip to content

p2hacks2023/pre-10

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

P2HACKS2023 アピールシート

プロダクト名

Icer

コンセプト

地球温暖化×ひんやり
リサイクルをしたいが行動できない人に提案をする
  

対象ユーザー

フリーザー(ユーザー)=リサイクルしたいけど行動に移せない人
解凍者(回答者)=質問に回答してくれる人

利用の流れ

<質問を投稿する流れ>  初めの地球の画面から”凍稿ボタン”を押すと質問画面に移る。
 質問画面から、質問内容を入力する。質問完了。
 地球の画面に青のピンが追加され、そこに質問が追加される。
<提案を投稿する流れ>
 地球の画面上にある赤以外のピンをクリックすると未解決の質問に飛ぶことができる。質問の答えを記入して”カイトウ”をクリック。
 そこに解決策が追加される。回答完了。
 (ピンの色分けで解決具合を視認できる。)
<解決策決定までの流れ>
 ピンの色が赤(合計のI seeが15個以上または1つの解決策に10個のI seeがつく場合)になったときに質問の解決策が決定したことになる。
 (回答には”I see”というボタンがついている。”I see”ボタンとは」「いいね」と思ったときに押すボタン。)

推しポイント

<全体ポイント>
 地球温暖化対策のリサイクルすることにより、SDGs目標の12つくる責任つかう責任、13気候変動に具体的な対策が達成される。
 ひんやりという曖昧なものを伝わりやすいよう定義した。
<デザインポイント>
・ロゴ
  遠くから見ると地球に見える
  近くで見ると凍ったペンギンに見える
  青は信頼の色
  緑は安らぎや落ち着き、平和
  黄金比で描かれている(一般的に美しいとされている)
・ペンギンのイラスト
  みんなから好かれるようにかわいい表現にこだわった。
  ペンギンが氷づけから溶けていく表現
  未熟のひなを使っているのは、助け合うという意味
<アイデアポイント>
 行動を動かせない人を氷として回答者を解凍者とすることにより、ひんやりの定義に寄り添うものにした。また氷が溶けてひんやりするイメージを追加した。
 使えないものを使えるようにする(リサイクル)と凍ったものを溶かして使えるようにする。(冷凍食品→ひんやり化)というイメージ。
 凍った自分を他人からの愛のある意見により解凍する。でも、そこにはあくまで「意見」という直接的に「解決」しているわけではない微妙な距離感がある。=「ひんやり」
<機能ポイント>
 地球温暖化について意識しやすいように最初の画面は地球にしてある。
 質問を投げた時は一番冷たい南極スタートで解凍されたら暖かいほうへと移動されるようになっている。
 意見などを浮かばない人でもI seeボタンとして参加できる。
 回答量とI seeボタンタップ量で凍り付いたペンギンが解凍されていきイラストも変化するようになっている。
<ネーミングポイント>
 Icer=愛 × Ice(氷) × Answer(解凍)× I see

image

開発体制

役割分担

  • テックリード
  • デザイナー 
  • 企画家
      

開発における工夫した点

チームを組む前は初対面ばかりだったのでボードゲームなどで遊びながら作業を行った。雑談を多めにすることにより場の雰囲気がよくなりながら作業に集中できた。ほめ合いの精神を意識してストレスの緩和をはかった。
プログラミングが苦手な人が多いチームだけどテックリードをもとに教えられながら地道にがんばった。
それぞれのスキルを活かし役割分担をし効率的に仕事を成し遂げた。

開発技術

短期間での開発のため、できる限り慣れているものや学習コストの低い言語を選択した。
利用したプログラミング言語
 フロントエンド:Typescript
 バックエンド:Python,SQL
 など

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

image

バックエンド:FastAPI
フロントエンド:React,Next.js,Material UI,three.js(react-three-fiber)

バックエンド側では、PythonでAPIを設計できるFastAPIを採用した。
フロントエンド側では、メインのフレームワークとしてNext.jsを使用した。

また、短期間で質の高いUIを完成させるために、UIフレームワークである、Material UIを採用。

3D表現を実現するために、three.jsを使用。Reactで利用するため、react-three-fiberを使用した。 状態管理には、recoilを使用。

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

  • Figma
    プロトタイプの作成や、デザイン関連の打ち合わせ時に使用した。
  • Apple フリーボード
    アイディア出しの際の共有ノートとして活用した。
  • Adobe AI,Ps,Ae
    アイコンなどの編集や、資料用の素材の作成に使った。
  • Cloudflare Pages
    フロントエンドのNext.jsのデプロイ先として利用した。
  • Conoha VPS
    データベースやAPIのデプロイ先として利用した。
  • Github Actions
    開発サイクルを効率化するために、デプロイやビルドを自動化した。
  • phpMyAdmin
    SQLなどのデータベース操作には、phpMyAdminなどのGUIツールを使うことで、プログラミングが苦手な人も、データベースに触れるようにした。
  • Visual Studio Code
    コードの編集に使用した。