ダメ男タイプ診断をつくりました

メンヘラテクノロジーはサブプロジェクトとして性格診断アプリを作ることがたまにあるのですが、今回は「恋のいばら」という映画とのタイアップ企画で診断コンテンツを作らせていただきました。
テーマは「あなたがハマってしまうかもれないダメ男タイプがわかる」という診断です。
映画がダメ男をテーマにしたもので、ダメ男なら弊社は得意ですよということでタイアップさせていただきました

つくったもの

診断はこちらから試せます。ぜひあそんでみてください。 https://dameo.menhera-senpai.com/
このエントリでは技術的なことについて触れようと思います。

技術構成

今回はフロントエンドはNext.js、UIライブラリはMantine、DBにはFirestore、デプロイ先にはVercelを使用しました。弊社が最近得意としている技術構成です。スタイルはMantineが用意しているcreateStylesというhookを使い、emotionで実装しました。デザインから実装までで3週間ほどで作りきりました。

実装する上で意識したこと

映画の公開までに間に合わせる必要があり、開発期間が短かったのでとにかく速く作ってリリースすることを意識しました。技術的に尖ったことはできなかったのですが、期限に間に合わせることはできてよかったです。

次回への申し送り

振り返るとスタイルをemotionで書く意味があまりなかった感じがしていて、素直にCSS Modulesで書けばよかったと思いました。
(2023.09.22 追記). Mantine v7のアップデートでcreateStylesが廃止になり、やはりCSS Modulesで書いておくべきだったと思います。ライブラリに依存するデメリットを感じました。

さいごに

映画の視聴者だけでなく、主演のみなさんにも作ったものをさわっていただけたのがうれしかったです。エンジニア冥利に尽きます。