どんどんツッコミフレーズが落ちてくるサイト、ツッコミ落としを作った話。【個人開発】

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

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

今回、ツッコミが上から落ちてくるサイトを作りました。

何を作ったのか？

ツッコミ落とし

どんどん上からツッコミが落ちてくるサイトです。

なぜ、作ったのか？

個人開発者のゆうもやさんが作った文字がどんどん落ちるWord CasCadeというサービスがあります。

Word CasCadeのたくさんの文字が落ちていく感じが好きで、僕自身お笑いが好きで、ツッコミフレーズのみが落下するサイトがあったらいいなと考え、制作しました。

ゆうもやさんご本人が反応してくれました！！！🙏

M12020のツッコミを当てられるとは思わなかったな〜〜〜
ゆうもやさん、お笑い好きだな、、、😏

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

作った技術

Nuxt.js

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

Netlify

ホスティングに利用しています。

SPAで動的ページのOGPを使えるようになる
Netlifyのプレレンダリング機能が便利です😄

P5.js(Canvas)

画面上にどんどん文字が落ちてくるアニメーションを作成するために利用しています。

どんなツッコミフレーズを入れたのか？

千鳥の代表的なツッコミ「クセがすごい」、
フットボールアワーの「高低差ありすぎて耳キーンなるわ」といった
言わずと知れた有名フレーズはもちろん入れています。

そのほか、2020年のバラエティ番組、配信番組、芸人Youtubeから好きなツッコミワードを入れさせていただきました。

ex)M1グランプリ2020のネタのツッコミ、ざっくりハイタッチ、ニューヨークのエレパレ等、、、

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

約2週間で作れました！！！
作業時間としては、50~60時間ぐらいだと思います。

まともに、Canvasに触れたのが初めてだったので、結構つまずきました、、、

最初は描写ライブラリ(p5.js)を使わずに実装しようとしたのですが、
明らかに、描画ライブラリ（p5.js）を使わずに実装するより、
導入した方が作業効率が良かったので、諦めました（笑）

今後、Canvasを使う機会があったら、作業時間はもっと短縮できると思います！

今後の展望は？

面白いものをWebサービス通じて届けることを継続していきたいです。

直近のWebサービスの制作では、特に見せ方を意識して作っています。
しかし、見せ方にこだわると、ワンアイディアっぽくなってるな〜感じています。

今後は、Webサービスをどういう用途で使うのか、どういった時にSNSでシェアするのか
構造を意識して個人開発を行なっていきます。

ツッコミフレーズを眺めてみては！？

ツッコミ落とし

今回の振り返り

今回、初めて、自分の趣味であるお笑いの知識を生かしたサービスを作れました。

過去作ったサービスは中々、人の目に入ることがなかったのですが、
ゆうもやさんをはじめとした個人開発をしている方々に反応をもらえて、嬉しかったです。

使ってくれる人に感謝を忘れずにこれからも精進していきます🙏

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

以上、どんどんツッコミフレーズが落ちてくるサイト、ツッコミ落としを作った話でした。

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

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

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