Reactで10時間で最新マーケティングを手軽に運営するサービスをリリースした

![おめでとうございます あなたはこの度 INFULUENCERS HOUSEへの参加が決定しました (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/7c41d3c6-e907-4e69-ba03-9bf71c327c19.png)


# はじめに

こんにちは、@Sicut_study(Watanabe Jin)です。
今回は[Qiita Hackthon](https://increments.connpass.com/event/305013/)で開発をした「InfluencersHouse」というサービスについて紹介していきます。

どのような経緯でシステムを開発したのかという思考についても詳しく紹介しています。

# 「インフルエンサーディナー」とは？

今回私たちが注目したのは2024年日本でおそらく流行するであろうマーケティング手法である「**インフルエンサーディナー**」でした。

ハッカソン時点で日本での検索数は過去2年で100回以下、ツイッターでのつぶやきはわずか2件でした。しかし、アメリカでは実際に行われており、大きな成果をあげています。

より詳しいインフルエンサーディナーの内容に関しては以下の動画がものすごく参考になります。

https://www.youtube.com/watch?v=PojP6hMJTA4&t=1815s

https://youtube.com/watch?v=UfoH5jJ4Pk8

インフルエンサーディナーは簡単に言うと**インフルエンサーを10人程度集めてディナーをするイベントを主催する**というものです。

発言1つで世の中を変えてしまうインフルエンサーを**運営が需要と供給がマッチするようにメンバーを選定して開催する**ことで、イベントで<font color="red">何かがおきるようなきっかけを作る</font>ような機会を運営が作ります。

**<font color="red">これは世界を変える大きなインパクトに繋がります</font>**

実際にアメリカでは「元大統領」「ノーベル賞受賞者」などが参加しています。

**運営側はインフルエンサーとのつながりができてマネタイズが可能**となっています。

# Influencers Houseとは

![InfluencersHouse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/d036d50f-ee58-bb74-9cb2-5b6c6abcb00e.png)

2024年流行するであろう「インフルエンサーディナー」を運営するのにあたって手軽に行えるようなアプリを今回は開発しました。それが「インフルエンサーズハウス」というサービスです。

名前の由来はインフルエンサーディナーが「招待制」ということからクラブハウスを真似てつけました。

## システムでできること

インフルエンサーズハウスでは、ディナーに招待されるインフルエンサーが利用する「ユーザー画面」とイベントやユーザーを管理する「管理者画面」があります。

### ランディングページ

LPは以下のように手軽なものを作りました。
このサービスがインフルエンサーを対象にしており、一般の方々から検索をされることはほぼないという特徴があるため簡易的なものになっています。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Peek 2024-02-18 06-32.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/4c4a2bcd-a6c3-c9cf-7019-0ffb2f9ace77.gif)
https://influencers-house.mss-rep.com/

### ユーザー画面

ディナーは招待制で、招待があるとメールが送られてきます。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/4d0b528d-92a2-9922-26da-4ec900d9f705.png)

リンクを踏むと招待画面が表示されるのでユーザー登録を行います。
インフルエンサーディナーで重要な何が提供できて、何が求められるのかを書く必要が有ります。またこの質問もカスタマイズ可能です。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Peek 2024-02-18 06-37.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/26a0339a-2ed9-6850-1b82-ab1cf6abe3ce.gif)

ユーザー登録を行うとイベント詳細が表示されます。
参加者は一部情報がマスクにされており、当日までのワクワク感を演出しています。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Peek 2024-02-18 06-38.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/56e3183a-1ba0-c4c8-9e2e-3a4fb8ab919e.gif)

### 管理者画面

管理者画面ではイベントの管理が手軽に行えます。
イベント作成、イベント編集、イベント終了などが行なえます

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Peek 2024-02-18 06-42.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/f795aace-41aa-5c5a-0379-b605f64f7f32.gif)

# 技術スタック

開発人数 : 2人 (@maaaashi)
開発時間 : 10時間
開発日数 : 2日

今回はハッカソンということで短時間でリリースまで持っていきました。

構成は以下のようになっています。
![構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/5419e71e-3d9f-d42d-0854-a11f3c2c7f0e.png)

- Next.js
- TailwindCSS
- DaisyUI
- Supabase
- react-hook-form
- Vercel

とにかく短時間でリリースをする、インフルエンサーだけしか利用しないためアクセス数の集中などは予想されないことを理由にこのような技術スタックを選びました

開発に関してはほぼ詰まることはなく、スムーズに行うことができました

# 今後の展開

このサービスには大きな可能性があると思っていますので、引き続き開発をしていきます。

- 機械学習によるユーザーマッチング
- SEO対策
- 実際のイベント運営

などまだまだやるべきことは残っていますが、十分ハッカソンでの開発だけで価値のあるものが提供できたと思っています。

# なぜこのアイデアが生まれたのか

今回のハッカソンのテーマは「つながり」でした
そして、たまたま読んでいた以下の本でインフルエンサーディナーが書かれており、それをシステム化しようという流れになりました

https://www.amazon.co.jp/%E5%BD%B1%E9%9F%BF%E5%8A%9B%E3%81%AE%E7%A7%91%E5%AD%A6-%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%81%A7%E6%88%90%E5%8A%9F%E3%81%97%E4%BA%BA%E7%94%9F%E3%82%92%E8%B1%8A%E3%81%8B%E3%81%AB%E3%81%99%E3%82%8B%E6%9C%80%E4%B8%8A%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%AC%E3%83%B4%E3%82%A3/dp/4046066415/ref=sr_1_1?crid=AA71TZDD7QQR&keywords=%E5%BD%B1%E9%9F%BF%E3%81%AE%E7%A7%91%E5%AD%A6&qid=1708207398&sprefix=%E5%BD%B1%E9%9F%BF%E3%81%AE%2Caps%2C357&sr=8-1

<font color="red">**どれだけ知識の引き出しがあるかというのは大事だなと実感しました**</font>

そして実際のハッカソンではアイデアの方向性が決まったら、エレベーターピッチやマネタイズの方法なども実際煮詰めていきました。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![IMG_8732.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/2c4d30fd-4acf-d991-0a8e-cd38907d6390.jpeg)
<font color="gray">実際に作成したエレベーターピッチ</font>

<font color="red">**しかし、これが後にハッカソンで大きな問題へとつながります**</font>

詳しくは次回の記事で紹介しますので少々お待ちください。

# おわりに

今回はハッカソンで作成した「インフルエンサーズハウス」というサービスについて紹介しました。

今回開発して思ったことは、<font color="red">**日頃からアンテナを貼ること、サービスをいち早くリリースすることの大切さ**</font>でした。

アイデアは色々な情報を引き出せるようにすることで生まれて、そのアイデアをカタチにするのは素早く開発してリリースすることが大切です。アイデアは誰かしら同じことが浮かんでいると思うのが大切で、リリースが早くできるかはサービスの存続にも大きく影響します。

今後もこのサービスは開発予定ですので、**もしあなたのところにインフルエンサーディナーの招待があったら、参加お待ちしております**


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

今週もプログラミング頑張りましょう！

![joinus.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/71d17419-8464-7cf9-e269-3b8d00fddcc6.png)

# 2024年個人開発一覧

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

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

https://qiita.com/Sicut_study/items/830d1edbf95e77390690

# About Me

Webエンジニア転身して1年間本気で勉強
転職ドラフトで高額オファーを複数獲得
そこでの経験からアウトプットやマインドセットの発信に強みがある
エンジニアをやりながら、起業に挑戦中
アイデア作りやパブリックスピーキングを得意としてる

■ Twitter
https://twitter.com/Sicut_study
■ Instagram
https://www.instagram.com/himariajin
■ Youtube
https://www.youtube.com/channel/UCBFrGAJhPuuaoLwUIHBILsA
■ TikTok
https://www.tiktok.com/@sicut_study
■ プログラミングコーチングJISOU
https://projisou.jp
■ 体験で学ぶ！JISOU
https://experience-learn.connpass.com/
■ 登壇依頼などお気軽にご連絡ください
himaria.jin.watanabe@gmail.com


# 参考

https://www.youtube.com/watch?v=PojP6hMJTA4&t=1815s

https://youtube.com/watch?v=UfoH5jJ4Pk8

https://www.amazon.co.jp/%E5%BD%B1%E9%9F%BF%E5%8A%9B%E3%81%AE%E7%A7%91%E5%AD%A6-%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%81%A7%E6%88%90%E5%8A%9F%E3%81%97%E4%BA%BA%E7%94%9F%E3%82%92%E8%B1%8A%E3%81%8B%E3%81%AB%E3%81%99%E3%82%8B%E6%9C%80%E4%B8%8A%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%AC%E3%83%B4%E3%82%A3/dp/4046066415/ref=sr_1_1?crid=AA71TZDD7QQR&keywords=%E5%BD%B1%E9%9F%BF%E3%81%AE%E7%A7%91%E5%AD%A6&qid=1708207398&sprefix=%E5%BD%B1%E9%9F%BF%E3%81%AE%2Caps%2C357&sr=8-1