初めて作ったOGP生成ツールがProduct HuntでDaily世界6位をとった話 🐱

この記事では、ざっくり以下を書いていきたいと思います。

- 作ったモノの技術的な説明
- Product Huntというサイトの説明
- 作ったモノをProduct Huntへ公開するためにやったことの説明

# つくったものはなにか
![スクリーンショット 2020-04-04 13.18.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143848/17e85445-b0f7-e646-c66d-edba5aab6fe4.png)

**記事中で選択した文章からOGPを生成して、シェアすることができるChrome拡張機能** を作りました。

[Product Huntへのリンク](https://www.producthunt.com/posts/linqo)
[Chrome拡張機能へのリンク](https://chrome.google.com/webstore/detail/linqo-%EF%BC%8D-better-sharing/eikodhlifdinnhgjjiodlicjpgbopaon?hl=ja)


実際みた方がわかりやすいと思うので、操作してるgif載せておきますね。

--- 
![usage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143848/9416e94b-1da0-b9a3-2bad-13efd2f19c71.gif)
---

## 課題感

- 他人からよく「この記事参考にどうぞ」「Just FYI」とかいって半ば暴力的に記事リンクだけ送りつけられることがあるが、送られた側は記事のどの部分が自分に役立つのかわからない。👿
- インターネット上に、注目を集めるためにやたらと過激なサムネとタイトルをつける記事がたくさんある。内容とそれらがマッチしてなかったりすることも多い。記事の良し悪しが文章で評価されてない。👿

## 解決策

**記事中で選択した文章からOGPを生成して、シェアすることができるChrome拡張機能** を開発しました。

意図的にサムネイルやディスクリプションはOGPから抜いてます。

これによって、以下が解決できるのでは？と考えました。

1. 記事をシェアした人： 自分が記事中のどこに共感してリンクを送っているか簡単にわかりやすく伝えられる。😇
2. 記事をシェアされた人： この記事のどの部分が自分の役にたつかわかる。😇
3. （記事を書いた人： 書いた記事のどの部分がウケたかわかる）😇

作ったモノの詳しい説明に入る前に、 **Product Huntってなに？** を説明したいと思います。

# Product Hunt とは

[Product Hunt](https://www.producthunt.com/)は簡単にいうと、プロダクトのプロモーションができるサイトです。

誰でも無料で自分が作ったプロダクトを公開することができます。

でも、みんなが自由にプロダクトをあげるだけだと、せっかくみんながいいと思ったものも埋もれてしまいますよね？

そこでProduct Huntは、いいね数（厳密にはvote数）が多いプロダクトは埋もれずにサイトの上方に表示・注目されるようなシステムを作っています。

面白いのが、vote数を競う期間が "1日" であるということです。

つまりある日、世界中の開発者が自分のプロダクトを公開し、vote数が多いものが上位に掲載され、その日が終わればリセット、また次のプロダクトたちがvote数を競い合うという。

日本の16~17時くらいにランキングがリセットされるので、それを待ってみんなヨーイどんでプロダクトを公開するわけですね。

voteを獲得するには初速が超大事です。

vote数を他より早く獲得できれば、より注目され、よりvoteされる。

逆にvote数が少なければ、リストの下の方に留まるので注目されず、ずっとvoteされない。（私が投稿した日のランキングです）
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143848/07d17bb6-0aed-1181-d140-9dd547a3dc3f.png)

例えばChrome拡張版Product Huntでの見え方なんですが、↓ランキング12位以下のプロダクトはもう折りたたまれちゃってるんですよね 笑
![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143848/41dd4dc9-e148-5932-afbd-7cb8c5c0dcb4.png)


## Product Hunt注意点

個人的には、ですね、Product Huntでの実績をあまり本気にしてはいけないかな〜と思っています。

Product Huntでリーチできるのはあくまで、世界中の "イノベーター" かなと感じています。プロダクトを使わずにvoteする人だっていると思います 笑
![Untitled (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143848/e0d770dd-c3d2-e464-d5a8-a827eda01094.png)

僕もプロダクト大好きなのでイノベーター寄りですが、毎日Product Huntみてても結局自分が日々使うプロダクトって多くない。ちょっと便利そうと思っても、3日後には存在すら忘れてることもあります笑 熱し易く冷め易い人たちに対する価値検証は難しいですね 笑

だから、Product Huntはあくまで拡散力を期待する感じでいこうと個人的には考えています。

# どうつくったか

## システムの全体像

さてここからは、システムの説明をしたいと思ったのですが、
この一枚だけ貼っておきますのでどこか気になった部分があればコメントなどで聞いていただいて、もう一本技術的な解説記事を書こうと思いますw
![Untitled (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143848/2223d6b4-6343-369b-d861-dafb93d33dc9.png)

言語はJS、サーバーサイドはfirebaseで完結してます。

## デザイン

全体のデザインは、同じ会社の敏腕デザイナーに協力してもらいました。
![en-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143848/7fe5e913-47ab-af22-2616-a7727e0720d2.png)

なんとなく海外っぽい雰囲気の可愛いデザインは全て彼のおかげです 😍 
（Linqoのデザインシステムも入ったポートフォリオは[こちら](https://www.behance.net/gallery/95290525/Linqo)）

おかげで私は開発に全集中できました。

## プロトタイプ検証

Chrome拡張開発では、ストアにリリースしなくても .crxをインストールしてもらえば拡張機能を試してもらうことができるという手軽さがあります。

冒頭で書いた課題感に共感してくれそうな会社の仲間に.crxを配り、

日々使う理由・使わない理由など色々フィードバックをもらって修正していきました。

# 公開当日何したか

## 出すのに適切なタイミングだったかというと謎

実際、"いつ出すか" 、 "どの日に出すかは大事" だなと思います。

**ランキングがリセットされた瞬間にだすべき** はそうなんですが、その日すごい良さげなプロダクトがいくつも出てたら、諦めた方がいいかもしれません。

どのプロダクトもパッとせずvoteされてない日とかはざらにあって、「おいおいこの日に投稿してたら1位だったじゃねーか！」とかあると思います。（一概には言えませんけどね）

私は「いつ公開しようかな〜」と思って準備してたのですが、ちょっと仕事のmtgがあり公開が遅れてしまい、初速もたつきました 😅

ただですね、会社の同期が拡散してくれたので、最初の10voteくらいは身内票で増えました、ほんとにありがたかった 😂

それ以外の宣伝は特にしてないので、実際Product Huntは費用対効果いいと思います。

## コメント返した

指摘や称賛など、色々コメントがきます。全部返していきます。
![Untitled (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143848/b531be11-1eaa-031e-388e-f95a651492a1.png)

## 公開後の検証
![Untitled (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143848/1b4f6dfa-e6c9-2ac1-6765-535d54222349.png)

拡張機能のボタンを押して出るポップアップの下の方に、

- サービスの感想を書いてもらうためのgoogleFormへのリンク
- 投げ銭サービスへのリンク

を置きました。利用後の感想を収集したり、実際にお金を払うほど欲しいか？を検証しています。


## twitterなどでエゴサ

今回つくったモノはSNSにシェアして使われる性質のものなので、

- どれくらいシェアされてるのか
- シェアされる文章の長さは平均どれくらいか
- シェアに対していいねは来てるか

などみてました。

# さいごに

以上になります！Product Huntに掲載しようか考えてる人、何か作ったけどお蔵入りしてる人などのヘルプに少しでもなれば嬉しいです。

Linqo、よければ使ってみてください！

[Chrome拡張機能へのリンク](https://chrome.google.com/webstore/detail/linqo-%EF%BC%8D-better-sharing/eikodhlifdinnhgjjiodlicjpgbopaon?hl=ja)