OGP画像で診断アプリのシェア率が変わる話

はじめに

診断アプリを作って、Xでシェアボタンを押してもらう。ここまでは順調。でも、タイムラインに流れてきた投稿を見て「あれ、思ったより地味だな」と感じたことはないだろうか。

原因はたいていOGP画像だ。

OGP（Open Graph Protocol）画像は、URLをSNSに貼ったときに表示されるサムネイル。これがあるかないかで、クリック率がまったく違う。診断アプリのように「結果をシェアしてもらう」前提のサービスでは、OGP画像の設計がバイラルの成否を分ける。

OGP画像あり vs なし、何が変わるか

SNSのタイムラインを想像してほしい。

OGP画像なしの投稿: テキストとURLだけ。スクロールする指は止まらない。

OGP画像ありの投稿: カラフルなキャラクター画像 + 「あなたは◯◯タイプ」のテキスト。画像が目に入る。「何これ？」と思ってタップする。これがOGPの力だ。

体感で言えば、画像つきの投稿は画像なしに比べて明らかにエンゲージメントが高い。これはSNSマーケティングでは常識に近い話で、診断アプリの場合は「自分の結果を見せたい」欲求と相まって、シェア率への影響はさらに大きくなる。

診断アプリのOGP設計、3つのポイント

1. 結果タイプごとに画像を変える

全員同じOGP画像ではシェアする意味が薄れる。「あなたは◯◯タイプ」という結果に対応した画像を動的に出し分けることが重要。

自分の診断アプリでは、6タイプそれぞれに専用のイラストを用意している。シェアされたとき「私と違うタイプだ、やってみよう」という動機が生まれる。これがバイラルの起点になる。

2. 画像の中にテキストを入れる

OGP画像には「タイプ名」と「診断名」を画像内に入れる。なぜか。

SNSによっては、OGP画像の下に表示されるタイトルやdescriptionが省略されたり、そもそも表示されなかったりする。画像だけで「これは何の診断で、結果は何か」が伝わる設計にしておくと、どのプラットフォームでも機能する。

3. 色とコントラストで目立たせる

タイムラインは情報の洪水。その中で目を止めてもらうには、パッと見て目立つことが大事。

• 背景色は鮮やか（パステル or ビビッド）
• テキストは読みやすいサイズと配色
• キャラクターやアイコンで視線を引く

地味な画像は存在しないのと同じ。「ちょっと派手すぎるかな？」くらいがちょうどいい。

Next.jsで動的OGP画像を生成する方法

Canvaで画像を6枚作って静的に配置する方法もあるけど、もっとスマートなやり方がある。Next.jsの動的OGP生成だ。

仕組みはシンプル:

1. 診断結果のURLにタイプ情報を含める（例: /result?type=healer）
2. opengraph-image.tsx（App Router）でタイプに応じた画像をサーバーサイドで生成
3. SNSのクローラーがURLを読みに来たとき、動的に画像が返る

メリット:

• テキスト部分（タイプ名、スコア）を動的に変更できる
• 背景イラストを差し替えるだけで全タイプ分が更新される
• デザインの一括修正が容易

デメリット:

• 初期実装のハードルがやや高い
• フォントの読み込みに注意が必要（サーバーサイドなのでシステムフォントが使えない場合がある）

自分の場合は、背景画像（イラスト）は事前に用意して、テキスト部分だけ動的に合成するハイブリッド方式を採っている。画像の表現力とテキストの柔軟性を両立できる。

よくある失敗パターン

失敗1: OGP画像を設定し忘れる

笑い話のようだけど、これがいちばん多い。作って満足してシェアテスト忘れるパターン。デプロイしたら必ず確認すること。

失敗2: 画像サイズが合っていない

OGP画像の推奨サイズは1200×630px（横長）。これ以外のサイズだと、プラットフォームによっては切れたり変にトリミングされたりする。

失敗3: 全タイプ同じ画像

せっかく診断で分岐させているのに、OGP画像が全員同じ。これではシェアのモチベーションが半減する。「自分だけの結果」感を演出するのがOGPの仕事。

まとめ

OGP画像は診断アプリの「顔」。作るのに手間はかかるけど、シェア率への影響は絶大。

やるべきことは3つ:

• タイプごとに画像を分ける
• 画像内にテキストを入れる
• 派手めの配色で目立たせる

実装方法はNext.jsの動的OGP生成がおすすめ。一度仕組みを作れば、次の診断アプリにもそのまま使い回せる。

診断アプリを作ったら、まず自分でシェアしてみて、タイムラインでの見え方を確認してほしい。「これ、自分でもタップしたくなるな」と思えたら、OGPは成功している。