披露宴で使うお色直しのドレス色当てシステムを18時間で作成した

経緯

参加者がお色直しのドレスの色を予想し,
あたった人に抽選でプレゼントするという催しが
昨今流行っているようです.

我々夫婦も時代の潮流に乗り,
この催しを行うことにしました.

そこで, 投票ボックスの手作りor購入だとかペンライトの購入をする必要がでてきました.
投票ボックスへ紙で投票というのはどうも味気ないということで
当初ペンライトに番号を紙で貼り付け,
当選番号を発表するという方法を考えていました.

しかし, ペンライトの値段をみるとびっくり仰天
数百円だと思っていましたが20本で1000円ほどすることが判明しました.

ただでさえ莫大なお金を溶かしているのに,
ペンライトという今後の使い道がまったくないその場限りのものに
お金を使うのが嫌になり,
せっかくだから職業をいかして投票ページを自作しようと思い至りました.

作成したもの

作成したものは以下の通りです.

• ポップアップ
• 投票ページ (Next.js)
  • 投票ページ
  • 確認ページ
• API (Rails)

ポップアップ

このポップアップは印刷し, 式場のウェルカムスペースに設置します.
Figmaをつかってデザインを作成しました
デザインにあたって必要になるドレスなどの素材はAIで生成しました
先人たちのデザインを参考にしましたが, どうもすべて文言が
"Which color do you think"になっていて
なんだか好みではなかったのでちょっとオリジナリティを出しました

作ってるときはめっちゃイケてると思ったのですが今見るとださい気がする..

投票ページ

一昔前におしゃれなホームページで使い古されていた背景に四角いボックスを配置するデザインを作りました.
ここで使われているドレスの素材もAIで生成しました.
デザインは初心者というか素人なので, どこかで見たことがあるようなデザインしか作れませんが
それなりに見れるものができていると思います

当初選択するとborderで囲まれるようにしようと思っていましたがあまりにもダサかったため, 妻とも相談しUIとUXを調整していきました

オッズ機能

ただ投票するだけだとつまらなかったので,
友人も自分もギャンブルが好きなことから少しでも射幸性を煽れればと
オッズを導入しました.
計算式は特に難しいこともせず単純に割り算をしているだけです.
あまりにもオッズが偏ったときのために, 最低金額を3000円とし,
原則 オッズ * 1000円を私のポケットマネーから出すことにしました

おわりに

vercelのような無料サービスを使わなかったので,
なるべく少額ですむように,持っているドメインを使い,rdsとec2はテスト時と当日のみ立ち上げるようにしました.
rdsを建てたりしていると,消し忘れたときにペンライト買うより高くつく可能性もあるので注意が必要です
Webエンジニアの方が披露宴をするときはぜひ参考にしていただければとおもいます