結婚式Web招待状を自作した話

この記事はクラウドワークスAdvent Calendar 2023 シリーズ1の19日目の記事です。

はじめに

先日、結婚式を挙げました。
10月27日と28日の2日間で神前式, 披露宴, 2次会を行いました。
準備する中で、これは自作してみようと思ったことがあります。
それは「招待状」です。
自分はブログ以外で自作したサービスを他の方に利用してもらったことがないため、いい機会だと思いました。
手書きの招待状や無料の結婚式Web招待状も一応検討に入れていたのですが、それぞれのメリット, デメリットを考えて自作を始めました。

	メリット	デメリット
手書きの招待状	- 温かみを感じる	- 自分の字が汚い - 招待するゲストが多いため作成・送付が大変 - 返送を忘れる方がいるかもしれない(自分は忘れたことがあります、ごめんなさい)
無料の結婚式Web招待状	- テンプレートが用意されているため作成が容易 - エラーが起こる可能性が低い	- デザインが自作できない - ドメインがそのサービスのものになっている - 2次会の出欠が取得できない(基本は挙式・披露宴のセットのみ) - 挙式と披露宴が別日別会場だったため、そのような招待状が作成できない - サービスの広告が載せてある
自作のWebの招待状	- カスタマイズしやすい(デザイン, ドメイン, 内容) - ゲストの方に自分の職業を紹介しやすい	- エラーが起きたら自己責任 - ある程度工数がかかる

(親族用には手書きの招待状を作成しました)

構成

作成手順

式の2ヶ月前までには挙式, 披露宴の案内を送る必要があったため、下記のような流れとなりました。

1. 挙式, 披露宴の招待状作成
2. 前撮り後に写真を差し替え
3. 2次会の招待状作成

一旦、挙式, 披露宴の招待状さえ作成してしまえば、その後1ヶ月くらい空き時間があったので気持ち的に余裕はありました。
2次会は場所・時間が決められなかったので、追加開発することにしました。
自作するので、ある程度開発日程をコントロールできました。

デザイン

画像とプロトタイプは妻に用意してもらいました。
デザイナーを仕事にしているので流石の一言です(Webデザイナーではないです)。
イラストレーターを使いこなしていました。
蛇足ですが、メニュー表や席次表等のデザインも同じ柄・色を使ってデザインしていました。

◆ サービス画像一部抜粋

1	2	3

開発技術

※ 仕事で利用している技術は今回は利用していません

◆ Next.js
https://nextjs.org/

副業でReactを使っていたことがあったり、プライベートでNext.jsを触っていたので今回はNext.jsを利用しました。

◆ Vercel
https://vercel.com/

ホスティングサービスとしてVercelを利用しました。
GitHub連携でデプロイが容易に行えるので便利でした。
Staging, Productionの環境をほぼ自動で作成できるので作業が少なくて済みました。

◆ React Hook Form
https://react-hook-form.com/

フォーム作成に利用しました。
状態管理やバリデーションが行えます。
今回はZodの方でバリデーション機能を行いました。

◆ Zod
https://zod.dev/

スキーマ検証ライブラリです。一度利用してみたかったので追加しました。それ以上の理由はないです。
出席ボタン押下後、欠席ボタン押下後で出すフォームを分けた場合に、discriminatedUnionという機能で条件分岐でバリデーションが行える機能が便利でした。

◆ tailwindcss
https://tailwindcss.com/

CSSは得意ではないためclass指定でCSS当てれるtailwindcssを利用しました。
個人的に愛用しています。

◆ Notion
https://www.notion.so/
https://developers.notion.com/

APIを利用して、回答をNotionのデータベースに蓄積しました。

◆ Slack
https://slack.com/
https://api.slack.com/lang/ja-jp

APIを利用して、回答があった場合に通知されるようにしました。
また、サービスでエラーがあった場合に通知されるようにしました。

良かったこと

仕事でも経験していますが、知人以外(海外等)のアクセス(攻撃?)が確認できました。実際に経験してみるとどう対応していこうか考えるきっかけになったので良かったです。
仕事同様に責任感を感じれたことも良かったことの一つです。
普段プライベートでコードを書いているときは技術検証や学習のためなので、考慮漏れやバグがあっても急いで直すことはしないのですが、今回はバグがあればすぐに迷惑をかけることになる環境だったので気が引き締まりました。

悪かったこと

個人での開発のため制約が少なかったです。何をしても誰からも何も言われない環境ですね。
それ故に、Commitの粒度やCommitメッセージが疎かになっていました。
今回はデプロイしたPRの前のソースコードに巻き戻すことがなかったので問題なかったですが、普段から意識すべきだなと反省しています。
フォーム送信後にメールなりSNSで送信完了メッセージを送ってあげたほうが親切だと思いました。
送信したかわからなくなり数回送信する方もいらっしゃったので実装しておけば良かったと思いました。

最後に

エンジニア始めた頃に、自分の作成したアプリケーションを知人に使ってもらいたいという思いがあって、それが叶ったのは嬉しかったです。
友人達の反応も良かったので自作して良かったと思いました。
妻と協力して何か一つのものを作れたのでよかったです。今回の結婚式で唯一主導権を握った成果物でした。
もし今後同じような機会がある方は是非自作することをお勧めします！

最後にクラウドワークスでは様々な仲間を募集しております。
ご興味のある方は以下のリンクからご応募ください！
https://crowdworks.co.jp/careers/