メンバー
NINE-NAIST起業部
@nine_naist
Taichi Masui
@massaman0917
橋本沙知
@smhs3974
TAKUTO
@takuto_8627
内田想
@uchida0825
島岡宏彰
@shimashima0321
作品ページ
0. チーム紹介
- チーム名 : OverHack
由来 : ご飯好き x ゲーム好き +hack → overcook
- 目的 : 全員が新しい分野に飛び込み、手を動かしながら学んでいく!
- ビジョン: うっちーの地元力、しましまの技術実現力、くどーの安定感をまっさんがまとめ上げる!
1. アイデアの発端(背景)
- 着想を得たきっかけ:
- 地元民うっちーのひとこと「若いやつがこねえ。」
- 世の中のまちおこしに倣って、SNSでうまくバズらせられねえかね??
- まっさん「SNS投稿する感覚で、案内板出来たら楽しくね??」
- SNS投稿での課題ってなんだろう→しましま「SNS投稿、顔隠すのとかめんどくね?」
- くどー「ゲームのガチャっぽく、顔隠す画像もレア演出があれば面白くね??」
- ものづくりの方向性 / 解決したい課題:
- 豊能の知られざる写真スポットを、外からの観光客に見つけてもらう!!!
2. 「2度見度」へのこだわり
顔を守るAI機能でプライバシーも安心!
- これまでのSNSは、写真をそのまま投稿していました。ステッカー(スタンプや画像)を上から貼って、顔を隠すことをした人もいると思います。
- マスカレードパネルはAIが顔を自動で守ってくれます!つまり、投稿前にステッカーを自分で貼る必要がなくなるのです!
投稿されるまで、どんなステッカーが貼られるかわからない!
- 実際に投稿された際のステッカーがランダム!レアなステッカーが見られるかも!
- (プレビュー画面では仮のステッカーが貼られています。顔が検出されているか不安だもんね。)
3. 豊能度/地域貢献へのこだわり
ステッカーの画像が豊能っぽい!:
- レアステッカーには町指定文化財の古面を採用。
- その他、イノシシをはじめとした豊能にまつわるステッカーがいっぱい!
4. 技術力のごだわり
AIによる顔推定、ステッカーの追加
- YOLOを用いて画像から顔を検出!推定位置にステッカーを載せる点を自動化!
5. 完成度(UI/UX・ProtoPediaの出来栄え)
シンプルなUI
- 投稿がめんどくさくならないために、手間を最小限に!
- 写真載せる、名前書く、コメント書く!おしまい!
温かみのあるデザイン
- 舞踏会をイメージした温かみのある配色に!
- 背景画面では、ポップな仮面の人たちがお出迎えしてくれます。
HTMLを組み込んだ強調
- protopediaはmdだけじゃない!HTMLも駆使してでかい文字を入れよう!
6. 今回の学びやチームでの感想
苦労した点・克服方法:
各々が新しい領域に挑戦しました!
- まっさん : 初めてのインフラ、遊撃部隊、マネジメント
- しましま : 初めてのバックエンド、FastAPIやYOLOを使った顔検出まで!
- くどー : 初めてのフロントエンド。トラウマだったVueを克服!
- うっちー : 初めての技術開発。アイディアからどうやって実現していくかを肌で感じました!
アイディア。どうやって豊能らしさを出していくか。
今後の発展アイデア:

メンバー2: しましま
- 役割: バックエンド初めてエンジニア
- 得意な技術/スキル: とりあえず動くものを作る!!!
- 興味・情熱: 創る そして 壊す
メンバー3: くどー
- 役割: フロントエンド初めてエンジニア
- 得意な技術/スキル: AWS EC2でサーバ構築、CD構築(今回使用していないが)
- 興味・情熱: 自分のスキルアップになりそうな開発、お金が生まれそうな開発が好き
- 連絡先:🍆
メンバー4: うっちー
- 役割: デザイン、発表者
- 得意な技術/スキル: 豊能町民として豊能町の魅力を伝えること。
- 興味・情熱: 未知の世界へがむしゃらに突っ込む。挑戦して、また挑戦!
1. システム全体図
フロントエンド
- フロントエンドはVue.jsを採用。
- デザインにはTailwindCSSを用いてモダンな設計に。
バックエンド
- バックエンドはFastAPIを採用。
- Pythonと顔検出モデルの利用が相性抜群!
- データベースもsqliteを用いた王道設計!
インフラ
- プラットフォームにはDockerを採用。
- 公開にはNgrokを採用。
- フロントのパッケージマネージャにはyarnを採用。
2. 使用技術・ツール・デバイス
- 開発環境:
- ソフトウェア / フレームワーク:
- Vue.js, FastAPI (Python), TailwindCSS , YOLO
- その他:
3. 具体的な処理・機能フロー
3.1 ユーザが写真を投稿!
- 写真を掲示板に投稿しよう!
- あなたの名前と写真へのコメントをつけちゃおう!
3.2 投稿を確認!
- 写真から顔にステッカーが載せられるよ!
- 実際に載せられるステッカーとは違うのがポイント!
3.3 掲示板に反映!

投稿が行われるまでは何が顔を守るかわからない!!
レアな仮面を目指してたくさん投稿してみよう!
4. 仕様書も作ったよ!
仕様書を作りました!
みんなの理解度を揃えるために仕様書を作りました!