URLからOGP画像を作るキット

こんなときに

OGPを作りたいが、コードが無い外部委託・ノーコードのサイトでは既存のやり方が使えない

できること

サイトのURLを渡すだけで、OGP画像（SNSでリンクを共有したときに出る画像）を作ります。Chromeでサイトを実際に開いて背景色・文字色・アクセント色・書体・ロゴを読み取り、そのサイトに見える画像にします。作風はshowcase（サイトの画面入り）・glow（光の飾り）・editorial（雑誌風の文字組み）の3つから選べます。いまのOGP画像の大きさ・比率・alt(説明文)の有無も点検し、ページに貼るタグをそのまま出します。見出しやひとことは、ページのタイトルと説明文か利用者の言葉だけを使い、数字や実績を作り話にしません。まず1枚作って見てから、作風・色・見出し・ロゴを直せます。

このキットに入っている「直し」

1. 見出しに社名がそのまま残るog:site_nameが「株式会社◯◯」のように見出しのサイト名と完全には一致せず、見出しの頭に社名の切れ端が残っていた。切れ端がサイト名に含まれていれば、サイト名とみなして落とすようにした。
2. 貼るタグの画像の場所が実際と違う出すタグの例が決まった場所になっていたが、実際のOGP画像は別の場所にあり、そのまま貼ると画像が出なかった。いまの画像の置き場所をそのまま例に出すようにした。
3. 差し替えても古い画像がSNSに出続ける同じ場所に上書きすると、SNSは前に読んだ画像を覚えていて、古い画像を出し続けることがある。作るたびに名前を変えるか、確認ツールで読み直すよう案内し、FacebookとLinkedInの確認ツールの場所も出すようにした。
4. 配色の指定が無いサイトで色が合わない配色の指定が無いサイトでは、合わない既定の色（紺）になっていた。サイトを実際に開いて、背景・文字・ボタンの色を読み取るようにした。
5. 黒いサイトを白と読み違える背景を画像やグラデーションで塗っているサイトは、色の設定値が白のままで、黒いサイトを白と読み違えていた。画面を撮った色を数えて、多数派の色を採るようにした。
6. サイトの書体が使われずゴシックになるサイトは明朝体でも、作る人のパソコンにその書体が無いと画像がゴシックになっていた。サイトの上に型を重ねて撮ることで、サイトが読み込んだ書体をそのまま使うようにした。
7. 日本語が単語の途中で改行される日本語の説明文が単語の途中で改行されていた。文節で折り返す指定が効くよう、型に日本語と分かる指定を付けた。
8. 収まっている見出しまで最小の大きさに縮む文字の形が行の枠から数pxはみ出すだけで「はみ出し」と数えていたため、2行で収まる見出しまで縮んでいた。縦に文字の大きさの1/4まで遊びを持たせるようにした。
9. 長い見出しが1行のまま「…」で切れる長い見出しが1行のまま縮まずに「…」で切れていた。まず1行のまま縮め、それでも収まらなければ2行に折り返してから縮めるようにした。
10. アクセント色が無いサイトで光の飾りが汚れて見えるアクセント色が無いサイトでは、光の飾りが灰色のにじみになって汚れて見えていた。アクセント色が無いときは光を弱めるようにした。

入っているもの

• 工程の進め方（URLを決める→1枚作る→見る→直す→渡す）
• サイトをChromeで開いて色・書体・ロゴ・画面を拾う道具
• showcase・glow・editorialの3つの作風の型
• いまのOGP画像を点検する機能（大きさ・比率・altの有無）
• ページに貼るタグをそのまま出す機能
• 実在サイトで踏んだ10の直し（サイト名の重複・古い画像のキャッシュなど）

最初に決める3つ

1. サイトのURL（記事ごとに作るなら、その記事のURL）
2. 作風（既定はshowcase。ほかにglow・editorial）
3. 見出し（既定はページのタイトルからサイト名を除いたもの）

必要なもの

• 追加費用なしNode.js22以降が要ります。https://nodejs.org から入ります
• 追加費用なしGoogle ChromeなどEdge・Braveでも可。サイトを開いて画面や色・書体を撮るのに使います
• 追加費用なしログイン不要の公開URLログインが要るページ・社内のページは画面に中の情報が写るため作れません

使い方

お使いのAIに、これを貼るだけです。

nice to have のキット「URLからOGP画像を作るキット」を使いたい。https://nicetohave.app/g/YPZZSDMC-•••••••••• のとおりに取り込んで。

Claude Code でも Codex でも同じです。
貼る前に、AIに何をさせるのか読む

よくある質問

出てきたタグは、サイトに入れてもらえますか？

入れません。キットはサイトの中身を書き換えず、入れるタグを出すところまでです。サイトの担当者に渡すか、ご自分で貼ってください。画像の場所は https:// から始まる URL で書きます。

開くと「同意」の窓が出るサイトでも作れますか？

作れますが、showcase（サイトの画面入り）では、その窓が画面写しに写ることがあります。そのときは glow か editorial を選んでください。

画像の書体がサイトと違って見えます。

サイトが書体を読み込む前に撮った可能性があるので、もう一度作ってみてください。それでも違うときは、サイトが見出しを画像で出している可能性があり、その場合は再現できません。

見出しが長くて、文字が小さくなってしまいます。

文字を小さくする前に、見出しの言葉を減らすことを勧めます。画像を幅400pxくらいに縮めても読めるかが目安で、いまのタイトルからいちばん伝えたい部分だけにします。

SNS ごとのファイルの大きさの上限にも合わせてくれますか？

各 SNS の細かい上限（ファイルの大きさ・最小サイズなど）は、このキットには入っていません。気になるときは各 SNS の公式の説明で確かめてください。画像は1200×630で作り、細かさを2倍（2400×1260）にもできます。

応援した人

応援の受け付けを始めたら、このキットを応援した人がここに並びます。