WordPressのSWELLテーマでサイトを立ち上げる際、画像設定はとても重要です。特に、メインビジュアル、アイキャッチ、OGP画像などは、サイトのデザインやSNSでの見え方に大きな影響を与えます。しかし、これらを一通り用意するのは最初は大変です。
この記事では、SWELLテーマで利用する各種画像について、適切なサイズや設定方法を初心者向けに分かりやすく解説します。効率的に準備を進めていきましょう！
画像の一覧と推奨サイズ
以下は、SWELLテーマで利用される主な画像の種類とその推奨サイズ一覧です。
| 名称 | 表示箇所 | 推奨サイズ（アスペクト比） | 備考 |
|---|---|---|---|
| ヘッダーロゴ | サイトのヘッダー部分 | 横1600px × 高さ360px以内（自由） | SWELL公式サイトでは1600px × 360px。実際の高さはカスタマイザーの設定に合わせて決まる。 |
| サイトアイコン | ブラウザのタブやブックマークバー | 512px × 512px（1:1） | Google推奨 (*1) |
| トップページのヒーローセクション | トップページ上部のメインビジュアル | 1600px × 900px（16:9） | SWELL推奨 (*2)、汎用的なモニターサイズ |
| アイキャッチ画像 | 記事一覧や記事ページ、SNSシェア時 | 1200px × 630px（1.91:1） | SWELL推奨 (*2)、OGPサイズ基準 |
| No Image画像 | アイキャッチ未設定時に表示 | 1200px × 630px（1.91:1） | アイキャッチと同一にするため |
| OGP画像 | SNSシェア時に表示される画像 | 1200px × 630px（1.91:1） | Google推奨 (*1)。OGP画像とは、SNSなどで記事をシェアした際に表示される画像のことで、記事の内容を視覚的に伝える役割があります。 |
各画像の詳細と設定方法
1. ヘッダーロゴ
名称: ヘッダーロゴ
表示箇所: サイトのヘッダー部分（左上または中央上部）
推奨サイズ: 横1600px × 高さ360px以内（自由）
設定方法:
- WordPress管理画面 → 「外観」→「カスタマイズ」→「サイト基本情報」。
- 「ロゴ画像」をアップロードします。
備考: SWELL公式サイトでは1600px × 360pxが使用例として挙げられています。ただし、実際の高さはカスタマイザーで設定されるヘッダーのレイアウトや余白に応じて調整されます。
2. サイトアイコン
名称: サイトアイコン
表示箇所: ブラウザのタブ、ブックマークバー、スマートフォンのホーム画面
推奨サイズ: 512px × 512px（1:1）
設定方法:
- WordPress管理画面 → 「外観」→「カスタマイズ」→「サイト基本情報」。
- 「サイトアイコン」をアップロードします。
備考: Google推奨サイズであり、正方形にすることでさまざまなデバイスに適切に表示されます。(*1)
3. トップページのヒーローセクション
名称: ヒーローセクション画像
表示箇所: トップページ上部のメインビジュアルエリア
推奨サイズ: 1600px × 900px（16:9）
設定方法:
- WordPress管理画面 → 「外観」→「カスタマイズ」→「ヘッダー設定」。
- 「メインビジュアル画像」をアップロードします。
- アップロード後、PC用とSP用で高さを調整できます。
PC用・SP用の高さ設定
- PC用高さ（vw）:
- PC画面幅の割合（viewport width）で高さを指定。
- 推奨値: 50vw〜60vw。
- SP用高さ（vh）:
- スマホ画面の高さ（viewport height）で指定。
- 推奨値: 50vh〜70vh。
単位の説明
- vw（viewport width）: 画面の横幅全体を100vwとした場合の割合。例: 50vwは画面幅の50%。
- vh（viewport height）: 画面の縦幅全体を100vhとした場合の割合。例: 50vhは画面高さの50%。
ポイント
- PC用とSP用で個別に調整可能なので、デバイスごとに最適な表示が可能。
- 必要に応じてプレビューを確認しながら微調整を行ってください。
備考: 推奨サイズはSWELL公式サイトを参考にしたもので、PC用・SP用に最適化された表示が可能です。(*2)
4. アイキャッチ画像
名称: アイキャッチ画像
表示箇所: 記事一覧、記事ページ、SNSシェア時
推奨サイズ: 1200px × 630px（1.91:1）
設定方法:
- 記事作成画面で「アイキャッチ画像を設定」をクリック。
- 画像をアップロードまたは選択します。
備考: SWELLテーマ推奨のサイズであり、SNSシェア時にOGP画像としても最適です。アスペクト比1.91:1は、FacebookやTwitterカードでの表示に最適化されています。(*2)
5. No Image画像
名称: No Image画像
表示箇所: アイキャッチ画像が未設定の記事や、エラー時の代替画像
推奨サイズ: 1200px × 630px（1.91:1）
設定方法:
- WordPress管理画面 → 「外観」→「カスタマイズ」→「全体設定」。
- 「No Image画像」をアップロードします。
備考: アイキャッチ画像と同じサイズに統一することで、デザインの一貫性を保ちます。(*2)
6. OGP画像
名称: OGP画像
表示箇所: SNSで記事がシェアされた際のプレビュー画像
推奨サイズ: 1200px × 630px（1.91:1）
設定方法:
- SEOプラグイン（SEO SIMPLE PACKなど）をインストール。
- 各記事のOGP画像設定欄に画像をアップロードします。
備考: Googleが推奨するサイズ (*1) で、SNSプラットフォーム（Facebook、Twitter）での最適表示を実現します。OGP画像は、SNS上で記事をシェアした際に表示され、記事内容を視覚的に伝える重要な役割を持ちます。
コメント