こんにちは！

以前の記事で妊娠を公表しましたが、あれから週数も進み、お腹もかなり大きくなってきました。

ある日、私はふと考えました。

「お腹の赤ちゃん性別が分かったらどうやって報告しようかな…？」

普通に口頭やメールで報告するのじゃ何か味気ないような気がする。

調べたところ、アメリカには「ジェンダーリビール」という、
お腹の中にいる赤ちゃんの性別をサプライズ発表するイベント？文化？があるようで、
最近は日本でも性別発表に工夫を凝らす人が増えてきているようです。

しかし、ジェンダーリビールケーキ（ケーキの中に何か入れる）を作るには技量も時間もないし、
これから出費が嵩むのにお金もかけたくない…。

そこで、私は思いつきました。

「Webサイト作って、ボタンを押したらパンパカパーンと発表するようにすればいいんじゃない？」

ということで、0円で使えるジェンダーリビールサイト、作ってみました！

制作背景

今回、可愛いデザインのWebページに仕上げたいと思いつつも、
仕事をしながら合間に制作…ということで、あまり多くの時間を費やすことは避けたかったので、
今流行りのAI「ChatGPT」にHTML/CSS/JavaScriptのベースを作ってもらうことにしました。

お、おう…取り敢えず性別は後から変えられるような感じで作っといてもらえる？

2回目の質問でソースコードを出してくれました（何故エディターにphpと表示されているのか謎）。

しかし、このコードではサイトにアクセスした瞬間に性別が表示されてしまうので、
ボタン押下をトリガーにするよう修正をお願いしました。

おお、いい感じじゃん！

後はこれに可愛い画像とアニメーションと音楽を付けたらもう完成しそうです。

流石に画像と音楽のフリー素材選定までは難しかったので、ここは自力で探しましたが、
アニメーションのCSSや画像・音楽の微調整等は全部お願いしました。

このような細かいCSSの調整方法をインターネット検索し実装するのは結構時間がかかるので、
それを丸投げしたら調べてアドバイスしてくれるのはとても助かりました…！

「BabyGenderReveal」の紹介

こうして完成したWebページ「BabyGenderReveal」を紹介します！

• 男の子の場合はこちら
• 女の子の場合はこちら

使い方は、上記URLをご家族やお友達にメールやLINE等で教えるだけです！

「Let’s see!」ボタンを押下すると音楽が鳴り始め、同時に赤ちゃんの性別を教えてくれる画像が、
アニメーションにより徐々に表示されていきます。

こちら、ソースコードを「GitHub」にてMITライセンスで公開しております！

OSS（オープンソース）なので、ご自分用にアレンジしていただいてもOKです！

終わりに

最後までお読みいただきありがとうございました！

性別をWebページで発表すれば、遠方にお住まいのご家族にもサプライズ発表できていいですよね＾＾

是非ご自身が妊娠された際にはご利用いただきたいですし、
奥様がご懐妊された方や、お友達から妊娠報告を受けられた方は、
是非このサイトを教えてあげてください！

謝辞

Webページに使用させていただいた各画像・音楽のフリー素材提供者の皆様に深く感謝申し上げます。