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

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

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

この記事を書いた人

ヘボ

ブログの神様になる男

• 2018年8月からWebデザイナー
• 2018年12月からブロガー
• もはや数えきれないサイトをWeb上に納品
• 最高33万PV・累計690万PV超え／１サイト
• 企業のサイト設計やコンサルもやってます

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

本記事の信頼性

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

そこで、記事の前半で「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】

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

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

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

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」です。

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

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

上記を守れば、メインビジュアルのスマホサイズもとくに気しなくて大丈夫ですよ。

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

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

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

とはいえサイトが重くなるので、普通に「画像」がオススメ。

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

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

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

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

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

関連記事SWELLのトップページをおしゃれに！カスタマイズのやり方大全

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

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

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

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

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

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

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

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

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

画像サイズ（高さ）

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

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

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

サイズは次のとおり。

フルワイド画像

コンテンツヘッダー画像

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

これも「最低1200px」あれば充分。高さは自動でトリミングされます。

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

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

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

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

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

から「タイトル背景用デフォルト画像」にアップロードしてください。

【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の「メディアとテキスト」の画像サイズは？

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

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

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

ヘボ

ここまで読んでくれたあなたへ

最後に、大切なお知らせです。

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

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

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

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

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

画像編

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

合わせて読みたい

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

SWELLを導入したい方へ

「コーポレートサイト」にも「ブログサイト」にもオススメの万能テーマが『SWELL』です。

＼使いやすさなら／

SWELLをみてみる

評判・レビューをみる

国内人気No.1