- SWELLで使用するおすすめ画像サイズが知りたい
- アスペクト比や「WebP」（ウェッピー）について知りたい
- 画像サイズやファイルサイズの変換方法が知りたい
この記事ではWordPressテーマ「SWELL（スウェル）」で設定する画像サイズをまとめて紹介します。
画像といってもアイキャッチやヘッダーロゴなど、設置個所によっておすすめ画像サイズが異なります。
SEO対策においても画像サイズやファイルサイズを意識することは超重要。この記事を読むと最適な画像サイズやSWELLでの設定方法が分かりますので最後までチェックしてみてください。
【SWELL】用途別おすすめ画像サイズまとめ
SWELLで設定可能な画像は以下の通りです。
- メインビジュアル
- サイトアイコン（ファビコン）
- アイキャッチ（サムネイル）
- NO IMAGE
- ヘッダーロゴ
- コンテンツヘッダー
- プロフィール
- プロフィール背景
- OGP
まず最初にSWELLで設定可能な画像のおすすめサイズをまとめます。
| 画像 | サイズ | アスペクト比 |
|---|---|---|
| メインビジュアル（PC) | 1280px × 720px | 16：9 |
| メインビジュアル（スマホ) | 393px × 852px | 9：19.5 |
| サイトアイコン（ファビコン） | 512px × 512px | 1：1 |
| アイキャッチ（サムネイル） | 1200px × 630px | 1.91：1 |
| NO IMAGE | 1200px × 630px | 1.91：1 |
| ヘッダーロゴ | 520px × 117px | 40：9 |
| コンテンツヘッダー | 1200px × 160px | 15：2 |
| プロフィール | 512px × 512px | 1：1 |
| プロフィール背景 | 300px × 160px | 15：8 |
| OGP | 1200px × 630px | 1.91：1 |
各画像サイズのおすすめが分かったところで、画像の基礎知識となるアスペクト比や画像ファイル形式について解説します。
アスペクト比とは画像サイズを表す縦横比率。
アスペクト比というのは画像の縦横比率のことで、16：9など「横：縦」の比率で記載されます。テレビはアスペクト比16：9（ワイド）が一般的で、大きさが変わってもアスペクト比は変わりません。
サイト運営ではサイトを訪れるユーザーの使用デバイスや各種SNSでのおすすめ画像サイズを考慮して画像を作成することが重要になります。
SWELLでも画像の表示設定はアスペクト比を用いて設定します。
アスペクト比の変換には【Canva】（キャンバ）がおすすめ
特定のアスペクト比の画像を作成したり、既存の画像のアスペクト比を変更するには画像編集ツールである「Canva」（キャンバ）がおすすめです。
無料版でもアスペクト比の変更は十分対応可能です。
利用者も多くWeb上にノウハウが多いので利用をおすすめします。
画像ファイル形式はSEOにも最適な「WebP」（ウェッピー）がおすすめ
画像を作成する上で、画像サイズの他に重要な情報として画像ファイル形式を意識する必要があります。大容量の画像はサイトへの負荷が大きく、ページ読み込みに時間がかかりユーザーが離脱する原因となります。
「WebP」（ウェッピー）とは2010年にGoogleによって開発された画像ファイル形式です。
- 高い圧縮効率で画質の劣化が少ない
- 背景の透過処理をサポートしている
- アニメーションの表示が可能
大きな特徴として、JPEGやPNGよりもファイルサイズを小さくしながら、高い画質を保つことができる点です。
「WebP」（ウェッピー）のメリット、デメリット
| メリット | デメリット |
|---|---|
| ページの読み込み速度の向上する SEOに好影響 | 非対応のブラウザの存在 画像を変換する手間 |
デメリットとして古いバージョンのブラウザでは表示できない点が挙げられますが、2024年時点で、「Microsoft Edge」「Google Chrome」「Firefox」「Safari」「Opera」など主要ブラウザは対応しています。
以下のサイトより最新の情報を確認できます。
https://caniuse.com/?search=WebP
「SEO評価の向上が見込める」「ページ遷移の向上」などデメリットよりもメリットの恩恵が大きいためWebPを選択しない手はないでしょう。
無料で使える！WebPへのおすすめオンラインツール３選
WebPへの変換は無料で使えるオンラインツールの使用をおすすめします。今回、実際に私が使用しているオンラインツールを用途別に３つ紹介します。
「サルワカ道具箱」一括でWebPへの変換におすすめ！
１つ目は多くのサイトで紹介されているサルワカさんが作成されたツールです。利用制限もなく、一括で「JPEG」「PNG」「GIF」をWebPへ変換可能です。
ただし、画質や圧縮率など個別の設定はできません。
「TinyPNG」圧縮に加え、ファイル変換も１度に可能！（無料プランの場合制限あり）
２つ目に紹介するのは、パンダのキャラクターがトレードマークの「TinyPNG」です。
「JPEG」「PNG」に加え、WebPも圧縮可能。また、圧縮と画像ファイル形式の変換を１度に実施することが可能です。
ただし無料アカウントでは１度に圧縮できるファイル数（上限20ファイル）と、ファイル形式を変換できるファイル数（上限3ファイル）に制限があります。
また、画質や圧縮率など個別の設定はできません。
「Squoosh」画質や圧縮率の指定など高機能な画像変換ツール！（一括でのファイル変換不可）
最後に紹介するSquoosh（スクワッシュ）はGoogleが提供するオンラインツールです。
「サルワカ道具箱」「Tiny PNG」と異なり、一括でのファイル操作は行えませんが、画質の選択や圧縮率の指定が可能です。
用途に合わせ、効率良く作業が行えるツールを都度使い分けています。
【SWELL】メインビジュアル（PC）のおすすめ画像サイズ「1280px × 720px」
SWLLの公式サイトでは、メインビジュアル（PC）のおすすめサイズは「1600px × 900px」（16：9）が使用されております。
しかし、テーマカスタマイザー（外観 > カスタマイズ）から確認できる「サイト幅」はデフォルトでは1200pxが設定されています。余白を考慮しても、画像サイズは「1280px × 720px」（16：9）あれば十分綺麗に表示可能です。
外観 > カスタマイズ > サイト全体設定 > 基本デザイン > コンテンツ幅の設定
メインビジュアル（PC）の設定方法
メインビジュアルはテーマカスタマイザー（外観 > カスタマイズ）から設定できます。
トップページ > メインビジュアルの「メインビジュアルの表示内容」 より、「表示しない」から「画像」または「動画」を選択します。
「メインビジュアルの表示内容」で「画像」または「動画」を選択すると、「表示設定」の項目が表示されます。
「メインビジュアルの高さ設定」から画像の表示方法を選択できます。
「数値で指定する」を選択した場合、「メインビジュアルの高さ（PC）」より画像表示高さを設定できます。
【SWELL】メインビジュアル（スマホ）のおすすめ画像サイズ「393px × 852px」
SWELLではスマホ、タブレットでの表示設定が同じ項目となっています。
総務省が発行している令和5年版情報通信白書によると、スマホの保有率は90.1%でタブレットの40％を大きく上回ります。
引用元：総務省｜令和5年版 情報通信白書｜情報通信機器・端末 (soumu.go.jp)
普及率からもサイトが閲覧される機会もスマホが多いと考えられます。主流となるiPhone15Proでの画面サイズ「393px × 852px」（9：19.5）で画像を作成することをおすすめします。
メインビジュアル（スマホ）の設定方法
メインビジュアルはテーマカスタマイザー（外観 > カスタマイズ）から設定できます。
トップページ > メインビジュアルの「メインビジュアルの表示内容」 より、「表示しない」から「画像」または「動画」を選択します。
「メインビジュアルの表示内容」で「画像」または「動画」を選択すると、「表示設定」の項目が表示されます。
「メインビジュアルの高さ設定」から画像の表示方法を選択できます。
「数値で指定する」を選択した場合、「メインビジュアルの高さ（SP）」より画像表示高さを設定できます。
【SWELL】サイトアイコン（ファビコン）のおすすめ画像サイズ「512px × 512px」
サイトアイコンはブックマークやブラウザでサイト名の横に表示される画像のことを言います。アスペクト比1：1の正方形で作成することが基本となります。
SWELLではサイトアイコンに設定できる最小画像サイズが「512px × 512px」となるため、こちらのサイズをおすすめしています。
サイトアイコン（ファビコン）の設定方法
サイトアイコン（ファビコン）はテーマカスタマイザー（外観 > カスタマイズ）から設定できます。
WordPress設定 > サイト基本情報の「サイトアイコン」より、サイトアイコンとなる画像を選択します。
【SWELL】アイキャッチ（サムネイル含む）のおすすめ画像サイズ「1200px × 630px」
SWELLではアイキャッチ画像は記事一覧や記事スライダーなどの「サムネイル画像」、SNSでシェアされた際の「OGP画像」として利用されます。
FacebookやX（旧Twitter）ではOGP画像の推奨サイズを「1200px × 630px」（1.91：1）としていることからも、アイキャッチは「1200px × 630px」（1.91：1）で作成することをおすすめします。
アイキャッチの設定方法
SWELLでは投稿・固定ページの「設定」にある「アイキャッチ画像」から設定することができます。
【SWELL】NO IMAGEのおすすめ画像サイズ「1200px × 630px」
SWELLではアイキャッチ画像を設定していない場合に表示させる「NO IMAGE画像」を設定可能です。
アイキャッチ画像同様、記事一覧や記事スライダーなどの「サムネイル画像」、SNSでシェアされた際の画像「OGP画像」として利用されます。
FacebookやX（旧Twitter）ではOGP画像の推奨サイズを「1200px × 630px」（1.91：1）としているため、このサイズで作成することをおすすめします。
NO IMAGEの設定方法
NO IMAGEはテーマカスタマイザー（外観 > カスタマイズ）から設定できます。
サイト全体設定 > NO IMAGE画像の「NO IMAGE画像」より、NO IMAGEとなる画像を選択します。
【SWELL】ヘッダーロゴのおすすめ画像サイズ「520px × 117px」
SWLLの公式サイトでは、ヘッダーロゴは「1600px × 360px」（40：9）で作成されています。ヘッダーロゴの表示高さはデフォルトでは40pxで設定されています。その場合公式サイトで使用されている画像サイズよりも小さいサイズでも綺麗に表示可能です。
アスペクト比40：9としたうえで、画像サイズ「520px × 117px」で綺麗に表示可能なのでおすすめします。
画像の上下をできるだけ排除して画像を作成することで綺麗に設置が可能です。
ヘッダーロゴの設定方法
ヘッダーロゴはテーマカスタマイザー（外観 > カスタマイズ）から設定できます。
ヘッダー > ヘッダーロゴの設定の「ロゴ画像の設定」より、ヘッダーロゴとなる画像を選択します。
【SWELL】コンテンツヘッダーのおすすめ画像サイズ「1200px × 160px」
SWLLの公式サイトでは、コンテンツヘッダーの横幅は1600pxが使用されております。
しかしメインビジュアル同様、テーマカスタマイザー（外観 > カスタマイズ）から確認できる「サイト幅」はデフォルトでは1200pxが設定が設定されているため横幅は1200pxで十分要件を満たします。
コンテンツヘッダーに文字を使用する場合、調整は必要ですがそれ以外の場合は「1200px × 160px」（15：2）で綺麗に表示可能なためおすすめします。
コンテンツヘッダーの設定方法
コンテンツヘッダーはテーマカスタマイザー（外観 > カスタマイズ）から設定できます。
サイト全体設定 > コンテンツヘッダーの「タイトル背景用デフォルト画像」より、コンテンツヘッダーとなる画像を選択します。
【SWELL】プロフィールのおすすめ画像サイズ「512px × 512px」
SWELLではサイドバーや記事の文末（著者情報エリア）にプロフィールを表示できます。プロフィール画像は正円で切り取られるため、アスペクト比1：1の正方形で作成します。
最小画像サイズの設定はありませんが、サイトアイコン（ファビコン）同様、「512px × 512px」で作成することをおすすめします。
プロフィールの設定方法
プロフィールはウィジェット（外観 > ウィジェット）から設定できます。
今回の例では、「共通サイドバー」へプロフィールを設定する方法を解説します。
「利用できるウィジェット」から「[SWELL]プロフィール」をドラッグし、「共通サイドバー」にドロップします。
「共通サイドバー」にドロップすると、「[SWELL]プロフィール」が追加されます。
「共通サイドバー」に設置された「[SWELL]プロフィール」の「▼」をクリックすると設定項目が表示されます。
「アイコン画像」よりプロフィール画像を設定します。
【SWELL】プロフィール背景のおすすめ画像サイズ「300px × 160px」
SWLLの公式サイトでは、「300px × 160px」（15：8）で作成されています。
アスペクト比15：8でこれより大きいサイズで作成すれば綺麗に表示されます。プロフィール背景画像は「300px × 160px」（15：8）をおすすめします。
プロフィール背景の設定方法
プロフィールはウィジェット（外観 > ウィジェット）から設定できます。
今回の例では、「共通サイドバー」へプロフィールを設定する方法を解説します。
「利用できるウィジェット」から「[SWELL]プロフィール」をドラッグし、「共通サイドバー」にドロップします。
「共通サイドバー」にドロップすると、「[SWELL]プロフィール」が追加されます。
「共通サイドバー」に設置された「[SWELL]プロフィール」の「▼」をクリックすると設定項目が表示されます。
「プロフィール背景画像」よりプロフィール背景画像を設定します。
【SWELL】OGPのおすすめ画像サイズ「1200px × 630px」
OGPとは「Open Graph Protcol」の略で、FacebookやX（旧Twitter）といったSNSでシェアされた際に表示されるプレビュー情報を設定するためのメタデータ（データの属性）のことです。
OGPに適切な画像を設定することでSNSで意図した画像を表示することが可能となります。
アイキャッチのところでも説明した通り、FacebookやX（旧Twitter）ではOGP画像の推奨サイズを「1200px × 630px」（1.91：1）としていることからも、OGPは「1200px × 630px」（1.91：1）で作成することをおすすめします。
OGPの設定方法
SWELLではOGPタグなどのMETAタグを生成・出力機能がありません。
ですので、OGPを設定するにはSWELL公式でも推奨プラグインとして紹介されているSEOプラグイン「SEO SIMPLE PACK」を使用します。
インストールを前提に解説しますので、まだの方は以下よりインストールしてください。
WordPressの、SEO PACK > OGP設定を開きます。
「OGPタグの基本設定」より、OGP画像を設定します。
まとめ
SWELLで設定できる画像のおすすめサイズと設定方法を紹介しました。
| 画像 | サイズ | アスペクト比 |
|---|---|---|
| メインビジュアル（PC) | 1280px × 720px | 16：9 |
| メインビジュアル（スマホ) | 393px × 852px | 9：19.5 |
| サイトアイコン（ファビコン） | 512px × 512px | 1：1 |
| アイキャッチ（サムネイル） | 1200px × 630px | 1.91：1 |
| NO IMAGE | 1200px × 630px | 1.91：1 |
| ヘッダーロゴ | 520px × 117px | 40：9 |
| コンテンツヘッダー | 1200px × 160px | 15：2 |
| プロフィール | 512px × 512px | 1：1 |
| プロフィール背景 | 300px × 160px | 15：8 |
| OGP | 1200px × 630px | 1.91：1 |
画像サイズ、容量はSEOにも影響するため適切なものを設定することが重要です。
ぜひサイト運営に活かしてください。
コメント