10月15日（木・日本時間）は、PlayStation Blogでも触れられているように、テイルズ オブ エターニア リマスターやCastlevania: Belmont’s Curse、RATATANなど、PS5向けの注目タイトルが同日に並ぶ週です。私はWeb制作のフリーランスとして、新作が出るタイミングでブログのサムネとX（旧Twitter）用画像を同じデザインから出したいことがよくあります。画像編集アプリを何個も開くより、Figma バナー 書き出しを1ファイルにまとめた方が、色と余白のズレが減ります。本記事はゲームの攻略や購入判断ではなく、告知用バナーを16:9と1:1に書き出す制作ワークフローに絞ります。操作はFigmaの画面を前提に書きますが、他のベクターツールでも考え方は流用できます。
この記事でわかること
- ブログ用16:9とSNS用1:1を同じFigmaファイルで管理するフレーム構成
- Export設定で画質とファイルサイズを抑える目安
- 公式素材を使うときの著作権・クレジットの線引き
先に結論
- 向いている人: ブログや個人メディアで新作発売日に告知する人、すでにFigmaの制作フローを使っている人、Steamやストアのスクショを自分でトリミングして載せている人
- 向いていない人: 公式が配布するバナー画像をそのまま貼るだけで十分な人、動画サムネだけ別ツールで作りたい人（本記事は静止画中心です）
- 私のおすすめ: マスターフレームを1920×1080で1枚作り、Auto Layoutでテキストを固定し、1:1は中央をクロップする書き出しにすると、発売日の朝に迷いません
私は発売前夜に「ロゴ＋発売日＋1行コピー」だけ入れた下書きフレームを作り、当日はスクショ1枚差し替える運用にしています。
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
10月15日発売と告知画像の関係
同日発売が重なる週は、1本だけ深く書く記事と、短い告知を分けた方が読者にも優しいです。FamitsuやPlayStation Blogのスケジュールを見ると、10月15日は複数タイトルが並びますが、ブログ側で全部を同じ深さで扱う必要はありません。告知バナーは「どの記事／どの投稿に飛ばすか」がはっきりしていることが先で、装飾は二の次です。
| 用途 | 推奨比率 | 目安ピクセル | 載せる情報 |
|---|---|---|---|
| WordPressアイキャッチ | 16:9 | 1920×1080 | タイトル略称・発売日・サイト名は小さく |
| X投稿 | 1:1 | 1200×1200 | 同上（文字数はさらに短く） |
| 記事本文先頭 | 16:9 | 1280×720でも可 | バナーと同系色で統一 |
設定や発売前チェックの記事は、テイルズ オブ エターニア リマスターの言語設定やキャッスルヴァニアPS5の操作設定など別URLに飛ばす想定で、バナーには記事の種類が一目で分かるラベル（例:「設定」「比較」）を入れると一覧が読みやすくなります。
Figmaファイルの初期構成
- 新規ファイルを作り、ページ名を
2026-10-15-releaseのように日付で切る - Frame
Banner_Master_16x9を 1920×1080 で作成 - 複製して
Banner_Square_1x1を 1200×1200 で作成（後でマスターから要素をコピー） - 色は Variables またはスタイルで
bg / text / accentを3色までに抑える（Figma Variablesの整理と同じ考え方です）
背景は単色か弱いグラデーションに留め、ゲームの公式キービジュアルを全面に敷き詰めない方が安全です。私は中央に自分で撮った画面写真か、ストアで許諾範囲が明確な素材だけを置き、周囲は余白で逃がします。
マスターフレームに入れるレイヤー
レイヤー名は英数字で揃え、Export時に迷いません。
bg— 背景（矩形）screenshot— ゲーム画面または製品写真（角丸8px程度）title— 日本語タイトル（最大2行、16:9は32〜40px目安）date— 「2026.10.15 発売」などbadge— 「設定」「比較」など記事種別logo_site— 自分のサイトロゴ（任意・小さく）
テキストは最初から長文を入れないで、発売日が近づいたら1行だけ差し替えるようにしています。
Auto Layoutを使う場合は、縦方向のスタックで title → date → badge の順にし、左右余白を48px以上空けます。1:1フレームへコピーするとき、横長のスクショは左右が切れてもよい前提で中央配置にすると、SNSでも顔やロゴが残りやすいです。
書き出し（Export）手順
Figmaでフレームを選び、右パネルの Export から次を設定します。
- 形式は PNG（写真混在）または JPG 80〜90%（写真多めで容量を抑える）
Banner_Master_16x9→ スケール 1x（1920×1080）Banner_Square_1x1→ スケール 1x（1200×1200）- ファイル名は
oct15-tales-banner-16x9.pngのように 日付＋略称＋比率 - 書き出し後、Finderやエクスプローラーで 200KB〜800KB 程度か確認（WordPressは1MB超でも動きますが、モバイル読者向けに圧縮を検討）
複数タイトルを同じ週に扱うときは、フレームを複製し Banner_Master_16x9_ratatan のように suffix を付けます。Unity向けの9-slice書き出しとは別用途ですが、命名規則を揃える点は同じです。
WordPressへ載せるときのチェック
アイキャッチは16:9のファイルを使い、本文先頭に同じ画像を載せる場合は 別サイズにリサイズ して二重表示を避けます。Cocoon系テーマではアイキャッチが自動で一覧に出るため、1:1は投稿本文やSNS専用に回すのが無難です。
- アイキャッチ: 16:9・タイトル文字は画像に焼き込みすぎない（アクセシビリティとSEOのため、重要語は記事タイトル側に残す）
- altテキスト: 「10月15日発売のテイルズ オブ エターニア リマスター告知バナー」のように何の画像かを書く
- 内部リンク: 深い記事へ1本以上（例: 10月15日PS5新作3本の比較）
ブログ全体の画像サイズ感は、FigmaからWeb実装へ渡す書き出しの章も参考にしてください。
著作権・クレジットの線引き
一般論として、メーカーが配布するプレスキットやストア用素材の利用範囲は配布ページの規約が正本です。私の運用では次を守ります。
- ストアのスクショを加工してバナーにする場合、販促目的の自分のメディア内に留め、素材の再配布はしない
- ロゴ単体を大きく切り出して商標っぽく見せない
- 公式が禁止しているトリミングや色変更がある場合は従う
- 引用するなら本文に公式ページへのリンクを置き、画像は自分で撮影した画面に寄せる
体験談と調べた規約は分けます。私は未プレイのタイトルでは「画面は公式トレーラー由来」と一文入れることがあります。
発売日当日の時系列（例）
10月15日の朝、私がやる順番は固定です。
- 06:30 — ストアの配信状態を確認（予約済みならDL開始通知）
- 07:00 — 深い記事のURLを確定し、バナーの
badgeレイヤーを最終確認 - 07:15 — Figmaから16:9と1:1を再Export（前夜の下書きを上書き）
- 07:20 — WordPressにアイキャッチ設定し、予約投稿または即公開
- 07:25 — Xに1:1を添付し、記事URLを1本だけ貼る
ゲーム本体の設定作業は、RATATAN発売前のPS5音声設定など別記事に任せ、告知の30分とプレイ時間を分けると燃え尽きにくいです。
よくある質問
Q. 1:1と16:9で別デザインにした方が目立ちますか？
A. 目立たせたい場合はアクセント色を変える手もありますが、同じ構成の方が一覧でブランドが揃います。私は1:1だけ文字サイズを10%大きくする程度に留めています。
Q. Figma無料枠でも足りますか？
A. 告知バナー程度のファイル数なら、無料プランでも足りることが多いです。チームで版管理するなら、Figmaのコンポーネント整理を先に読むと、過去の発売日フレームを再利用しやすくなります。
Q. 画像だけ作って記事が無い状態で投稿してもよいですか？
A. 私は避けます。先に本文または設定記事を1本用意し、バナーはその導線にします。画像だけの投稿は離脱が高く、AdSense・アフィリエイトの信頼も下がりやすいです。
Q. Cursorで文章を書きながらFigmaを触る運用はありますか？
A. あります。下書きMarkdownをCursorでIssue文に整える手順と同様、テキストはエディタ、見た目はFigmaに分けると、発売日に画面を行き来する回数が減ります。長文執筆用にCursorを使う場合も、ExportしたPNGのファイル名だけFigma側で統一しておくと後から探しやすいです。
まとめ
10月15日のような多作発売日は、Figmaで16:9と1:1を同じマスターから書き出すだけで、ブログとSNSの見た目を揃えられます。公式素材の範囲を守り、深い記事へ内部リンクを1本足すのが、私の横断（仕事×ゲーム告知）の最小セットです。
今日やること（チェックリスト）
- [ ] Figmaに
Banner_Master_16x9（1920×1080）を1枚作った - [ ] 同内容の
Banner_Square_1x1（1200×1200）を用意した - [ ] ExportをPNGまたはJPGで実行し、ファイル名に日付と比率を入れた
- [ ] WordPressのアイキャッチに16:9を設定し、altを日本語で書いた
- [ ] 飛び先の記事URLを1本決め、X用に1:1を保存した
Figmaの公式サイトはこちら。制作フロー全体はFigma制作ハブもあわせて参照してください。
