SWELLの背景画像サイズで迷わない！おすすめ設定と5つのルール

SWELLで背景画像を入れてみたものの、「なんか切れてる」「スマホで見るとイメージが違う」「そもそもサイズの決め方が分からない」と感じていませんか。

先に一言でまとめると、SWELLの背景画像サイズは「横幅はだいたい1600px前後を基準にして、高さを用途ごとに決める」と、かなり失敗しにくくなります。

ここから具体的なサイズと、設定のコツを順番に見ていきましょう。

SWELLの背景画像サイズで迷わないための全体像

SWELLで使う主な画像・背景の種類

SWELLでは、意外とたくさんの場所で背景画像や大きめの画像が使われます。代表的なものを一覧にすると、こんな感じです。

種類	用途・表示場所	背景画像との関係
ページ背景画像	サイト全体の背景色・背景模様	画面の一番奥で広がる背景
タイトル背景画像	固定ページや投稿のタイトル部分	ページごとに変えられる背景
コンテンツヘッダー画像	ページ上部の共通ヘッダー	サイト全体に共通のヘッダー背景
フルワイドブロック背景	トップやLPの横幅いっぱいのセクション	セクション単位で使う背景画像
メインビジュアル画像	トップの一番目立つヒーロー画像	多くの場合フルワイド＋テキストの組み合わせ
アイキャッチ画像	記事一覧やSNSシェア時のサムネイル	厳密には背景ではないがサイズ設計は重要

この中でも、特に背景画像サイズを意識しておきたいのは、ページ背景、タイトル背景、コンテンツヘッダー、フルワイドブロック、メインビジュアルの5つです。この記事では、この5か所を中心に話を進めていきます。

なぜ背景画像サイズが大事なのか（デザイン・読みやすさ・表示速度）

背景画像サイズが合っていないと、次のようなことが起こりやすくなります。

• PCではきれいなのに、スマホだと人物の顔やロゴが中途半端に切れてしまう
• タイトルや見出しの文字が背景に埋もれて、読みにくくなる
• 画像が大きすぎて、ページの表示がもっさり重く感じられる

SWELLはもともとデザインが整っているテーマなので、背景画像を盛りすぎると、かえって雑多な印象になってしまうこともあります。

「見た目」「読みやすさ」「表示速度」の3つをバランスよく成立させるためにも、背景画像サイズの考え方を最初に整えておくことが大切です。

SWELL 背景画像サイズを決める前に知っておきたい3つの前提

サイト幅と画像サイズの関係

背景画像サイズを決めるときは、まず「どれくらいの横幅でサイトを見られるか」をざっくりイメージしておくと便利です。

デバイス	横幅の目安（px）	背景画像で意識したいこと
PC	約1200〜1400	余裕を見て横1600px以上あると安心
タブレット	約800〜1000	PC用の画像を縮小して表示されることが多い
スマホ	約360〜430	画像の中央付近だけが強調されやすい

SWELLで背景画像を設定するときは、基本的にPC向けの画像をそのまま縮小して各デバイスに表示するイメージになります。そのため、横幅1600pxくらいを基準にしておくと、多くの環境で扱いやすくなります。

PCとスマホでの見え方の違い

同じ画像でも、PCとスマホでは見えている範囲がけっこう違います。

• PC：横長のまま、画像全体が見えやすい
• スマホ：縦長表示になるので、中央〜やや上あたりが強く見える

人物やロゴ入りの画像を背景にするときは、「中央付近だけ切り出されても成立するか」を意識してデザインしておくと安心です。

私も以前、背景の左端にロゴを小さく入れた画像を使ったことがあるのですが、スマホではきれいにロゴだけ消えてしまいました。それ以来、重要な要素は必ず中央寄りに置くようにしています。

背景画像サイズとトリミングの考え方

背景画像は、画面サイズに合わせて自動でトリミングされます。これはSWELLに限らず、一般的な仕様です。

• 縦長の画面では上下が少し切れる
• 横長の画面では左右が少し切れる

つまり、「どこかしらは多少切れるもの」と割り切っておいたほうが気が楽です。そのうえで、次のような意識を持っておくと失敗しづらくなります。

• 画像の端ギリギリに文字や顔を置かない
• キモになるモチーフは中央まわりに配置する
• 高さは、あとからCSSや設定である程度調整できると理解しておく

部位別のおすすめSWELL背景画像サイズ早見表

SWELLの背景画像サイズ・おすすめ早見表

よく使う背景部分ごとの、おすすめサイズの目安です。最初はこの表をたたき台にして、実際の表示を見ながら微調整するイメージでOKです。

部位	推奨サイズ例（px）	ポイント
ページ背景画像	1600×900前後	写真は横長、パターン柄なら小さめ画像を繰り返しても良い
タイトル背景画像	1600×600〜800前後	上下が少し切れても違和感が出ない構図にする
コンテンツヘッダー画像	1600×600前後	サイト全体の雰囲気を決めるので、クセの強すぎない画像を選ぶ
フルワイドブロック背景	1600×900前後	テキストやボタンとセットで使う前提でレイアウトする
メインビジュアル（トップ）	1600×900前後	PCの見え方を基準にしつつ、スマホでは中央が見えると意識する

ここで挙げているサイズは、あくまで「扱いやすいスタートライン」です。画像の縦横比やデザインによっては、もう少し高さを足したり、逆に少し低くしたほうがしっくりくることもあります。

大事なのは、なんとなくバラバラに作るのではなく、「まずはこの表のサイズで用意してから、実際の表示を見て微調整する」という手順にすることです。そのほうが、作業時間もかなり短くなります。

サイズは“目安”と割り切って調整する

背景画像には、「この数字が絶対の正解」というものはありません。画像の中身、文字量、サイトのデザインによって、ぴったりくるサイズは変わります。

私自身は、次のようなステップで決めています。

• まずは早見表どおりのサイズで画像を作る
• PCとスマホの両方で表示を確認する
• タイトルが窮屈なら高さを少し増やす、逆に余白だらけなら少し削る

「一発で決めよう」と思うと肩に力が入ってしまうので、「基準サイズから微調整していくもの」と考えておくと気がラクになります。

SWELLで背景画像を設定する具体的な手順

サイト全体のページ背景画像の設定方法

まずは、サイト全体に効く「ページ背景画像」です。これは、ページの一番奥に敷く背景になります。

設定画面で見かける主な項目をまとめると、こんなイメージです。

項目名の例	意味・役割
画像を選択	背景に使う画像ファイルを選ぶ・アップロードする
表示位置	中央・左上・右下など、画像の基準位置を決める
繰り返し	小さな画像をタイル状に敷き詰めるか、1枚だけ表示するか
スクロールに追従	背景を固定するか、スクロールに合わせて動かすか

操作の流れとしては、おおよそ次のようになります。

• 管理画面の「外観」から「カスタマイズ」を開く
• 「サイト全体設定」→「基本デザイン」→「ページ背景画像」の順に進む
• 使いたい画像を選び、位置や繰り返し、固定表示などを調整する
• プレビューでPCとスマホの見え方をチェックする

写真を背景にするときは、どうしても情報量が多くなりがちです。最初は、うすいグラデーションやシンプルなパターン画像から試してみると、失敗が少なくておすすめです。

固定ページ・投稿のタイトル背景画像の設定方法

次に、ページごとの雰囲気を変えられる「タイトル背景画像」です。会社概要やサービス紹介ページなど、重要なページだけに入れることも多い部分ですね。

固定ページを例にすると、だいたい次のような手順になります。

ここで使う背景画像サイズの目安が、先ほどの表にあった「横1600×縦600〜800px前後」です。

タイトルに文字が乗ることを考えると、例えばこんな構図にしておくと扱いやすくなります。

• 上半分はやや暗めで、模様の少ない部分を作る
• 下半分に写真のメインとなる要素を配置する
• 文字は左寄せにすることが多いので、左側はシンプルめにしておく

フルワイドブロックとメインビジュアルの背景設定

ランディングページ風のトップや、サービス紹介のセクションでよく使うのが「フルワイドブロック」です。SWELL専用ブロックや、カバーブロックを使って作ることが多い部分ですね。

背景画像のサイズは、「横1600×縦900px前後」から始めると、縦横のバランスがとりやすく、PCでもスマホでも崩れにくいです。

使い方のイメージは次のとおりです。

• ブロックエディタで「フルワイド」またはカバーブロックを追加する
• 右側のブロック設定から背景画像を選ぶ
• 必要なら、背景色やオーバーレイ色（うすい黒など）を重ねる
• 中央にキャッチコピーやボタンを配置する

トップのメインビジュアルも、基本的には同じ考え方でOKです。固定ページをトップに設定してメインビジュアルを作る場合も、「1600×900pxの画像＋中央寄せのテキスト」という構成から始めると、調整がしやすくなります。

SWELLの背景画像をおしゃれに見せるデザインのコツ

テキストの読みやすさを最優先にする

どれだけ背景がかっこよくても、肝心の文字が読みにくければ意味がありません。よくあるパターンをまとめると、次のようなイメージです。

状態	背景画像とテキストの関係	見え方の印象
NG例	写真の上に白文字をそのまま載せている	どこを読めばいいか分からず、目が疲れる
少し惜しい例	うすいグラデーションだが、テキスト色が背景と近い	なんとなく読みづらく、パッと頭に入らない
OK例	背景の上に半透明の黒を重ね、その上に白文字を置く	スッと内容が読めて、デザインも締まって見える

SWELLのブロックでは、背景色やオーバーレイ色をかけられるものが多いので、「背景画像をそのまま見せる」のではなく、「画像の上にうすく色をかけて、その上に文字を置く」という2層構造を意識してみてください。それだけで読みやすさが一気に変わります。

中央に“見せたいもの”を集める

スマホ表示では、どうしても画像の中央あたりが一番よく見えます。左右や上下の端は、画面によって切れ方が変わってしまいます。

そのため、背景画像を作るときは、次のようなルールを意識しておくと安心です。

• 人物写真なら、顔を中央〜やや上に置く
• ロゴやキャッチコピーは、中央付近に大きめに配置する
• 端のほうは、なくなっても問題ない部分にする

私も以前、左下にだけロゴを入れたヘッダー画像を作ったことがありますが、スマホで見たら完全に見切れていました。それ以来、画像を作るときは、スマホで中央部分だけを切り出したイメージを頭に浮かべながらレイアウトするようにしています。

背景は“足す”だけでなく“引く”ことも考える

SWELLはもともと余白がきれいなテーマなので、背景を盛りすぎるよりも、あえて「何もしない」部分を作ったほうが、全体としては洗練されて見えることがよくあります。

例えば、こんなページでは、背景をあえて白に戻したり、画像を減らしたりするのも一つの手です。

• 情報量の多い解説記事ページ
• ボタンやリンクが多く、目線を散らしたくないページ
• スマホからのアクセスが多いメディア

「ここだけは印象に残したい」という見せ場（トップのメインビジュアルや、サービス紹介のセクションなど）を決めて、そこにだけ背景画像を使うと、メリハリの効いたデザインになります。

背景画像サイズとページ速度・SEOの関係

ファイル形式と容量の目安

まずは、用途ごとのファイル形式と容量の目安を押さえておきましょう。

用途	推奨形式	目標容量の目安
ページ背景（写真）	JPEG または WebP	1枚あたり200〜400KB前後
タイトル背景画像	JPEG または WebP	200〜400KB前後
フルワイド・メインビジュアル	JPEG または WebP	300〜500KB前後
ロゴ・アイコン系	PNG または WebP	できるだけ軽く（〜100KB程度）

写真系の背景は、JPEGかWebP形式で保存しておくと、画質と軽さのバランスが取りやすいです。PNGは透過が必要なロゴやアイコンで使うイメージです。

オンラインの画像圧縮サービスや、画像編集ソフトの書き出し設定を使えば、肉眼ではほとんど差がない状態のまま、ファイルサイズだけ半分以下にできることもあります。

SWELLで画像を軽く保つための工夫

SWELL自体も表示速度に配慮されたテーマですが、背景画像を多用する場合は、次のような点を意識しておくと安心です。

背景画像サイズを決めるときに、「このサイズなら、だいたいこれくらいの容量になりそうだな」と一度イメージしてから書き出すようにすると、後からまとめて見直す手間がかなり減ります。

よくある質問｜SWELL 背景画像サイズのQ&A

Q1. 背景画像サイズのとおりに作ったのに、スマホで一部が切れてしまいます

A1. 背景画像は、端末によって表示領域が違うため、どのサイズで作っても多少は切れる前提になっています。この記事で紹介しているような1600×900px前後の背景画像でも、スマホでは中央部分が強調されがちです。

対策としては、次のポイントを意識してみてください。

• 見せたい要素（人物の顔やロゴなど）は中央付近に配置する
• 上下左右の端は「切れても大丈夫な部分」にしておく
• テキスト入りの画像を背景にする場合は、テキストも中央寄せにする

Q2. SWELLの背景画像サイズは、ページごとに違う値でも問題ありませんか

A2. 問題ありません。固定ページや投稿のタイトル背景などは、ページごとに別のサイズの画像を使っても、動作的には何の問題もありません。

ただ、サイト全体の統一感を出したい場合は、次のようなルールを決めておくとデザインがまとまりやすくなります。

• 横幅はすべて1600pxで統一する
• 高さだけ、ページの重要度や文字量に合わせて少し増減させる

私も、以前はページごとにバラバラのサイズで作っていましたが、「横幅だけ統一する」と決めてから、サイト全体がスッキリして見えるようになりました。

Q3. SWELLの背景画像用に、Canvaではどのサイズでキャンバスを作ればいいですか

A3. Canvaなどの画像編集ツールで背景画像を作る場合は、次のようなキャンバス設定から始めると扱いやすいです。

• ページ背景・フルワイド・メインビジュアル：横1600〜2000px × 縦900〜1200px
• タイトル背景画像：横1600px × 縦600〜800px

まずは「横1600px」のテンプレートを作っておき、用途に応じて高さだけ変えていくと、量産がかなり楽になります。慣れてきたら、「うちのサイトは全部1600×900pxで統一」など、自分用のルールを決めてしまうのもおすすめです。

まとめ：SWELL 背景画像サイズは「横1600px前後＋用途別に高さ」でOK

この記事の内容をあらためて整理します

そして、今日からできる一番シンプルな一歩は、「自分のサイト用の標準サイズを決めること」です。

• 背景系はすべて1600×900pxで作る
• タイトル背景は1600×600pxで統一する

といったルールを一つ決めて、画像編集ツールにテンプレートを用意しておくと、次からの作業が一気に楽になります。

一度“自分ルール”が固まってしまえば、SWELLの背景画像サイズで悩む時間が減り、そのぶんコンテンツの中身やデザインの細かいブラッシュアップに集中できるようになります。この記事を参考に、あなたのサイトにちょうどいい背景画像サイズを見つけていってください。