SWELLの画像サイズまとめ【アイキャッチ、ファビコン、ロゴ、メインビジュアル画像・動画】

この記事では、WordPressテーマ「SWELL」の画像サイズと設定方法を、わかりやすく一覧にまとめてご紹介します。

アイキャッチ画像、サイトアイコン（ファビコン）、NO IMAGE、OGP、記事内画像、ヘッダーロゴ、コンテンツヘッダー、メインビジュアル（トップ画像・動画）などについてです。

WordPressやSWELLの推奨サイズ、SWELL公式サイトの使用サイズ、そのほかの知見からまとめています。

この記事を最後まで読めば、「SWELL（スウェル）」の適切な画像サイズと設定方法がわかります。

ぜひ最後まで進めてみてください。

すでに途中まで進めている人は、目次から該当箇所に飛ぶこともできます。

＼ 導入するだけ簡単おしゃれ ／

SWELL評判・口コミのレビュー記事はこちら

SWELLの画像推奨サイズまとめ

最初にSWELLの画像サイズをまとめておきます。

黄色下線のサイズがおすすめです。

画像	サイズ	根拠
アイキャッチ	1200×630px（webp推奨）	OGP（SNS推奨）と同じ
サイトアイコン	512×512px（png推奨）	WordPress推奨
プロフィール	160×160px	ページ表示速度・SEO優先
NO IMAGE	1200×630px	OGP（SNS推奨）と同じ
	横幅1600px	SWELL推奨
OGP	1200×630px	SWELL推奨＆SNS推奨
記事内画像	1200×630px（webp推奨）	OGP（SNS推奨）と同じ
	横幅900px（webp推奨）	ページ表示速度・SEO優先
コンテンツヘッダー	横幅1600px	SWELL公式サイト
	横幅1280px	ページ表示速度・SEO優先
ヘッダーロゴ	1600×360px	SWELL公式サイト
	600×135px程度（png推奨）	ページ表示速度・SEO優先
メインビジュアル	1600×900px	SWELL公式サイト
	横幅1280px（PC）	ページ表示速度・SEO優先
	横幅600〜960px（SP）	ページ表示速度・SEO優先

詳しい説明や設定方法は、以下をご覧ください。

画像・動画の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

画像作成をプロに頼むなら、「ココナラ（coconala）が便利です。

＼ 無料登録 ／

画像だけでなくWebサイト・ブログのデザインをお願いしたい場合は、以下のボタンからSWELLカスタマイズを検索できます。

＼ SWELLをカスタマイズ ／

1) アイキャッチ画像（サムネイル画像含む）

アイキャッチ画像とは、各記事に設定する画像のことです。

• 記事内のトップ画像として表示することができます。
• 記事のサムネイル画像（記事一覧、記事スライダー、ピックアップバナーなど）として利用されます。
• 記事をSNSでシェアした際の画像として利用されます。（OGP画像未設定時）

投稿・固定ページの編集画面で、アイキャッチ画像を設定できます。

> 投稿・固定ページでのアイキャッチ画像の表示方法 | WordPressテーマ SWELL

アイキャッチ画像の推奨サイズ（アイキャッチサイズ）

SWELLのアイキャッチ画像の推奨サイズは「1200×630px（1.91:1）」です。

FacebookやTwitterなどのSNSにシェアされた際にきれいに表示されるサイズです。

SWELLユーザー向けに「SEO SIMPLE PACK」の初期設定と使い方をまとめました。

ほとんどデフォルト設定でいけますが、以下だけは変更しておきましょう。
①ディスクリプション
②OGP画像の設定
③プライバシーポリシー、サイトポリシーのnoindex設定https://t.co/Scr9b4uP9o#ブログ #Swell

— suya🔍WP-Search｜マニュオン (@suyasite) September 1, 2021

OGP画像は「1280×670px」も推奨されますが、Twitterシェア時に上下が少しカットされます。

• ページ表示速度を優先したい場合は、「横幅800px」などにしてください。
• ただし、SEO上は「横幅1200px以上」を推奨します。
• 画像を圧縮したり、「.webp」形式に変化したりすることで、ファイルを軽くすることができます。

2) サイトアイコン（ファビコン）

サイトアイコンとは、ブックマークやブラウザのタブに表示されるアイコン（ファビコン）のことです。

サイトアイコンの推奨サイズ（ファビコンサイズ）

SWELLのサイトアイコン（ファビコン）画像の推奨サイズは「512×512px」、推奨形式は「.png」です。

これは、WordPress（ワードプレス）本体の推奨サイズです。

• 自動的に各ブラウザ向けのリサイズ画像が作成されるため、1つの画像サイズをアップロードすれば大丈夫です。
• 画像形式は透明・透過などが設定できる「.png」を推奨します。

＼ SWELLをカスタマイズ ／

サイトアイコン（ファビコン）の設定方法

左メニューの[外観]→[カスタマイズ]をクリックして、「カスタマイザー」を開きます。

「カスタマイザー」が起動したら、左メニューで設定していきます。

[WordPress設定]→[サイト基本情報]を開き、サイトアイコンを変更します。

3) プロフィール画像（アバター）

プロフィール画像とは、プロフィール欄や著者欄（この記事を書いた人）、ふきだしなどに表示されるアイコン（アバター）のことです。

サイトアイコン（ファビコン）と同じ画像を用いることもあります。

プロフィール画像の推奨サイズ（アバターサイズ）

SWELLのプロフィール（アバター）画像の推奨サイズは「160×160px」程度です。

サイトアイコン（ファビコン）と違って、プロフィール画像（アバター）は自動的にリサイズ（縮小）されません。

そのため、「512x512px」だと「PageSpeed Insights」の「適切なサイズの画像（Properly size images）」に影響します。

プロフィール画像はSNS等でも使用するため、最初からココナラなどで依頼することをおすすめします。

＼ イラストレーターに外注 ／

プロフィール画像（アバター）の設定方法

プロフィール画像（アバター）は、外観カスタマイズではなく、ユーザー設定のプロフィール設定から変更します。

[ユーザー]→[プロフィール]に移動して、SWELL追加データの[カスタムアバター]を変更してください。

4) NO IMAGE画像（デフォルトのサムネイル画像）

「NO IMAGE画像」とは、アイキャッチ画像が設定されていない記事で表示されるデフォルトのサムネイル画像のことです。

サムネイル画像とは、以下のようなケースで利用されるものです。

NO IMAGE画像の推奨サイズ（NO IMAGEサイズ）

OGP画像の推奨サイズと同じ「1200×630px」を利用することをおすすめします。

• SWELL推奨サイズは「横幅1600px以上」ですが、サムネイル画像にそこまで解像度は不要です。
• ページ表示速度を測る「PageSpeed Insights」の「適切なサイズの画像（Properly size images）」に影響します。

NO IMAGE画像の設定方法

外観カスタマイズ（カスタマイザー）から[サイト全体設定]→[NO IMAGE画像]を開き、画像を変更します。

> NO IMAGE（ノーイメージ）画像の設定方法 | WordPressテーマ SWELL

5) OGP画像

「OGP画像」とは、アイキャッチ画像が設定されていない記事で表示されるデフォルトのSNSシェア画像のことです。

トップページをSNS（Twitter、Facebookなど）でシェアされた際にも表示されます。

トップページはアイキャッチ画像を設定できないため、OGP画像を設定する必要があります。

OGP画像は、アイキャッチを設定していない記事でも利用されます。https://t.co/cxju04XXnW

— suya🔍WP-Search｜マニュオン (@suyasite) September 4, 2021

OGP画像の推奨サイズ（OGPサイズ）

SWELLでは、FacebookやTwitterなどのSNS推奨サイズである「1200×630px」を推奨しています。

NO IMAGE画像と同じ画像を利用することをおすすめします。

OGP画像の設定方法

OGP画像を設定するには、SEOプラグイン「SEO SIMPLE PACK」を利用します。

[SEO PACK]→[OGP設定]を開き、画像を変更します。

6) 記事内画像

「記事内画像」とは、記事ごとに見出しの下などに自由に挿入する画像のことです。

図解などであれば、そのままSNSなどに投稿して使用することもあるでしょう。

記事内画像の推奨サイズ

SNSに投稿することもある記事内画像は、OGP画像の推奨サイズと同じ「1200×630px」を利用することをおすすめします。

• ページ表示速度を優先したい場合は、「横幅900px」などにしてください。
• ただし、SEO上は「横幅1200px以上」を推奨します。
• 画像を圧縮したり、「.webp」形式に変化したりすることで、ファイルを軽くすることができます。

SWELLのコンテンツ幅の設定方法

SWELLのコンテンツ幅は、外観カスタマイズで設定します。

外観カスタマイズ（カスタマイザー）から[サイト全体設定]→[基本デザイン]を開き、コンテンツ幅を変更します。

上記のデフォルト設定の場合を例にすると、

• 1カラム（サイドバーなし）の場合、コンテンツ幅は900px
• 2カラム（サイドバーあり）の場合、コンテンツ幅は844px（1200-356）

になります。（サイドバーのデフォルト幅は356px）

そのため、デフォルトでは「横幅900px」程度は最低必要になります。

コンテンツ幅を変更した場合を想定しても、「1200×630px」にしておけばほぼほぼ大丈夫です。

7) コンテンツヘッダー画像

コンテンツヘッダーとは、固定ページなどで利用される記事タイトルの背景画像です。

コンテンツヘッダー画像の推奨サイズ（コンテンツヘッダーサイズ）

画面いっぱい（フルワイド）で利用されるため、解像度が大きいほうがいいでしょう。

＼ 無料登録 ／

コンテンツヘッダー画像の設定方法

コンテンツヘッダーはデフォルトOFFなので、ONに変更した際に設定します。

外観カスタマイズ（カスタマイザー）から[サイト全体設定]→[コンテンツヘッダー]を開き、画像を変更します。

8) ヘッダーロゴ画像

ヘッダーロゴ画像とは、ヘッダーなどに表示されるサイトアイコンやサイト名（サイトタイトル）の画像のことです。

ヘッダーロゴ画像の推奨サイズ（ロゴサイズ）

ロゴ画像が大きく表示されることは少ないため、ページ表示速度を重視するならサイズを下げておきましょう。

• 画像形式は透明・透過などが設定できる「.png」を推奨します。（背景透過）
• 通常色とホワイト色の 2 種類を準備することをおすすめします。

＼ SWELLをカスタマイズ ／

ヘッダーロゴ画像の設定方法

外観カスタマイズ（カスタマイザー）から[ヘッダー]を開き、画像を変更します。

9) メインビジュアル（トップ画像・動画）

メインビジュアルとは、トップページ上部に表示される画像・動画（トップ画像・動画）のことです。

メインビジュアルの推奨サイズ（トップ画像・動画サイズ）

＼ 無料登録 ／

メインビジュアル（トップ画像・動画）の設定方法

外観カスタマイズ（カスタマイザー）から[トップページ]→[メインビジュアル]を開き、画像・動画を変更します。

参考）SWELL のサイト事例集

デザインの参考にするサイトを探したい場合は、「WP-Search」でSWELLを使ったサイト事例を探してみましょう。

気になるサイトのテーマやプラグインを調べることもできます。

カスタマイズの設定箇所がわからない場合は、以下のデモサイトも参考になります。

この記事のまとめ

デザインテーマ「SWELL」の各種画像サイズを見てきました。

画像を変更するだけでオリジナル性が出ますが、サイズが大きいとページ表示速度・SEOに影響するため注意しましょう。

デザインを人に頼みたいなら、「ココナラ（coconala） 」でプロにお任せしましょう。

SWELLカスタマイズを検索できます。

＼ SWELLをカスタマイズ ／

SWELLの外観カスタマイズ（カスタマイザー）のより詳細の使い方は、以下をご覧ください。