Product Hunt のローンチ当日、Featured ページで一目見て「何これ」とクリックされるかどうかは、240×240px のサムネで決まります。プロダクト名と説明文の前に、まずシンボルの形と色が脳に入る順序です。この瞬間に埋もれると、その日の票を取り切れません。
この記事では、Lemon List（Featured 上位）に残るロゴに共通する 4 つの条件を、240×240 サムネで勝つ視点から整理します。
Product Hunt サムネで埋もれない 4 条件
1. 1 シンボル・1 アイデアに絞る
240×240px のサムネ枠で、横にプロダクト名と説明文が並ぶ Product Hunt のフィードでは、シンボルが 2 つ以上ある時点で読めません。「ジオメトリック 1 個」「アルファベットモノグラム 1 個」のどちらかに絞ります。Lemon List（Featured 上位）にランクインしているプロダクトの多くは、1 つの幾何形＋単色という構成です。
2. サムネで効くコントラスト比を取る
フィードの背景は明るめのオフホワイト（#FAF9F7 近辺）です。シンボル色と背景のコントラスト比は最低 4.5:1、目立たせたいなら 7:1 を狙います。淡いグレーや薄いパステルは「あること自体に気づかれない」ため避け、ダークネイビー、ディープオレンジ、ビビッドグリーンなど飽和度の高い 1 色を中央に置きます。
3. 色相は競合と被らせない
Product Hunt のフィードを 1 ページスクロールすると、紫・青・黒のシンボルが過半数を占めます。同日ローンチするプロダクトと同じ色相だと埋もれます。当日 06:00（PT）に Featured ページを開き、上位 10 個の主色を確認し、それを避けた色相を選ぶだけで視認性が大きく変わります。
4. セーフエリアを 12px 確保する
Product Hunt は丸角でクロップするため、シンボルが端まで届いていると切れます。240×240 のキャンバスのうち、上下左右 12px はセーフエリアとして空け、シンボル本体は 216×216 以内に収めます。SVG で書き出して 240×240 にレンダリングし、画面端からの距離を実測しておくと安心です。
240×240 サムネの設計図
サムネ領域の使い方を視覚化すると、シンボルがどれくらいの面積を占めるべきか分かります。下図は推奨レイアウト：セーフエリア 12px、シンボル本体は中央 60〜70% に収め、余白で「呼吸」を作ります。
サムネで効くロゴの実例
単一の幾何シンボル＋強い色という構成で、240×240 に収めても認識できるロゴの例です。いずれも背景に置いたときシルエットが残るかどうかをテストしています。
Orbital
Hexa
CubeLab
Infini
ローンチ前のチェックリスト
ロゴが決まったら、Product Hunt にアップする前に以下を実機で確認します。Notion ページのカバーや Figma のフレームに 240×240 で配置し、スマホの Product Hunt アプリで自分のフィードに混ぜて見るとリアルに分かります。
- iPhone のフィードで他のローンチと並べて 1.5 秒で識別できるか
- ダークモードに切り替えても色が沈まないか
- サムネ拡大時（512px 表示）に解像度劣化がないか — SVG ならクリア
- OG 画像（1200×630）にトリミングしても主シンボルが切れないか
まとめ
Product Hunt のロゴは「シンボル 1 つ・高コントラスト 1 色・競合と被らない色相・セーフエリア 12px」の 4 点を押さえれば、Featured 上位の見た目と並べても遜色なく仕上がります。ローンチ前日に作り直さなくて済むよう、SVG で持っておきます。
ファウンダー・SaaS 創業者向けのロゴ設計は 起業家向けロゴガイド にも詳細があります。