「Twitterにシェアできる」お菓子センス診断を作った話。【個人開発】

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

１年前にプログラミングを勉強し始めて、今回、診断メーカー系のサービスを作りました。

何を作ったのか？

お菓子センス診断

好きなお菓子を選んで、センスを診断できるWebサービスです。

なぜ、作ったのか？

SNSでシェアされるサービスを作ってみたかったからです。（己の欲望強すぎｨｨｨ！）

今まで、作ってきたサービスは誰かに使われる実感を得ることができませんでした。（実力不足...）

どうやったら、みんなに使われるのか考えて、お菓子センス診断を作成しました。

詳しい理由はこちらの記事をみてください！

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

使った技術

Nuxt.js

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

Netlify

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

めちゃくちゃ便利です。

TypeScript

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

OGP画像にこだわりました！！！

今回は、SNSで共有されることを目標として作りました。
よって、OGP画像にめちゃくちゃこだわりました。

全部で診断結果のOGP画像は9種類ぐらいあるので、診断してみてください！

フリー素材はマジで神！？

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

さらに、好きなお菓子を選ぶ画面と診断結果のお菓子の素材使わせていただいた
イラストレイン

今回のサービスは使用する画像がめちゃくちゃ重要なので、
いらすとやとイラストレインにはマジで感謝です！？🙏

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

約10日。
作業時間としては、50~60時間ぐらいだと思います。

正直、途中サボりましたwww
フォートナイトとNetflixにハマらなければ、3日〜５日でできたのに、、、(笑)

今後の展望は？

お菓子センス診断は「SNSでシェアされるサービスを作る」ということを目標としていました。
今後は、SNSでシェアされることをベースの上で構造的に面白いサービスを作りたいです。

あなたのお菓子センスは？？？

診断すると、S、A、B、Cとランク判定されます。
あなたのお菓子選びのセンスはいかに！？

ぜひ、診断してみてください！！！

お菓子センス診断

今回の振り返り

今まで、Firebase依存でサービス開発をしていたので、
初めて、Netlifyホスティングだけのサービスを作ることができました(笑)

どうしても、外部サービスに頼ってしてしまうので、
個人開発でできるだけ依存せずに実装できるようになりたいです。

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

以上、「Twitterにシェアできる」お菓子センス診断を作った話でした。

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

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

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