【個人開発】SNSでバズる料理を生み出すアプリを作ってみた


　
こんにちは、Watanabe Jin([@Sicut_study](https://x.com/Sicut_study))です。
　

![IMG_4686.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/a05931dd-9dc2-ac0f-af92-8e822b163155.png)

みなさんはSNSをしていますか？
私は最近X(旧 Twitter)にかなり力を入れており、エンジニアに役立つ情報や勉強法などを毎日発信しています。

https://x.com/Sicut_study

そんなXですが、私は **「バズった」** 経験がほとんどありません。
　


### **<font color="red">1度でいいからSNSでバズってみたい！！！</font>**
　　

　
![IMG_4687.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e799dfbb-2d6c-b693-beba-9c7b3366e1ab.png)

SNSでバズってみたいという人はおそらく私以外にもいるはず！
<font color="red">**そこで今回はエンジニアの技術を総動員して、Xでバズる投稿を作っていきたいと思います。**</font>

# 話題になる投稿の法則

まずは<font color="red">**話題になった投稿やいいねが多い投稿**</font>を調査します。
ここである程度投稿内容の方向性が決まれば、よりバズりやすい投稿を作ることできる気がします。
　
<div style="display: flex; align-items: center;">
　<br />
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/36691d10-ae4e-345c-7c8a-90c677bbf67e.png" width="80px">
  <font>　毎日続く企画はバズりやすいみたいだ</font>
</div>

　
![IMG_4688.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/2b147165-3e3a-4192-ed9c-5be18ffb996a.png)


<div style="display: flex; align-items: center;">
　<br />
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/36691d10-ae4e-345c-7c8a-90c677bbf67e.png" width="80px">
  <font>　人の欲望を刺激するのもありなのか〜</font>
</div>
　

![奇跡の組み合わせを生み出して SNSでバズれるアプリを作ろう (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/65d76d4b-099d-4cd6-b6e5-faa373ca1433.png)

　
　
伸びている投稿をみていて<font color="blue">**とあること**</font>に気づきました。

### <font color="red">**コンビニの商品を組み合わせた料理はけっこうバズっている投稿が多い！！**</font>

　
例えばこの動画では「蒙古タンメン中本」×「ご飯」×「金の角煮」でチャーハンを作っています。この<font color="blue">**背徳感**</font>と<font color="blue">**手軽さ**</font>がバズを生んでいるのだと仮説が立てられました。

|料理風景|完成|
|---|---|
|![IMG_4690.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/0ad768ab-5859-3b26-e250-ae28635c0e86.png)|![IMG_4692.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e7abee82-193a-0c17-1048-37dafb3712cb.png)



そこで今回は<font color="orange">**『バズグルメジェネレーター』を作ることに決めました。**</font>

このアプリではランダムに食材を組み合わせることで<font color="blue">**奇跡の組み合わせ**</font>を生み出せるように実装していきます。

![バズグルメ誕生 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/85f13c84-686c-13bf-3c47-922d86635950.gif)
　
　

また投稿する文章も大切で、読んで<font color="red">**「試してみたい！」**</font>そう思えるような魅力的な文章を用意する必要があります。

そこで今回は[Gemini](https://ai.google.dev/gemini-api?hl=ja)を活用してプロンプトを用意することで常にクオリティの高い文章が自動で作れるようにしていきます。

# まずは方向性が間違っていないか検証

何かサービスを作る上で最も大切なのは、**なるべく早い段階で検証する**ということです。

スタートアップが失敗する理由は、自分たちのプロンプトが求められている幻想を持ってしまうことなのです。しかし、実際に1年掛けて開発したサービスをローンチしたら結局誰も欲しがっていなかったということが起きます。

ということで今回は<font color="blue">**プロトタイプアプリ**</font>を作成して、実際にバズりそうなグルメが誕生するのかを確かめていきます。
　

今回使用する技術はこちらです。
なるべく早く開発を進めるために、Reactを選択しています。
　


![奇跡の組み合わせを生み出して SNSでバズれるアプリを作ろう (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/726558e2-e4a8-3bd1-c23c-6b090827b2a4.png)

　

手始めに、「調理方法」×「食材」をランダムで決める簡易アプリを作りました。

![バズグルメ誕生 (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/a34ea461-7071-f601-87e1-479c52a6640a.gif)


### <font color="red">**では実際にバズグルメを生み出していきます！**</font>
　

![IMG_4693.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/9a4e009d-b887-d8bf-477b-fde4c17b321d.png)

<font color="orange">**今回は「焼く」×「卵かけご飯」となったので実際に調理してきます。**</font>

　

食材は「レトルトご飯」と「卵」です。どちらもコンビニで調達できました。
　
![IMG_4694.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/5c0f47c8-e751-8935-27a9-42119894d183.png)

 　

**まずは卵かけご飯を作っていきます。**

![IMG_4695.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/2b0a0c6b-3f50-10d4-9e6d-12ccea13a7ed.png)
　

黄金色に輝く最高の卵かけご飯が完成しました。

![IMG_4696.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/0542bfc4-8503-3898-fb4d-11e6413a230d.png)

　
ここで本来なら食べたいところですが、今回はバズグルメを作るために調理してきます。

![IMG_4697.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e83f3d00-f2b1-e3ac-7dee-f6dbd8f954c6.png)　

　
　
　
### <font color="red">果たしてどうなったのか？？</font>

### <font color="red">⇩⇩⇩</font>
　　
　
　











　
　
　
　
　
　
　
　
　
　
　
　
　　
![IMG_4698.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/b201ef99-0ccc-0044-59c6-152dfbcb1aca.png)

### <font color="red">なんとチャーハンが完成しました。</font>
### <font color="red">しかも、超パラパラの下手したら人生で食べた中で一番美味しいチャーハンになりました。</font>
　

![IMG_4699.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/560cd4ef-2b61-c491-b970-d0dc3507397d.png)


もしこの時代に「チャーハン」が存在していなかったら、<font color="blue">**確実にバズっていた**</font>はずです。

**このアプリの実用性がわかったので、本格的にアプリ開発を進めていきます。**

# 本格的に開発スタート

今回作成したリポジトリは以下になります。

https://github.com/jinwatanabe/bazz-post-creator

今回はより奇跡の組み合わせを生み出すために、調理方法でなく**食材3つの組み合わせ**を表示するようにしました。

![バズグルメ誕生 (7).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/218319bc-6638-a13f-92aa-4bccd1014566.gif)


また、Xは投稿文章も大事なので組み合わせから自動で投稿文を作成する機能も作りました。
<font color="blue">**アプリからそのまま投稿することも可能です。**</font>
　
　
それでは実際に **<font color="red">『バズグルメ』</font>** を作っていきましょう。

![IMG_4700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/9a63abad-e827-138b-5187-dd1919ec1b8f.png)
　

<font color="red">**今回は『チーズ』×『麻婆豆腐』×『肉まん』となったので早速料理していきます。**</font>
　

今回もコンビニで簡単に食材を手に入れられました。
気軽に作れるということはバズる上でも大切になってきます。

![IMG_4701.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/85a02caf-768f-4944-02bd-212fade3ce51.png)
　

肉まんの上の部分をくり抜いていきます。 

![IMG_4704.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/22d7fb95-9a2f-05a5-287a-3ba762859972.png)

麻婆豆腐を注ぎます。
肉まんも麻婆豆腐を注がれるとは思ってもいなかったでしょう。

![IMG_4705.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/702fe411-4a00-64e2-f27b-9137e32eeced.png)
　
さけるチーズをいい感じに割いて載せていきます。
ちなみにさけるチーズは元々ストロングチーズという名前だったのですが、今の「さけるチーズ」に変えたことで売上がかなり上がったみたいです。

![IMG_4706.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/1c0ce192-4d1f-b500-21b8-3a7c08dd9ce3.png)

　
オーブンでカリカリになるまで焼いてきます。

![IMG_4703.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/d7052d22-14c4-77f6-a609-47fdec1b9dad.png)
　
　

　
<font color="red">**チーズマーボー肉まんの完成です。**</font>
　
　

　
![IMG_4602 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/6930a367-632c-858f-adbb-f9def89c72ce.jpeg)

見た目からして絶対に美味しい料理ができてしまいました。
実際に食べていきましょう！果たしてお味は？？
　

　
<font color="red">**お世辞抜けで本当に美味しい！早く商品化してほしいレベルの料理が生まれてしまいました**</font>
　
　
　
![IMG_4707.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/100d70af-4787-1d12-22ef-a667bb2bfbb8.png)

外はカリカリで香ばしく、中は麻婆豆腐と肉まんの肉が絡まって旨味の強い麻婆豆腐になっています。麻婆豆腐にチーズが加わることでマイルドになって辛いのが苦手でも食べる味になっています。

**これは絶対バズ。確信に思いました。**

# いざバズる投稿をしてみる

それでは、今回撮影した写真とGeminiが生成してくれる投稿文でポストしてみます！
　

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">チーズと麻婆豆腐、肉まんの最強コラボ！とろ〜りチーズとピリ辛麻婆が肉まんのジューシーな餡に絡みつく、想像をはるかに超える美味しさ！これはやばい。今すぐ試したい衝動に駆られる！ <a href="https://t.co/LgjTtwd07w">pic.twitter.com/LgjTtwd07w</a></p>&mdash; 渡邉 臣@プログラミング戦略家 | JISOU (@Sicut_study) <a href="https://twitter.com/Sicut_study/status/1844976795826913407?ref_src=twsrc%5Etfw">October 12, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
　

こんな感じに投稿してみました。
**それでは1日投稿が伸びるかを待ってみます。**

 
　 
　

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/ced98f8c-f6fd-1d3d-e622-6afe0a4df862.png)
　 
　

### 1日経ったので投稿を見てみます。
　


　 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/b4e06ce9-b220-e20d-469c-9a97d094eccb.png)

### <font color="red">**176Views 1いいね**</font>
しかも貴重な1いいねは友達がお情けでくれたものでした。

今回はこのアプリでバズることはできませんでした。
しかし、美味しい料理はできたので継続していけばおそらくバズることはできるはずです。

**投稿はまだありますので、よかったらいいねしていただけたら嬉しいです。**

今回作成したプログラムはReact初心者でも簡単にできるテーマとなっています。
Reactで実践的なアプリを作りたい方はぜひとも参考に同じアプリを実装してみてください！
　

https://github.com/jinwatanabe/bazz-post-creator


楽しんでプログラミングをするのも大切です！

# おわりに

エンジニアスキルを使って作りたいものを作って楽しむ動画を作っています。よかったらYoutubeにも遊びに来てください！

<iframe width="560" height="315" src="https://www.youtube.com/embed/gQxZqK-2jnU?si=T0PkVG3fsAdxpijb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

ここまで読んでいただけた方はいいねとストックよろしくお願いします。
@Sicut_study をフォローいただけるととてもうれしく思います。

また明日の記事でお会いしましょう！

# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

興味のある方は、ぜひホームページからお気軽にご連絡ください！
▼▼▼

https://projisou.jp

# 他のブログ記事はこちら

https://qiita.com/Sicut_study/items/ee51fc7a6f0d9fce826a

https://qiita.com/Sicut_study/items/1e82ea0daf964d4b1fa5