SWELLの画像サイズまとめ｜アイキャッチ・メインビジュアルなど

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

『 SWELL 』の画像サイズってほとんど「推奨サイズ」が決まってないんですよね。

そこで、記事の前半で「SWELLの全画像のおすすめサイズ一覧」を。

後半では「各画像（アイキャッチやメインビジュアルなど）の設定方法や作り方」について解説します。

本記事を最後まで読むことで、SWELLの全画像の「おすすめサイズ・設定方法・コツ」までわかりますよ！

＼使いやすさなら／

国内人気No.1

SWELLでおすすめの画像サイズ一覧【早見表あり】

SWELLで使う全画像のおすすめサイズを「表」にまとめました👇️

表は横にスクロールできます

では、順番に「おすすめサイズと設定方法」を解説していきます！

「デモサイト」を別タブで開きながら、どうぞ👇️

【SWELL】アイキャッチ画像（NO IMAGE・OGP・記事内）のサイズ【1200px × 630px】

『 SWELL 』の公式サイトでは「768px × 432px」のアイキャッチ画像が使われています。

つまり、アスペクト比「16:9」ですね。

とはいえ、Googleは「横幅1200px以上」を推奨しています。

魅力的な高画質の画像、特にDiscoverからのアクセスが発生する可能性の高いサイズの大きな画像をコンテンツに含める。

サイズの大きな画像は、幅を1,200ピクセル以上とし、max-image-preview:largeの設定またはAMPを使用して有効にする必要があります。
Google検索セントラル

いわゆる「Google砲」で大きなアクセスを得るには、1200px以上の高画質な画像を使う必要があるんです。

あなた次第

Google砲を狙うか、なるべく小さくして高速化するか。

これはあなた次第ですね。

表は横にスクロールできます

それぞれ「アイキャッチ画像の設定方法」のあとに解説しますね👇️

アイキャッチ画像の設定方法

アイキャッチ画像は、メニューバー右の「アイキャッチ画像を設定」からアップロードできます。

から「本文の始めにアイキャッチ画像を表示」に✅️を入れると・・・

記事一覧だけでなく、記事内にもアイキャッチ画像が表示されますよ。

関連記事【Canvaで５分】ブログ用アイキャッチ画像の作り方と最適サイズ

NO IMAGE画像の設定方法【1200px × 630px】

NO IMAGE画像とは、アイキャッチ画像を設定していない時に表示される画像のこと。

ボクはこんな画像を用意しています。

「推奨：横幅1600px以上」とありますが、アイキャッチ画像の代わりですからね。

アイキャッチ画像と同じサイズでOK！

OGP画像の設定方法【1200px × 630px】

OGP画像とは、SNSにトップページをシェアしたときに表示される画像のこと。

トップページ用のアイキャッチ画像ですね。

OGP画像はプラグイン『SEO SIMPLE PACK』で設定します。

推奨サイズはSNSによってさまざまなので、アイキャッチ画像やFacebookと同じ「1200px × 630px」でOK。

関連記事SWELL初心者におすすめのプラグイン10選＋代替案９選

関連記事SWELLはSEOに弱い？５つの優位性と２つの設定方法

記事内画像の設定方法【横幅900px】

記事内には「画像ブロック」で設定します。

１カラム（サイドバーなし）にしたときの記事の幅が「900px」。

なので、記事幅いっぱいに画像を広げたいなら「最低900px」で作るのがオススメ！

【SWELL】メインビジュアル画像・動画のサイズ【1600px × 900px】

『 SWELL 』の公式サイトでは「1600px × 900px」のメインビジュアル動画が使われています。

とはいえ、とくに動画は無料サイトからダウンロードしたものを、そのまま使いますよね？

たとえば、『 動画AC 』ならHDで「1280px × 720px」です。

動画であれ画像であれ、上記のサイズで作るのがオススメです。

メインビジュアルのスマホサイズ【960px × 813px】

SWELLは「959px」で〝パソコン → タブレット・スマホ仕様〟に変わります。

ちなみに、横幅を「960px」にしたときの高さは「813px」でした。

SWELLのメインビジュアルは、動画も画像も「スマホ（SP）用」を選べますからね。

メインビジュアルの高さ設定

高さの数値を指定したい場合は、「数値で指定する」を選んでくださいね。

半角・単位付きで指定する

とはいえ、公式サイトやデモサイトのようなイメージ・背景画像なら・・・

PCと同じ動画・画像を「ウィンドウサイズにフィットさせる」のままでOK。

メインビジュアル画像・動画の設定方法

メインビジュアルはデフォルトでは「表示しない」になっています。

まずは「画像 or 動画」を選んで、アップロードしてください。

とはいえサイトが重くなるので、普通に「画像」がおすすめ。

※デモサイトだから使ってるだけです。

表は横にスクロールできます

これでメインビジュアルが「画面いっぱい」に広がりますよ。

あとは「デフォルトのまま」でOK！

くわしくは別記事でまるっと解説しています👇️

関連記事SWELLのカスタマイズのやり方｜おしゃれなトップページの作り方

関連記事SWELLのブログパーツの作り方３ステップと６つの使い方

【SWELL】ヘッダーロゴ画像のサイズ【1600px × 360px】

『 SWELL 』の公式サイトでは「1600px × 360px」のヘッダーロゴ画像が使われています。

さっそくですが、これが結論です。

横幅を「最低1200px」で作って、高さはそれに合わせれば何でもOK！

なぜなら、高さは変更できるから👇️

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

「ヘッダーロゴの設定」からアップロードしてください。

ここで画像サイズも変更できます。

画像サイズ（高さ）

また、ヘッダーを透過したときの「ロゴ画像」もここで設定できますよ。

【SWELL】フルワイド・コンテンツヘッダー画像のサイズ【1200〜2560px】

※グレーの部分が「本来の記事幅」です。

フルワイドとは、コンテンツを画面いっぱいに広げるブロックのこと。

背景色はもちろん、「画像」を設定することもできます。

コンテンツヘッダーとは、記事の上部に設定できる画像のこと。

『 SWELL 』の公式サイトでは一部、フルワイド画像とコンテンツヘッダー画像が併用されています。

サイズは次のとおり。

フルワイド画像

コンテンツヘッダー画像

どちらも「横幅いっぱいに広がる画像」なので、大きいですよね。

とはいえ、「1200px〜2560px」あれば充分。高さは自動でトリミングされます。

とはいえ、人間の目ではわからないので、サイトの高速化を優先させましょう。

フルワイド画像の設定方法

投稿エディタで「フルワイドブロック」を選び、メニューバー右の「メディアから選択」にアップロードしてください。

コンテンツサイズ

「フルワイド」を選びましょう。

上下のPADDING量

大きい数字を選ぶと、「PADDING（内側の余白）」が広がりますよ。

カラー設定

画像上のフィルターはもちろん、テキストカラーもここで変えられます。

背景効果

パララックスとは「視差効果」のこと。

スクロールすると、背景画像が動いて見えますよ。

関連記事【初心者必見】SWELLの使い方｜ブロックエディタを完全マスター

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

コンテンツヘッダー画像は、タイトルの表示位置が「コンテンツ内」になっていると表示されません。

から「投稿ページ or 固定ページ」の「タイトルの表示設定」を「コンテンツ上」に変更してください。

から「タイトル背景用デフォルト画像」にアップロードします。

画像フィルター

あとは、画像の上にフィルターをかけるだけ。

カラーオーバーレイの設定

デフォルト値は上記のとおりです。

画像に合わせて設定してみてくださいね。

【SWELL】プロフィール画像のサイズ【240px × 240px】

プロフィール画像に推奨サイズはありませんが、公式サイトでは「240pxの正方形」画像が使われています。

SWELL開発者「了さんの画像」ですね。

とはいえ、240pxだと一般的には小さいかも。

「240px〜512px」の〝８で割り切れるサイズ〟がおすすめです。

プロフィール画像の設定方法

サイドバーに「プロフィール」を表示するなら、「アイコン画像」から設定してください。

ちなみに、「プロフィール背景画像」のサイズは「768px × 285px」を使ってますね。

この記事を書いた人

「この記事を書いた人」に表示される「プロフィール画像」は上記から設定できますよ。

同じ画像を設定しましょう。

関連記事【SWELL】この記事を書いた人の編集方法｜非表示にする方法も

【SWELL】サイトアイコン（ファビコン）画像のサイズ【512px × 512px】

サイトアイコンとは、「ブラウザのタブ」や「スマホのショートカットアイコン」に表示される画像のこと。

「ファビコン」とも呼ばれます。

推奨サイズは「512pxの正方形」になります。

これはSWELLというか「WordPress」の推奨サイズですね。

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

「画像を選択」をクリック。

サイトアイコンをアップロードしてください。

【SWELL】アイキャッチ画像やメインビジュアルを作る６つのコツ

SWELLのアイキャッチ画像やメインビジュアルを「作るコツ」は、次のとおり。

この章のもくじ

画像が何であれ、この鉄則は守ってください👇️

画像の鉄則

わざわざ小さく作るメリットはないですからね。

ボクはプラグインではなく、Googleが開発した『Squoosh』で一枚ずつ圧縮しています。

サイズを変えないにしても、軽量化はしましょうね。

その①アイキャッチ画像編

「フリー素材」をそのままアイキャッチ画像にするより、上から文字を入れて「オリジナル画像」にしましょう。

ロゴ画像やブログ名を入れるのもいいですね。

文字やロゴは「正方形」内に収めるのがオススメ！

なぜなら、SNSによっては「正方形」にトリミングされるから。

とはいえ、ブログを書くだけで精一杯なら「ただのフリー素材」でもいいですよ。

関連記事【Canvaで５分】ブログ用アイキャッチ画像の作り方と最適サイズ

その②メインビジュアル編

メインビジュアルでは、ブログの「コンセプト」や「ミッション」を伝えましょう。

そのためのメインビジュアルなので、画像はただの背景イメージにして「テキスト」で入れてもOK。

ただの背景画像なら、変更もカンタンだし、スマホでもそのまま使えるので便利ですよ。

関連記事SWELLのカスタマイズのやり方｜おしゃれなトップページの作り方

その③ヘッダーロゴ画像編

ロゴ画像はあらゆる場所で使うので、背景を透過した「PNG形式」で作りましょう。

ロゴ画像を使う場所

デモサイトの「ヘッダーロゴ画像」はこんな感じ👇️

デモサイトの場合

白と黒「２色」のロゴ画像を用意しています。

また、ほとんどの場合「ブログ名をそのまま画像」にしますよね？

フォントは視認性の高い「ゴシック体」を使うのがベスト！

関連記事【無料】ブログのロゴ作成術｜Webデザイナーが初心者に力説！

その④フルワイド・コンテンツヘッダー画像編

フルワイド画像と、コンテンツヘッダー画像は「横幅いっぱい」に広がります。

たとえば、読者のデバイスが「4K」なら「2560px」になるわけです。

横幅に応じて「高さ」も変わるので、どこがトリミングされてもいい「イメージ画像」を選びましょう。

その⑤プロフィール画像編

プロフィール画像は、サイトアイコンと併用できるように「512px以上の正方形」で作りましょう。

こんな「プロフィール画像」を設定してるブログが多いですよね👇️

プロフィール画像の例

ブログジャンルだと「自分のイラスト」や「ネコやヒトデのイラスト」が多いので・・・

ボクはいちばん胡散臭い「神様」にしています。笑

とはいえ、キモい「自撮り」よりはマシでしょう。

関連記事【実例あり】ブログのプロフィール画像・アイコンの作り方９選

その⑥サイトアイコン（ファビコン）編

設定しないと「WordPressのロゴ」が表示されます。

ブログジャンルだと、プロフィール画像と併用してるサイトが多いですね。

とはいえ、いちばん意味ない画像なので、記事を書く気になれない日にでも作ればOK◎

【Q&A】SWELLの画像サイズに関するよくある質問

SWELLの画像サイズに関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

順番に見ていきましょう！

Q1：SWELLの画面サイズは？

ASWELLの画面サイズは「959px」で〝２ → １カラム（列）〟に変わります。

SWELLのブレークポイント

たとえば、記事内に画像を設置した場合、１カラム（列）では「最大882px」で表示されますよ。

Q2：SWELLのアイキャッチ画像が切れる原因は？

A記事一覧でアイキャッチ画像の左右が切れてしまうケースですね。

アイキャッチ画像を「1200px × 630px」で作ったのに、切れてしまうなら・・・

から「カード型リストでの画像比率」を「ワイド → OGP」に変更すると解決しますよ。

Q3：Swellのメインビジュアルを画面いっぱいにするには？

Aメインビジュアルに「動画 or 画像」を設定したら・・・

から「メインビジュアルの高さ設定」で「ウィンドウサイズにフィットさせる」を選ぶだけ。

これでSWELLのメインビジュアルが画面いっぱいになりますよ。

Q4：SWELLの「メディアとテキスト」の画像サイズは？

A横幅「900〜1200px」です。

つまり、記事内の画像と同じですね。

スマホでは「縦並び」になるので、普通の画像と変わらないですからね。

Q5：SWELLの画像圧縮におすすめのツールは？

Aおすすめの画像圧縮ツールは次の２つ。

無料ツール２選

個人ブロガーなら、Google開発の無料ツール『Squoosh』に１枚ずつ画像を放り込んで圧縮しましょう。

とはいえ、プラグインで設定すれば「自動」で画像サイズを縮小・軽量化してくれますよ。

関連記事SWELL初心者におすすめのプラグイン10選＋代替案９選

【まとめ】SWELLの画像サイズはこれで決まり！

「SWELLの画像サイズ」について解説しました。

表は横にスクロールできます

適正サイズがわかったら、サイズもデザインも固定化して時短を心がけましょう。

ブログに画像は必要ですが、こだわりすぎると無限に時間が溶けますからね。

画像編

さいごに「ブログと画像」にまつわる記事を置いておきます。

合わせて読みたい

「画像サイズ」以外も解説しています。ブックマーク推奨です🙌

SWELLを導入したい方へ