screenshot.pngの作り方｜テーマ一覧に美しく表示させるコツ
WordPressテーマを作成・配布する際に欠かせないファイルのひとつが screenshot.png です。
この画像は、WordPress管理画面の「外観 ＞ テーマ」一覧に表示され、テーマの第一印象を決定づける重要な要素となります。
本記事では、screenshot.pngの基本仕様から、見た目を整えるための具体的な作り方、よくある注意点までを体系的に解説します。
テーマ開発の基礎をしっかり固めたい方に向けた内容です。
Contents
screenshot.pngとは何か
screenshot.pngは、WordPressテーマフォルダ直下に配置するテーマのプレビュー画像です。
管理画面上でテーマを選択する際に表示され、デザインの方向性や完成度を視覚的に伝える役割を持ちます。
このファイルが存在しない場合、テーマ一覧では空白または簡易的な表示となり、視認性が大きく下がります。
screenshot.pngの基本仕様
ファイル名と配置場所
- ファイル名：
screenshot.png - 配置場所：テーマのルートディレクトリ
例：
/wp-content/themes/my-theme/
├─ style.css
├─ functions.php
├─ index.php
└─ screenshot.pngファイル名の大文字・小文字は区別されるため、必ず すべて小文字 にします。
推奨サイズとアスペクト比
WordPress公式では、以下の仕様が推奨されています。
- サイズ：1200 × 900px
- 比率：4:3
- 形式：PNG
このサイズで作成すると、テーマ一覧・詳細表示のどちらでも崩れにくく、もっとも安定します。
テーマ一覧で「美しく見える」画像の考え方
screenshot.pngは、Webサイトの実画面をそのまま切り取ればよい、というものではありません。
テーマ一覧という特殊なUIで表示されることを前提に設計する必要があります。
重要なのは「縮小される前提」
テーマ一覧では、screenshot.pngは縮小表示されます。
そのため、以下の点を意識することが重要です。
- 細かい文字は読めない
- 情報量が多いとごちゃつく
- 全体構成と余白が目立つ
screenshot.pngの作り方（基本手順）
① テーマの完成形を表示する
トップページ、もしくはテーマの特徴が最も分かる画面を表示します。
レイアウト・配色・余白が整った状態であることが重要です。
② ブラウザで適切な範囲をキャプチャ
- ヘッダー〜メインコンテンツまでを中心に
- フッターは無理に入れなくてよい
- 余白が極端に狭くならないよう注意
③ 画像編集ソフトでトリミング・調整
- 比率を 4:3 に合わせる
- 1200×900pxにリサイズ
- ぼやけないようシャープさを確認
④ PNG形式で保存
JPEGではなく PNG形式 を使用します。
圧縮しすぎず、にじみのない状態で保存することが大切です。
文字やロゴは入れるべきか
screenshot.pngには、基本的に文字を入れない、もしくは最小限に留めるのが無難です。
文字を入れる場合の注意点
- 小さな文字は読めない
- 端に寄せるとトリミングで切れる可能性がある
- テーマ名は管理画面に表示されるため必須ではない
そのため、「レイアウトと雰囲気が伝わる画像」を優先するのが適切です。
よくある失敗例
サイズが合っていない
- 縦長・横長すぎる
- 比率が4:3でない
→ 表示時に不自然なトリミングが発生します。
情報を詰め込みすぎている
- テキストが多い
- 要素が密集している
→ 縮小時に視認性が大きく低下します。
デザイン未完成の状態で撮影している
- 仮データのまま
- レイアウト崩れがある
→ テーマ全体の印象を損ねます。
screenshot.png作成時のチェックリスト
- ファイル名は
screenshot.pngか - テーマ直下に配置されているか
- サイズは1200×900pxか
- 4:3比率になっているか
- 文字や要素が小さすぎないか
このチェックを通すことで、テーマ一覧での見た目は大きく改善されます。
テーマ開発全体との関係性
screenshot.pngは単体で考えるものではなく、テーマ全体の完成度を反映する要素です。
テーマ構造やCSS設計が整っていなければ、見栄えの良い画像は作れません。
テーマ制作の基礎については、以下の記事もあわせて確認すると理解が深まります。
まとめ
screenshot.pngは、WordPressテーマ一覧で最初に目に入る重要な要素です。
正しいサイズと比率を守り、情報を絞ったシンプルな構成にすることで、テーマの印象は大きく向上します。
テーマ開発の仕上げとして、screenshot.pngまで丁寧に作り込むことが、完成度の高いテーマ制作につながります。