GitHub ソーシャルプレビューカードメーカー｜1280×640 の Open Graph 画像を作る
owner/repo 形式のリポジトリ名、一行の説明文、言語タグ（TypeScript、Rust、Python など）を入力すると、GitHub の Social preview に推奨されているサイズの PNG 画像を組み立てます。ダーク・ライト・アクセントの 3 テーマと、アクセント色の色ピッカーが用意されているので、デザインソフトを開かずに「リポジトリの顔」になる 1 枚を整えられます。
💡 このツールについて
X（旧 Twitter）や Slack、Discord、Reddit にリポジトリの URL を貼ったとき、味気ない README の最初の段落が抜粋されるだけ、という経験は OSS を公開している人なら一度はあるはずです。GitHub にはリポジトリごとに Social preview 画像を差し替える設定があって、ここに自分で作った画像を入れておくと、リンクをシェアしたときのカード表示がぐっと変わります。
ただ実際に着手しようとすると、「推奨サイズはいくつだっけ」「Figma を開いて 1280×640 のアートボードを切り出して、フォントを選んで…」と地味に時間が溶けます。このツールは、OSS リポジトリのプレビュー画像に必要な要素をリポジトリ名・一行説明・言語タグ・アクセント色の 4 つだけに絞って、Canvas 上に直接描画し、そのまま PNG として書き出します。テーマを切り替えれば暗背景・明背景・全面アクセントの 3 パターンを行き来できて、Settings → Social preview にアップロードする 1 枚を最短手数で決められます。
🧐 よくある質問
Q. 出力サイズは何ピクセルですか？ A. 1280×640 PNG で固定出力されます。GitHub Docs が「最低 640×320、推奨 1280×640」と案内しているサイズに合わせてあります。
Q. プレビュー画面は実寸より小さいけれど大丈夫？ A. プレビューは表示の都合で 480×240 に縮小しています。書き出される PNG は 1280×640 の実寸サイズなので、SNS カードでの見え方はダウンロードした画像で確認してください。
Q. リポジトリ名がどこまで入りますか？ A. リポジトリ名は最大 50 文字、説明文は最大 80 文字、言語タグは最大 20 文字までです。リポジトリ名は長い場合は自動で縮小されますが、80 文字を超えるような長い説明は途中で切れるため、要点を 1 行にまとめてください。
Q. アクセントカラーはどこに反映されますか？ A. ダーク／ライトテーマでは右上の小さなドットと、言語タグのチップ背景に使われます。アクセントテーマを選ぶとカード全体の背景色そのものになります。
Q. 透過の PNG として書き出せますか？ A. このツールは下地のテーマカラー込みで描画するため、出力は背景塗りつぶしの PNG になります。GitHub の Social preview は透過 PNG も受け付けますが、Slack や X のダークモード／ライトモードどちらでも崩れにくくするために、ベタ背景のままアップロードする方が無難です。
Q. PNG 以外の形式は出せますか？ A. このツールの出力は PNG のみです。GitHub の Social preview 自体は PNG・JPG・GIF（1MB 未満）を受け付けるので、必要であれば PNG を別ツールで変換してください。
📚 OSS リポジトリの「顔」を整えるという小さな実利
リポジトリの Social preview 画像は、GitHub のリポジトリ Settings → Social preview からアップロードできます。設定していないリポジトリは、GitHub があらかじめ用意しているデフォルトのカードが共有時に出ますが、文字情報だけのデフォルトカードと、リポジトリ名・言語タグ・アクセント色が入った専用カードでは、見た瞬間の「これは何の OSS なのか」の伝わり方が変わります。
国内の個人 OSS や勉強会で公開するサンプルリポジトリでは、README の冒頭に魅力的なスクリーンショットを置く文化が根付いていますが、Slack や X にリポジトリ URL を貼ったときに見えるのは README ではなく Social preview の方です。デザイナーが身近にいなくても、ロゴ素材がなくても、リポジトリ名・短い説明・言語タグの 3 点だけで「これは Rust で書かれた CLI ツールなんだな」「TypeScript の React コンポーネント集なんだな」という最低限の文脈を、リンクを受け取った人に渡せます。アクセント色を 1 色決めてしまえば、複数のリポジトリで揃ったトーンを作ることもできるので、個人の作品群としての見え方も整います。