自作アプリCommentScreenでProduct huntの1位を目指して、行った対策をリアルタイムで実況します

アプリ開発者たるもの、世界中で使われるアプリを作りたいものですよね。
そこで私も世界中で使われるアプリを目指して、開発したアプリ「CommentScreen」でProduct huntに挑戦します。
Product huntとは世界一のプロダクト紹介サイトです。ここでランキングが上位に入れば、世界中の新しいプロダクト好きなエンジニアたちや有名な投資家に知ってもらうチャンスです。
世界1位を目指し、本日Product huntにCommentScreenを投稿します。それにあたり、Product huntでランキングをあげる試したすべての施策をリアルタイムで共有していきます。

トライした方法一覧になります(リアルタイムで更新していきます)

- トライ1: 有名なProduct Hunterに紹介してもらう
- トライ2: 目立つGifアニメとキャッチコピーの用意
- トライ3: ランキングアルゴリズムを知る
- トライ4: ホームページにproduct huntのバナーを貼る
- トライ5: Redditで投稿する

追記

みなさんのおかげさまでProduct huntでアプリ「CommentScreen」はProduct of the Dayの4位になりました！🎉🎉
ありがとうございました！
このproduct huntに投稿した24時間は食べること寝ることも忘れてやれる対策をやり尽くしました！！

![producthunt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56557/1eb4080e-f2c4-5e12-5faa-3f625bc7d6cb.png)


こちらCommentScreenのProduct huntのURLです。
https://www.producthunt.com/posts/commentscreen
<a href="https://www.producthunt.com/posts/commentscreen?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-commentscreen" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=255563&theme=light" alt="CommentScreen - Make your online meetings more fun and interactive | Product Hunt Embed" style="width: 250px; height: 54px;" width="250" height="54" /></a>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ついにオンラインイベントや授業をインタラクティブにするツールCommentScreenをProduct huntでリリースしました🎉<br>日本だけでなく、全世界にみなさんにこのプロダクトが届いてほしいです！<br>みなさん応援よろしくお願いします！🙏<a href="https://t.co/k71QPwIxnM">https://t.co/k71QPwIxnM</a> <a href="https://t.co/JcAy7uir0A">pic.twitter.com/JcAy7uir0A</a></p>&mdash; Toshiki Tomihira (トミー) (@tommy19970714) <a href="https://twitter.com/tommy19970714/status/1303952841938092032?ref_src=twsrc%5Etfw">September 10, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## CommentScreenとは

CommentScreenはZoomやMS Teamsなどのオンライン会議で、ニコニコ動画みたいにプレゼン中の画面にコメントを流したり、絵文字でみんなのリアクションを表示できるアプリケーションです。
実は一年半くらい前に大規模なプレゼンで発表することになり、なにか盛り上げられないかなと思ってプレゼン前日とかに即興で試作品を作って、実際のプレゼンで試してみました。そしたら大変評判がよく、周りから使いたいと要望があり、自分用からみんなが使えるようにしてリリースしたというのがきっかけです。

CommentScreenの紹介動画です。
<iframe width="560" height="315" src="https://www.youtube.com/embed/nHlg8Pla4KE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[![CommentScreen](http://img.youtube.com/vi/nHlg8Pla4KE/0.jpg)](http://www.youtube.com/watch?v=nHlg8Pla4KE)

## トライ1: 有名なProduct Hunterに紹介してもらう
Product HuntにはProduct Hunterという趣味でプロダクトを紹介してくれている人たちがいます。Product huntで上位に入る方法を調べていたら，Chris Messinaさんというproduct huntのキーパーソンを見つけました。どうやら彼はproduct hunt内でno.1ハンターらしく，有名なproductはほぼ彼によって投稿されています。最近だと、zoom5.2 や otter.ai なども投稿されています。
彼はProduct huntでのフォロワーが多いので投稿したら、フォロワーに通知がいき比較的upvoteが集まりやすい仕組みになっています。なので彼に投稿をお願いする人が多く、彼のサイトのフォームから簡単に依頼でき、彼が気に入ってくれたら投稿してもらえるらしいです。
なのでCommentScreenとしても依頼して、運良くProduct huntに載せてもらうことができました。

## トライ2: 目立つGifアニメとキャッチコピーの用意

Product huntのアプリ詳細ページへ流入するには、次の図のようにTodayのアプリの中からタイトルとサブタイトル、ロゴしかありません。そこで重要になってくるのはサブタイトルのキャッチコピーの良さと目立つGIFになります。普通の画像でもいいのですが、そこしかアピールできる場がないのでどのプロダクトもアニメーション付きのGIFを作って工夫しています。そこでCommentScreenも比較的目立つようなロゴアニメーションを作りました。
![Screen Recording 2020-09-11 at 1.15.46.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56557/3dba7045-9cc4-4e4f-61e2-c5982a7bad29.gif)


## トライ3: ランキングアルゴリズムを知る
Product huntのランキングアルゴリズムは、単純にvoteの数だけではなくいくつかの視標が組み合わさった複雑なアルゴリズムになっています。vote、コメント数、voteしたユーザがアクティブかどうかなども視標に入っているのではないかと推測します。
まずはできる限りのことはしようと、来た質問にはできるだけ早く答えるようにしました。質問が来たときにランキングが上がったときがありました。
[この記事](https://www.guerrillahub.com/product-hunt-ranking-factors/)によると、voteの価値が時間の経過ごとに下がるようになっているようです。なのでUTCの7時にランキングが開始されるのですが、3時間後(UTCの10時)にproductを公開してすぐに30votesを入れると、開始時の投稿したアプリの100votes分を稼ぐことができるという情報もあります。

ちなみになのですが、ランキングに反映されるvotesと、反映されないupvotesが存在します。プロダクトページのupvoteにはすべてのupvotesが表示されます。その見分け方が通知欄です。それを通知欄に何名のupvotesがあったかが表示されるのですが、それが正しいupvotesになります。


## トライ4: ホームページにproduct huntのバナーを貼る

すでにホームページにProduct hunt以外からの流入がある場合、すでにそのサービスを知っている人・愛用している人に応援をお願いするほうが良いですよね。
そこでProduct hunt以外でCommentScreenのWebサイトにアクセスしてくれたユーザには、「Product huntに応援お願いします」とのポップアップを表示するようにしました。

## トライ5: Redditで投稿する

語弊があるかもしれませんが、日本でいう2chにあたるのがRedditです。
やはりProduct huntに投稿したことを告知するには、本場のProduct huntユーザがたくさんいるRedditで宣伝したいですよね。
しかしいざ投稿してみようと思っても、Redditにはたくさんのチャンネルが存在するのでどのチャンネルに投稿するかが結構悩みます。しかもチャンネルによっては動画や画像、urlを載せるにあたって制限があったりします。一度、web developerのチャンネルで投稿したらすぐ消されてしまいました。
私はstatupチャンネルで次のように投稿しました。statupチャンネルでは、他にもProduct huntについて投稿する人がいます。ただ宣伝するだけでは批判的なコメントが来てしまったので、Feedbackをくださいとお願いする感じの投稿にすると、比較的みんなやさしくコメントしてくれます。
CommentScreenは次のように投稿しました。
https://www.reddit.com/r/startup/comments/iq6un4/commentscreen_looking_for_product_feedback/


## おわりに

いまもなお、Product huntレースの真っ最中です。本日の16時までが勝負です！
得た知見やトライしていることはここでリアルタイムで更新していこうと思います。
ぜひみなさん応援のほどよろしくお願いします！！

https://www.producthunt.com/posts/commentscreen
<a href="https://www.producthunt.com/posts/commentscreen?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-commentscreen" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=255563&theme=light" alt="CommentScreen - Make your online meetings more fun and interactive | Product Hunt Embed" style="width: 250px; height: 54px;" width="250" height="54" /></a>