🔮

Twitterにシェアできる「あ」占いを作った話。【個人開発】

2020/12/19に公開

こんにちは、かしわ(@kasiwa9494)と申します。

1年前ほどからプログラミングを勉強し始めて、一人でwebサービス作ってます。

今回、新しいサービスを作りました。

何を作ったのか?

「あ」占い
demo
名前を入れるだけで、自分に適した「あ」を診断できるWebサービスです。

なぜ、作ったのか?

最近、幽遊白書という漫画にハマっています。

https://www.amazon.co.jp/幽★遊★白書-1-ジャンプコミックスDIGITAL-冨樫義博-ebook/dp/B00KCC0YKC/ref=sr_1_7?__mk_ja_JP=カタカナ&dchild=1&keywords=幽遊白書&qid=1608365457&sr=8-7

中学の頃はバトルシーンが好きだったのですが、
今読み返すと、海藤VS蔵馬の言葉遊びの頭脳バトルにめちゃくちゃ興奮しました。

そこから、言葉遊びのWebサービスを作ってみたいと考え、参考になる動画を探していました。
そこで、ダウンタウンのあ研究家という漫才を見つけました。

この動画自体はかなり古いのですが、めちゃくちゃ面白かったです。

よって、あ研究家をかるた風にWebサービスとして体験できたらいいなと考え、
今回、「あ」占いを作りました。

どうやって、作ったのか?

作った技術

Nuxt.js

Netlify上でホスティングしています。
SPAで作っています。

Netlify

SPAで動的ページのOGPを使えるようにするために
Netlifyのプレレンダリング機能を活用しています。

毎度毎度、お世話になっている便利な機能です👏👏👏

TypeScript

コンポーネント間のデータの受け渡しで
どういう型か判断でき、コードが見やすいです。

みんな大好きいらすとや

今回利用させていただいたフリー素材サイトは
毎度お世話になりまくりのいらすとや

いつもありがとうございます🙏

Twitterにシェアしたらどう見えるのか

以前、作ったお菓子センス診断というWebサービスがあるのですが、
診断結果をTwitterに共有すると、

これは、正直、文字が見えにくいです。

作っているときに、配色にはこだわっていたのですが、
共有したときに 「SNSで目立たせる」 ことを意識していませんでした、、、

ですので、「あ」占いは 「シェアしたときに目立たせる」 ことを心がけて、作りました!

タイムラインでこのツイートが回ってくれば、少なくとも、
めちゃくちゃでかいサイズの「あ」は第三者の目をひくきっかけになると思います。

さらに、配色も白黒のおかげで、多少、文字が小さくても視認しやすいようにしています。

どのくらいの期間で作ったのか?

3日で作れました!!!
作業時間としては、10~20時間ぐらいだと思います。

簡単に実装できる診断系サービスですが、効率よく実装できて良かったです!!!

今後の展望は?

診断系サービスを作るのは楽しいですが、ユーザーがやれることの自由度が少ないと感じてます。

一人が面白いものを作ったら、サービスに共有して、みんなが簡単に使える。
自由度が高く、面白いものを大人数で楽しむサービスを作りたいです。

あなたに適した「あ」は???

ぜひ、占ってみてください

「あ」占い

今回の振り返り

診断系サービスは一度作れば、基本的に同じ構造なので効率よく制作できました(笑)

今回作った「あ」占いで、合計4つのサービスを作ることができました!!!

何より、サービスをリリースする度、
使ってくれる人に感謝を忘れずにこれからも精進していきます🙏

ここまで読んでくれた方へ

以上、Twitterにシェアできる「あ」占いを作った話でした。

ここまで読んでくださりありがとうございました。

いいねやコメント、SNSでの共有等をしてくださると、めちゃくちゃ嬉しいです。

良かったら、ツイッター(@kasiwa9494)フォローしてください。

Discussion