新作ゲームのUIスクショを案件資料に混ぜるとき、PNGのまま貼るとファイルが重くて共有が遅い——そんな場面で調べるのが Figma WebP 書き出し です。私はWebディレクションで、クライアント向けの画面一覧やボタン素材の差し替え案をFigmaで作ることが多いです。ゲーム本体のキャプチャは著作権の話が別ですが、自作モックや注釈付きのUIフレームなら、軽い形式で渡した方がSlackもメールも楽になります。
本記事は、ゲームUIっぽいフレーム（ボタン・アイコン・ダイアログ）をFigmaからWebPで書き出し、WordPressのメディアに載せるまでの流れに絞ります。コンポーネント命名の整理はゲームUIコンポーネント命名の手順に任せ、SVGのサニタイズはWordPressへSVGを載せる前の手順と切り分けます。私はFigmaの書き出しとWordPressへの手動アップロードを、週1回の納品前チェックで回しています。体験と調べた公式ヘルプは分けて書きます。
この記事でわかること
- ゲームUI素材でWebPを選ぶ場面とPNGを残す場面
- Figmaの書き出し設定（2倍・圧縮・透過）の目安
- WordPressへ載せたあとに確認する表示と容量のポイント
- 案件フォルダとファイル名を揃える最低限のルール
先に結論
- 向いている人: ボタン・アイコン・ダイアログ枠など平坦なUIパーツを、ブログや納品PDFの添付用に軽くしたい人。WordPressでスクショ記事を書く人。
- 向かない人: グラデーションや細いグローが主役のKV、1pxの境界が厳しいロゴ（PNGまたはSVGを優先）、アニメーション付きUI（静止画書き出しでは別工程）。
- 私のおすすめ: 一覧用はWebP（2倍）、ロゴと細線だけPNGを同フォルダに1枚ずつ残す。命名はコンポーネント命名ガイドと同じプレフィックスに揃える。
私は最初「全部WebPでいいや」とやって、細い枠線が滲んだ画面だけPNGに戻しました。失敗1回でルールが固まります。
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
WebPを選ぶ理由（ゲームUI素材の前提）
ゲームUIは、角丸ボタン・アイコン・半透明のオーバーレイが多く、写真より圧縮に向きやすいタイプです。WebPは同じ見た目ならPNGより容量が小さくなりやすく、WordPressのメディアライブラリも軽く保てます。
一方で、極細の1pxボーダーや、暗い背景に乗せた発光エフェクトは、圧縮でにじむことがあります。そこは「全部WebP一択」ではなく、一覧はWebP・証拠用にPNG1枚の二段構えが現実的です。実機キャプチャをそのまま載せる記事は別ルール（公式・権利）なので、本稿はFigma上のモック・注釈フレームが対象です。
書き出し前にFigma側で揃えるもの
書き出しボタンを押す前に、次の3点だけ確認します。
- フレーム名 —
btn-primary-defaultのように、案件と状態が分かる英数字。日本語だけのレイヤー名は検索と差し替えがつらいです。 - オートレイアウトの余白 — 書き出し範囲に意図しない余白が入ると、WordPress上でボタンが小さく見えます。Export設定で「フレームのみ」か「コンテンツのみ」を毎回同じにします。
- 効果（ドロップシャドウ） — 強いシャドウはWebPで帯が出やすいです。納品用は弱めるか、PNGに逃がす候補にします。
コンポーネント化の手順は命名ガイドを先に読んでおくと、書き出し単位がブレません。
Figma WebP 書き出しの手順（2倍・透過）
操作はFigmaのバージョンで文言が少し変わりますが、流れは同じです。執筆時点（2026年9月27日・日本時間）の一般的な手順です。
- 書き出したいフレームまたはコンポーネントを選択する
- 右パネルの Export セクションで形式を WebP にする
- Scale は、ブログ掲載なら 2x を起点にする（Retina相当。1xだと記事内で粗く見えることがある）
- 透過が必要なボタン・アイコンは 透明背景 のまま書き出す（背景色付きフレームは別レイヤーに分ける）
- Export でフォルダに保存する
複数フレームをまとめるときは、同じScale・同じ形式に揃えます。混在するとWordPressに載せたあと、一覧表のサムネだけ大きさがバラバラになります。
Figmaのチームライブラリを使っている場合、書き出し権限がメンバーごとに違うこともあります。外注先に「書き出しだけ任せる」ときは、Viewerではできないので、権限を先に確認してください。
書き出しは地味ですが、ここをブレると実装側の「画像サイズ違います」が一気に増えます。
ファイル名とフォルダのルール（最低限）
私は案件ごとに次の形にしています。
- フォルダ:
YYYYMMDD-案件略称-ui-webp/ - ファイル:
案件略称_btn-primary_hover_2x.webp
ゲームタイトルそのものを長く入れるより、画面IDやボタン役割を入れた方が、後からWordPressのメディアを検索しやすいです。個人情報や未公開の社名は入れません。
バージョンが増えたら _v2 を末尾に足すだけにし、_final_final は避けます。納品履歴はFigmaのバージョン履歴と、ローカルフォルダの日付で足りることが多いです。
WordPressへ載せるときの手順
WordPress（Cocoon）では、次の順で進めます。
- 管理画面 → メディア → 新規追加 でWebPをアップロードする
- アップロード後、代替テキストにボタン名や画面の役割を短く入れる（装飾だけの画像なら空でも運用はありますが、UI説明記事なら入れた方がよいです）
- 記事編集画面で 画像ブロック を挿入し、メディアライブラリから選ぶ
- 表示サイズは フルサイズ か 大 を選び、テーマ側で勝手に拡大されないかプレビューで確認する
WebPがサーバー側で拒否される環境も過去にはありました。アップロードエラーが出たら、まず1枚だけPNGで試す→問題なければWebPのMIME設定をホストに確認、という切り分けが早いです。自サイトの運用はエックスサーバー前提の記事も多いですが、プランやPHP設定は時期で変わるので、エラー文をそのままサポートに渡すのが確実です。
PNGやSVGと併用する判断
| 素材の種類 | 第一候補 | 補足 |
|---|---|---|
| 角丸ボタン・アイコン | WebP（2x） | にじみが出たらPNG |
| 細線ロゴ・1px枠 | PNG | WebPは圧縮を弱めるか諦める |
| 単色アイコン | SVG | SVGサニタイズ手順を先に |
| 実機スクショ | 公式・権利確認後に最適化 | 本稿のFigma書き出しとは別 |
ゲーム記事で操作説明の矢印だけFigmaで足す場合、矢印はSVG、ボタン切り抜きはWebP——とレイヤーを分けて書き出すと、あとから差し替えが楽です。
よくある失敗と対処
- ボタンがギザギザ — Scaleが1xのまま。2xに上げるか、元フレームのサイズ自体を大きくする。
- 背景が白い四角になる — 書き出し対象に背景矩形が含まれている。透過用フレームだけ選択する。
- WordPressでだけ色が変 — テーマの画像圧縮プラグインが二重に効いている。プラグイン側のWebP変換を一度オフにして比較する。
- クライアントに「文字が読めない」 — 注釈テキストを画像に焼きすぎ。テキストはHTML側に残し、画像はUIパーツだけにする。
リビングでゲーム記事を書きながらUI資料を整える週は、画像作業とプレイ時間がぶつかります。私は書き出しだけ平日の昼にまとめ、夜は記事本文だけ触るようにしています。プレイ環境の整理は在宅Mac作業環境の選び方とは別軸ですが、「作業を時間で分ける」考え方は同じです。
よくある質問
Q. Figma WebP 書き出しは無料プランでもできますか？
A. 執筆時点では、基本的な書き出しは無料プランでも利用できることが多いです。ただし、チームの権限やDev Modeの範囲はプランで変わります。大規模案件はFigmaの公式プラン表を購入前に確認してください。
Q. 2倍書き出しにするとWordPressの表示も2倍になりますか？
A. 画像ファイルのピクセル数が増えるだけで、表示サイズはHTML/CSS（ブロックの幅）で決まります。2xは「高解像度の素材を持っておき、表示は適切な幅に縮小する」ためのバッファです。
Q. ゲーム本体のUIキャプチャをWebPに変換して載せてもよいですか？
A. 権利・利用規約が先です。自分で撮ったスクショでも、タイトルによっては二次利用が制限されます。本記事の手順は、自作モックや権利クリアな素材向けです。実機画面は公式ガイドラインを確認してください。
Q. PNGよりどれくらい軽くなりますか？
A. 素材次第です。平坦なボタンなら同じ見た目で半分以下になることもありますが、保証はできません。納品前にフォルダ全体の合計MBをPNG版とWebP版で比べるのが確実です。
まとめ
Figma WebP 書き出しは、ゲームUIのボタンやアイコンを軽く共有するための実務スキルです。一覧用はWebP（2倍）、細線だけPNG、単色はSVG——と役割を分け、コンポーネント命名とセットで運用すると、WordPressへの載せ替えが速くなります。
今日やること
- 書き出すフレームを1つだけ選び、命名を英数字に直す
- WebP・2x・透過で1枚書き出す
- WordPressメディアにアップロードし、プレビュー記事で表示確認する
- にじみが出た要素だけPNGで再書き出し、フォルダに並べる
- 次回から同じScaleと形式をテンプレ化する
画像形式の議論は地味ですが、一度ルールを決めるとあとの記事更新がだいぶ楽になります。
関連: ゲームUIコンポーネント命名 / WordPress SVGサニタイズ / 在宅Mac作業環境ハブ
