【手順】FigmaでOGP1200×630を案件ごとに量産する【納品】

LPやコーポレートサイトを納品するとき、OGP画像（1200×630px前後）だけ後回しになっていませんか。私も実装まで進めてから「SNS用の画像がまだ」と気づくことがあり、Figmaでページカンプは揃っているのに、OGPだけ別ツールで作り直すムダが出やすいです。

この記事では、Figma OGP 書き出しを、案件ファイルの中で量産できるワークフローに固定する手順を書きます。1枚だけの案件でも、下書きブログのように複数URLがある案件でも、同じ型で回せます。Web制作の納品チェックリストの「OGP用画像」項目と並べて使うと、公開前の抜けが減ります。

この記事でわかること

• 1200×630を基準にしたOGPフレームの置き場所と命名
• コンポーネント化してタイトル差し替えだけで量産する型
• PNG書き出し設定と、実装側へ渡すファイル名ルール
• 納品前にクライアントと確認すべき3点

先に結論

• 向いている人: Figmaでサイトカンプまで持っていて、OGPも同じツールで揃えたいWebディレクター・デザイナー
• 向いていない人: すでにCanvaや社内テンプレだけでOGP運用が固定されており、Figmaを触らない体制のチーム
• 私のおすすめ: 専用ページ「OGP / 1200×630」を1枚作り、ベースコンポーネント＋インスタンス差し替えで量産する

この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。

なぜ1200×630をFigmaで固定するのか

OGPはSNSやチャットアプリのリンクプレビュー用です。プラットフォームごとに微妙な差はありますが、1200×630pxを基準にしておくと、WordPressのSNSプラグインや各種CMSの推奨サイズと噛み合いやすいです。Figma側ではフレームサイズをこの数値に固定し、Safe Area（文字が切れにくい内側余白）だけ案件で調整するイメージです。

カンプ用の1280pxや1440pxのキャンバスから、OGPだけ別比率で切り出す作業は手間がかかります。OGP専用ページを最初から用意しておくと、実装担当が「このPNGをOGPに設定して」と言われたときに迷いません。制作の入口はFigmaから実装へ渡す流れの柱記事も参考になります。

ファイル構成：OGPページをどこに置くか

案件ファイルが大きくなる前に、ページ一覧の末尾か「Assets」付近に 「OGP / Social」 のような専用ページを1枚追加します。トップ、下層、コラム一覧など、URL単位でOGPが必要な分だけ、同じページ内にフレームを縦に並べます。

私の運用では、ページカンプのページ名とは分けます。カンプレビュー用リンクをクライアントに渡すとき、OGPフレームまで見えすぎると「ここだけ文言変更」が増えることがあるからです。社内用ページとしてOGPを置き、確定後に書き出してDriveや納品ZIPに入れる流れが扱いやすいです。

Figmaの有料プランでは、Dev Modeやバージョン履歴で「いつOGPを確定したか」も追えます。無料プランでも、フレーム命名と書き出し設定さえ揃えれば量産は可能です。料金は執筆時点の公式情報を確認してください。

ベースコンポーネントで量産する型

1枚ずつ複製するより、OGPベースのコンポーネントを作ってインスタンスを増やす方が速いです。構成の例は次のとおりです。

• 背景（単色または写真。写真は1200×630でトリミング済み）
• ロゴ（SVGまたは高解像度PNG）
• タイトルテキスト（2行まで想定、Auto Layoutで折り返し）
• 任意：サブコピー、サイト名、コーナーのアクセント

タイトルだけをインスタンスごとに差し替え、背景色や写真差し替えはVariantsで持つ方法もあります。Variablesでブランドカラーを揃えている案件なら、Figma Variablesとデザインシステムと同じトークン名をOGP側にも使うと、サイト本体と色がズレにくくなります。

書き出し設定と命名ルール

FigmaのExportは、フレームを選んで右パネルから PNG、1x、サフィックスなし が基本です。Retina用に2xを足す案件は、実装側と「どちらをOGPに使うか」を先に決めてください。WordPressなら1xの1200×630をアップロードし、プラグイン側でリサイズさせる運用が多いです。

命名は実装とCMSが追える形にします。

1. 小文字英数字とハイフン（例: ogp_about-company.png）
2. 日本語ファイル名は避ける（サーバー環境で文字化けしうる）
3. 同一案件内で重複しない（ogp_top.png / ogp_news-list.png）

Bulk exportは、複数フレームを選択して一括Exportできます。選択順とファイル名の対応をスプレッドシートに1行メモしておくと、納品メールに貼れて便利です。

量産手順（5ステップ）

実務でそのまま使える順番です。

1. OGP専用ページを追加し、1200×630の空フレームを1つ置く
2. ベースコンポーネントを作り、ロゴ・タイトル・背景をAuto Layoutで固定
3. 必要なURL数だけインスタンスを複製し、タイトルと背景だけ差し替え
4. クライアントまたはディレクターが文言確定したフレームに「Ready」コメントを付ける
5. 確定フレームだけ選択し、Export to PNG → 納品フォルダへ

実装に入る前に、ステージングURLでOGPが反映されるか1ページテストすると安心です。キャッシュプラグインやCDNがあると、画像差し替え後も古いプレビューが残ることがあります。

納品前チェック（クライアント共有用）

OGPをZIPで渡す前に、私は次の3点を自分用チェックリストにしています。

• 文字切れ: 長いタイトルで2行目がSafe Areaからはみ出していないか
• ロゴ視認性: 背景写真の上でロゴが読めるか（必要なら半透明の板を足す）
• ファイル対応表: どのPNGがどのURLのOGPか、1行表で添える

これはWeb制作の納品チェックリストの公開ブロック直前の作業とセットです。クライアントがWordPress管理画面で自分で設定する場合、設定場所のスクショ付き短い手順を同梱すると問い合わせが減ります。

よくあるミスと対処

カンプのスクリーンショットをそのままOGPにしているケースがあります。16:9に近い画面キャプチャは、SNS上で上下が切れて重要な文言が消えることがあります。OGP用に再レイアウトしたフレームを必ず用意してください。

フォントがWebと違うのは、OGPがアウトライン化されていないうちに、環境のないフォントで開かれた場合にも起きます。納品前にアウトライン化するか、Webフォントと同じファミリー名を明示してください。

画像容量が大きすぎると、シェア時の表示が遅くなります。PNGのまま500KBを超える場合は、書き出し後にSquooshでWebPや軽量PNGに圧縮してからアップロードする、という二段階もあります。OGP自体はPNG指定のCMSが多いので、最終形式は実装側と合意してください。

よくある質問

Figma無料プランでも一括書き出しはできますか？

はい。複数フレームを選択してExportする操作は無料プランでも使えます。制限はファイル数やバージョン履歴など別項目なので、最新のFigmaの料金ページで確認してください。

OGPはJPGとPNGどちらがよいですか？

文字とロゴが主ならPNG、写真だけのOGPならJPGでも問題ないことが多いです。透過が要らない案件ではJPGの方が軽くなります。クライアントのCMSが「推奨PNG」と書いている場合はそれに従います。

ブログ記事ごとにOGPが必要な案件は？

記事スラッグ単位でフレームを増やすか、テンプレ1種＋タイトル差し替えに限定するかを先に決めます。量が多い場合は、Variablesで「カテゴリ色だけ変える」などVariantsを絞ると管理が楽です。

Canvaと併用してもよいですか？

問題ありません。ただしブランドカラーとフォントがFigmaカンプとズレやすいので、正本をFigmaに置くか、Canvaテンプレの数値をFigmaのStylesと同じHEXに揃えるとよいです。

まとめ

Figma OGP 書き出しは、1200×630の専用ページとベースコンポーネントを用意すれば、案件後半の「SNS画像だけ未着手」をかなり減らせます。今日やることは次の1つで十分です。

• 手元の案件ファイルに 「OGP / 1200×630」ページを1枚追加し、トップ用フレームを1つだけ作る

量産の型ができたら、下層ページ分のインスタンスを増やし、確定分からPNGを書き出して納品フォルダへ入れてください。Figmaの操作環境を整える場合は、Figma公式からプランを確認し、チームで編集権限を揃えるところから始めるとスムーズです。

関連: Figma制作フローの入口 / 納品チェックリスト / Variablesとデザインシステム