SWELLメインビジュアルのサイズはこれ！失敗しない5つのコツ

メインビジュアルの画像が「なんか汚いな…」「スマホで見ると切れてる…」と感じて、何度も作り直していませんか？

この記事では、PCとスマホで崩れにくいメインビジュアルのサイズと、SWELL側の設定方法、そしてよくある失敗例まで、まとめてお伝えします。

ざっくり言うと「PCは横1600px前後の横長、スマホは別画像を用意して幅600〜960pxで作る」のが、SWELLでメインビジュアルのサイズを決めるときの基本ラインになります。

SWELLのメインビジュアルとサイズの基本をざっくり整理

PC・スマホ別の推奨サイズ早見表

ここでは、SWELL公式サイトで実際に使われているサイズや、複数のSWELL解説ブログで紹介されている値、そして私が実務で使っているサイズをまとめて早見表にしました。

用途	目安サイズ	ポイント
PCメインビジュアル標準	1600×900px	SWELL公式サイトのトップでも使われているサイズ。全面に画像を見せたいときの基本形です。
PCメインビジュアル控えめ	1600×500〜700px	高さを少し抑えて、メインビジュアルの下に続くコンテンツも同時に見せたいときに使いやすいです。
PCメインビジュアル高解像度	2000〜2400×1000〜1600px	大きめに作っておき、SWELL側で縮小表示。写真をきれいに見せたいときに余裕を持たせるイメージです。
スマホ用メインビジュアル基本	600×900px前後	SWELL系ブログでよく紹介されるスマホ用サイズ。縦長すぎない、扱いやすい比率です。
スマホ用メインビジュアル横960px	960×540〜800px	タブレットも考慮して横幅を広めにとるパターン。幅960pxはよく使われる目安です。
スマホ用メインビジュアル縦長寄り	960×1200px程度	画面をしっかり埋めたいときに私がよく使うサイズ。上下が多少トリミングされても崩れにくい構図にしておく前提です。
汎用的な記事用アイキャッチ	1200×630px	OGPにも使いやすいサイズ。メインビジュアルではなく、記事サムネ用の定番として覚えておくと便利です。

SWELLの公式マニュアルでは、メインビジュアルの厳密な推奨サイズは決まっていません。ですが、公式サイトや解説ブログの実例を見ると、PCは1600×900px、SPは600〜960px幅あたりで作っているケースが多いです。

迷ったら、まずPCは1600×900px、スマホは600×900pxか横幅960px程度から試してみて、必要に応じて高さや比率を微調整していくのがおすすめです。

アスペクト比と「安全エリア」の考え方

メインビジュアルのサイズを考えるときは、縦横の比率（アスペクト比）も意識しておくと失敗しにくくなります。

比率	例のサイズ	特徴
16:9	1600×900px	横長の標準的な比率。PCのファーストビューで使いやすく、写真や動画も見せやすいです。
3:2前後	1500×1000pxなど	少し縦に余裕がある比率。上と下に余白をとりやすく、文字を載せやすいです。
縦長（4:5〜9:16付近）	600×900px、960×1600pxなど	スマホで画面いっぱいに見せたいときに使うイメージ。PC版とは割り切って別デザインにすることが多いです。

もう1つ大事なのが「安全エリア」という考え方です。

画面サイズや高さ設定によって、画像の上下や左右は多少トリミングされます。そのため、次のような重要な要素は、画像の中央寄りにまとめておいた方が安心です。

• ロゴやサイト名
• キャッチコピー
• ボタン（資料請求・お問い合わせなど）

私も、ボタンを下ギリギリに配置したメインビジュアルを作ってしまい、スマホで見たらボタンの半分が隠れてしまった…という失敗をしたことがあります。それ以来、「中央寄りにまとめる」「上下に余白を残す」という2つは必ず意識するようにしています。

SWELLカスタマイザーでメインビジュアルサイズを設定する

カスタマイザーの開き方と基本設定

SWELLのメインビジュアルは、WordPress管理画面から次の流れで設定していきます。

手順	操作	内容
1	「外観」→「カスタマイズ」	テーマ全体のデザイン設定画面を開きます。
2	「トップページ」をクリック	トップページ専用の設定項目に移動します。
3	「メインビジュアル」をクリック	トップページのメインビジュアル専用の設定画面が開きます。
4	画像か動画かを選ぶ	静止画・スライダー・動画のどれで見せるかを選択します。
5	PC用画像とSP用画像を登録	デバイスごとに最適な画像をそれぞれ指定できます。

このとき、PC用には1600×900px前後の横長画像、スマホ用には600〜960px幅の画像を用意しておくと、カスタマイザーのプレビューでもイメージをつかみやすいです。

SWELLはPCとスマホで画像を分けて登録できるので、「PCは横長でスッキリ、スマホは縦長でしっかり見せる」といった作り方もしやすいのが強みです。

高さ設定3パターンの違いを理解する

メインビジュアルの「縦の大きさ」は、SWELLの設定でかなり変わります。高さの設定方法は次の3種類です。

設定項目	意味	向いているケース
画像・動画サイズのまま	アップロードした画像の比率をそのまま使い、サイズに合わせて表示します。	写真の構図を崩したくないときや、あまり細かく調整したくないとき。
数値で指定する	pxやvhなどの単位で、高さをきっちり指定できます。	ブログ型のように、メインビジュアルの高さを控えめにしたいとき。
ウィンドウサイズにフィットさせる	ブラウザの高さいっぱいまでメインビジュアルを広げます。	LPやサービスサイトなど、画面全体を使ったヒーローヘッダーにしたいとき。

私がよく使うパターンはこんな感じです。

• シンプルなブログやオウンドメディア：
  「数値で指定」でPCは500〜700px、スマホは画面の6〜8割くらいの高さにする。
• ブランド感を出したい会社サイトやLP：
  「ウィンドウサイズにフィットさせる」で画面いっぱいに表示し、PCとスマホで画像をしっかり作り分ける。

「画像サイズのまま」は手軽ですが、横長の画像をそのままスマホで使うと、高さが足りずに背景が窮屈に見えたりします。スマホの見え方を優先したいときは、スマホ用の画像を別で作って、数値指定かウィンドウフィットで調整した方がきれいに収まりやすいです。

失敗しないswellメインビジュアルサイズの決め方

ブログ型サイト向けのサイズ戦略

ブログ型や個人メディアの場合、メインビジュアルは「雰囲気づくり＋ブランド感」を出しつつ、記事一覧にも早くたどり着いてほしい、ということが多いと思います。

私がブログタイプでよく組むサイズは、このあたりです。

• PC用画像
  横幅：1600px前後／高さ：500〜700px程度
  カスタマイザーでは「数値で指定」にして、高さを微調整。
• スマホ用画像
  600×900px前後、または横幅960pxで縦は控えめに設定。
  テキストは中央寄せで、上下に余白をしっかり取る。

メインビジュアルの高さを控えめにすると、その下に続く記事一覧や新着情報がすぐ目に入るので、「トップだけ見て離脱」というパターンを減らしやすくなります。

コーポレートサイト・LP向けサイズの考え方

会社の公式サイトやサービスLPのように、「第一印象が命」のページでは、メインビジュアルがサイトの雰囲気をほぼ決めてしまいます。ここでは、少し大胆なサイズに振っていくのもアリです。

サイトタイプ	PCサイズの目安	スマホサイズの目安	ポイント
会社サイト（情報重視）	1600×700〜900px	600×900px前後	画面の7〜8割をメインビジュアルにしつつ、下のコンテンツも少し見えるようにして、スクロールを促します。
会社サイト（ブランディング重視）	1600×900px＋ウィンドウフィット	横幅960pxで縦長寄りの画像	画面いっぱいのヒーローセクション。写真や動画を大きく見せて、世界観で惹きつけたいときに向いています。
LP・キャンペーンページ	2000×1000〜1200px	600×1200px〜960×1600px程度	キャッチコピーとボタンを中央に集め、ファーストビューだけで「何が得られるページか」が伝わる構成を意識します。

このように、同じSWELLでも、ブログか会社サイトかLPかで、メインビジュアルに求める役割は変わります。サイズもそれに合わせて変えてあげると、デザイン全体が決めやすくなります。

画像が切れる・汚いときのサイズと設定チェック

よくあるトラブルと原因早見表

メインビジュアル周りのトラブルは、だいたい次のパターンに分類できます。

症状	主な原因	チェックポイント
画像がぼやけている・荒い	元画像の解像度が足りない、または拡大されすぎている	横幅800px程度の画像を、1600pxなどに引き伸ばして使っていないか確認。
PCではきれいだがスマホで窮屈	横長画像をスマホでもそのまま使っている	スマホ用に別画像を登録しているか、または高さ設定を調整しているかをチェック。
スマホでボタンや文字が切れる	重要な要素を上下ギリギリに配置している	ロゴ・テキスト・ボタンを画像の中央寄りにまとめているか。
上下が想定より大きくトリミングされる	「ウィンドウフィット」で比率が合っていない	画像の比率と、よく想定する画面の比率（ノートPC・スマホ）を意識して構図を決めているか。
読み込みが遅くて真っ白な時間が長い	画像のファイルサイズが大きすぎる	1枚あたり1MB近くになっていないか、圧縮をかけているか。

私も、フリー素材の写真をそのまま使ったら、横幅が足りずに強制的に拡大されてしまい、仕上がりが全体的にぼやっとしてしまったことがあります。メインビジュアル用の画像は、最低でも横幅1280〜1600px以上で用意しておくと、引き伸ばしで荒れるリスクを減らせます。

スマホ用縦長画像を別で作るときのコツ

SWELLでは、PC用とスマホ用で別々のメインビジュアル画像を設定できます。この機能を活かして、スマホ用はスマホ専用のレイアウトで作ってしまった方が、結果的に手戻りが少なくなります。

PCで作った横長のデザインを、ただ縮小してスマホに流用しようとすると、文字が小さすぎたり、改行位置が変になったりして、かなりストレスになります。最初から「PC用」「スマホ用」と分けて考えた方が、最終的には時短になることが多いです。

Canvaなどでメインビジュアルを作るときのキャンバスサイズ

PC用キャンバスサイズのおすすめ

PC用メインビジュアルは、横幅1600px前後を基準にしておくと扱いやすいです。よく使うサイズ感を表にまとめます。

用途	キャンバスサイズ	メリット
汎用PCメインビジュアル	1600×900px	SWELL公式サイトの構成にも近く、とりあえずこのサイズで作っておけば大きな失敗は少ないです。
少し余裕を持たせたい場合	2000×1125px（16:9）	拡大やトリミングを前提にしても、画質を保ちやすいサイズ感です。
写真重視・高解像度	2400×1600px	Canvaでよく使われる大きめサイズ。SWELL側で縮小して使うことを想定しています。

私の場合は、まず1600×900pxで1案作ってみて、構図的にどうしても難しいときだけ2400×1600pxに切り替えています。どのサイズを使う場合も、SWELLのカスタマイザーで実際の表示をプレビューしながら、トリミング具合を確認するのがポイントです。

スマホキャンバスと文字配置のコツ

スマホ用メインビジュアルは、「PC版を縮小」ではなく、「スマホ用に別レイアウトで作る」と割り切った方が、見た目も使い勝手もよくなります。

• キャンバスサイズの目安
  600×900px／960×1200pxあたり
• 文字の配置
  タイトルは中央〜やや上に置き、本文テキストは短くまとめる。
  ボタンは指でタップしやすい大きさで、タイトルとの距離を少しあけて配置。
• 余白のとり方
  上下左右に余白を確保しておき、画像の端まで文字を詰め込まない。

私も最初は「PC版のデザインが気に入ったから、そのまま小さくして使おう」と思っていました。でも実際にスマホで確認してみると、文字が詰まりすぎていたり、装飾がごちゃごちゃしていて、読みづらさが目立ちました。

スマホは画面が小さいぶん、「情報量を減らして、要点だけに絞る」くらいの気持ちで作った方が、結果的にきれいに仕上がります。

表示速度とSEOを落とさない画像サイズ・容量の目安

画像の解像度と容量のバランス

まず、解像度（ピクセル数）と容量（KBやMB）のバランスについての目安です。

• 横幅の目安
  PC用：1600〜2000px程度
  スマホ用：600〜1080px程度
• ファイルサイズの目安
  1枚あたり、できれば300KB前後を目標にする
  写真が多くてどうしても重くなる場合でも、500KB以内を意識する

背景がシンプルな画像は軽くなりやすく、写真ベースのデザインほど容量が大きくなりがちです。私も写真を多用したメインビジュアルを作ったとき、圧縮前は1MBを超えてしまい、表示にかなり時間がかかりました。画像を圧縮ツールなどで調整しつつ、「これなら画質的にも許容できるかな」というラインを探してみてください。

圧縮・画像形式・Lazy Loadのポイント

メインビジュアルのサイズを決めたら、仕上げとして次の点もチェックしておくと安心です。

• 画像形式
  写真系：JPEGまたはWebP
  イラストやロゴ：PNGまたはWebP
• 圧縮方法
  画像編集ソフトやオンラインツールで事前に圧縮してからWordPressにアップロードする。
  画質を確認しながら、ファイルサイズが大きすぎないギリギリのラインを探る。
• Lazy Load（遅延読み込み）
  メインビジュアルはファーストビューに表示されるので、基本的にはすぐ読み込まれるようにしておく。
  それ以降の画像は遅延読み込みを有効にし、ページ全体の表示速度を底上げする。

SWELLはもともと表示速度に配慮されたテーマですが、メインビジュアルの画像サイズや圧縮具合によって、体感速度はかなり変わります。サイズとデザインのバランスを取りながら、「軽くてきれい」を目指していきましょう。

よくある質問

Q1．PCとスマホでメインビジュアルのサイズは分けた方がいいですか？

A．基本的には、PC用とスマホ用で画像を分けた方がきれいに表示しやすいです。

SWELLでは、メインビジュアルにPC用画像とスマホ用画像を別々に登録できます。PCは1600×900pxなどの横長、スマホは600×900pxや横幅960pxの画像にしておくと、それぞれの画面比率に合った見え方になります。

Q2．とりあえず1枚だけで運用したい場合、どのサイズが無難ですか？

A．どうしても1枚で済ませたい場合は、横幅1600px×高さ900px程度の横長画像が無難です。

PCでは違和感なく表示され、スマホでも大きく崩れることは少ない比率です。ただし、スマホでの高さ不足や文字の小ささが出やすいので、キャッチコピーやボタンは中央寄りに大きめの文字で配置し、「どの端が少し切れても大丈夫な構図」にしておくと安心です。

Q3．メインビジュアルに動画を使うときも、サイズの考え方は同じですか？

A．基本の考え方は同じですが、「容量」と「再生環境」にはより気をつけた方がいいです。

SWELLのメインビジュアルは、静止画だけでなく動画も設定できます。ただ、動画はファイルサイズが重くなりやすく、回線が弱い環境だと再生までの待ち時間が長くなります。

• 動画の長さを短めにして、圧縮もかける
• PCだけ動画にして、スマホは静止画にする
• スマホで自動再生されないケースもあるので、静止画だけでも成立するデザインにしておく

このあたりを意識しながら、動画用とは別に、静止画のメインビジュアルも用意しておくと安心です。

まとめ

この記事の内容を振り返ります

今日できる一歩としては、まず今使っているメインビジュアルの「画像サイズ」と「ファイル容量」を一度チェックしてみてください。もし横幅が1280px未満だったり、容量が1MB近くあるようなら、この記事で紹介したサイズを参考に画像を作り直し、SWELLのカスタマイザーから高さ設定も合わせて見直してみましょう。

それだけでも、見た目の印象とページの軽さがかなり変わるはずです。少しずつ調整しながら、自分のサイトにぴったりなメインビジュアルのサイズを見つけていきましょう。