昨今、OGP画像(TwitterやFacebookなどにウェブページをシェアした際に表示される画像)を動的に生成しているウェブサービスが増えてきています。
この手法を、俗に「OGP芸」と呼ぶようです。*1
そんなOGP芸を行なっているウェブサービスをまとめてみました。
目次
- ウェブ表彰
- カクヨム
- Qiita
- クイズメーカー
- コツコツ忍者
- DEV Community
- note
- 俳句メーカー
- はてなブログ
- Peing(ペイング) -質問箱-
- マシュマロ
- みんなの感想文
- みんなのボタンメーカー
ウェブ表彰
- サイズ:1200 * 630
サービス上でつくった表彰状の画像が、そのままOGP画像になります。
カクヨム
- サイズ:1200 * 630
カクヨムは小説のタイトルよりもキャッチコピーを重視しているようで、OGP画像でもタイトルではなくキャッチコピーが使用されています。
Qiita
- サイズ:1200 * 630
タイトルとユーザー名というシンプルな内容です。
クイズメーカー
- サイズ:1200 * 630
中央に大きくタイトルがあり、右下にはサービスのロゴがあるという理想的な例です。
コツコツ忍者
- サイズ:1200 * 675
こちらのサービスは日々継続的に使用することを前提にしており、同じページでも日によって異なる画像が表示されるようになっています。
DEV Community
- サイズ:1000 * 600
エンジニアのためのサイトなだけあって、記事中のソースコードが使われます。
ただし、どういうロジックでピックアップされているのかは謎です。
note
- サイズ:1280 * 670
画像内でさらに枠がついたデザインになっており、文字サイズが小さくなってしまっています。
なぜこのような仕様にしたのか謎です。
俳句メーカー
- サイズ:702 * 368
俳句ということで、すべてひらがなで書いたとしても綺麗に収まるように調整されているようです。
はてなブログ
- サイズ:1200 * 630
アイキャッチ画像を設定していない場合、OGP画像が自動生成されます。
タイトル、カテゴリ、ブログ名というシンプルな構成です。
Peing(ペイング) -質問箱-
- サイズ:600 * 315
Twitterとの連携が前提のサービスであり、質問に対する回答をツイートの本文に書くことで、ツイート単体で質問と回答の両方を見ることができるようになっています。
OGP画像のサイズが可変なので、質問文が長いと見切れてしまうのが残念です。
マシュマロ
- サイズ:可変
Twitterとの連携が前提のサービスであり、質問に対する回答をツイートの本文に書くことで、ツイート単体で質問と回答の両方を見ることができるようになっています。
OGP画像のサイズが可変なので、質問文が長いと見切れてしまうのが残念です。
みんなの感想文
- サイズ:1200 * 600
原稿用紙というメタファーによって文字数に制約を設けることで、本文がすべて画像内で見れるという画期的な例です。
みんなのボタンメーカー
- サイズ:450 * 236
サービス上に表示されているボタンがそのまま使われています。
おわりに
ここに載っていないサービスがあれば、ぜひコメントで教えてください!