SWELLのピックアップバナーを作るときは、画像を何pxにすればよいのか、正方形と横長のどちらが見やすいのか迷いやすいものです。最初の基準としては、1200×675pxの16:9で画像をそろえると、アイキャッチとの共用や作り直しがしやすくなります。
ただし、ピックアップバナーの見え方は元画像の大きさだけでは決まりません。PCとスマホの列数、バナーの表示形式、画像内の文字や人物の位置、SWELL側のトリミングによって、同じ画像でも印象が変わります。
画像制作に慣れていない方でも判断しやすいように、基本サイズ、縦横比、設定手順、見切れを防ぐ配置、CSSを使う前の確認事項まで順番に整理します。まずは難しく考えず、共通サイズで試作して実際の画面を確認してみてください。
SWELLピックアップバナーのサイズは1200×675pxを基準にする
最初に、SWELLのピックアップバナーで使いやすい画像サイズと縦横比を整理します。固定された唯一の正解を探すより、アイキャッチとの共用、画質、読み込み負荷、スマホ表示を含めて基準を決めると判断しやすくなります。
迷ったら1200×675pxの16:9から始める
初めて作る場合は、横1200px、縦675pxの16:9を基準にすると扱いやすいでしょう。一般記事でもピックアップバナー向けの候補として多く紹介されており、横長の写真やアイキャッチ画像を流用しやすい比率です。複数のバナーを並べたときも高さがそろいやすく、トップページ全体に統一感を出せます。
例えば「ブログの始め方」「おすすめツール」「プロフィール」の3枚を作る場合、すべて同じ1200×675pxで制作します。画像内の主要な文字や人物を中央寄りに置けば、表示枠に合わせて上下左右が少し切れても内容を保ちやすくなります。まず1枚だけ作り、PCとスマホの両方で確認してから残りをそろえると効率的です。
1600×900pxは高解像度画像を共用したい場合に向く
高解像度ディスプレイでの見栄えや、記事のアイキャッチ、タイトル背景などへの共用を優先するなら、1600×900pxも選択肢になります。16:9の比率は1200×675pxと同じなので、レイアウト設計を変えずに解像度を上げられます。ただし、ピクセル数が増えるほどファイル容量も増えやすいため、そのままアップロードするのではなく圧縮が必要です。
画像を大きく作れば必ず美しく表示されるわけではありません。実際の表示幅より極端に大きい画像は、通信環境によって読み込みの負担になることがあります。1600×900pxで制作する場合も、JPEGやWebPなど用途に合う形式を選び、文字が読める範囲で画質を調整するとよいでしょう。
1200×800pxなど3:2を選ぶ場合は写真の構図を優先する
人物、商品、室内写真など、上下の情報を残したい画像では、1200×800pxの3:2が合う場合があります。16:9より縦方向に余裕があるため、写真を自然な構図で見せやすい点が特徴です。一方で、SWELLの表示形式やバナー枠によっては上下が切れ、意図した構図から変わる可能性があります。
例えば人物の顔を画像上部に寄せすぎると、横長の枠に収めた際に頭部が見切れるかもしれません。3:2で作る場合も、重要な要素は中央付近の安全領域に置きます。写真を主役にするのか、文字を主役にするのかを先に決めると、比率を選びやすくなります。
ピクセル数より縦横比と統一感を優先する
バナーをきれいに見せるうえで、1200pxか1600pxかという違い以上に大切なのが、全画像の縦横比をそろえることです。異なる比率の画像を混在させると、同じ列に並べた際に被写体の大きさや余白感がばらつき、トップページが落ち着かない印象になりやすくなります。
すでに複数のアイキャッチがある場合は、すべてを作り直す前に代表的な3枚を選び、16:9の共通テンプレートへ配置してみてください。背景色、文字サイズ、ロゴ位置まで共通化すると、画像制作の時間も短縮できます。サイズは基準であり、最終判断は実際の表示結果で行うのが安心です。
| 画像サイズ | 縦横比 | 向いている使い方 | 注意点 |
|---|---|---|---|
| 1200×675px | 16:9 | 迷ったときの基本、アイキャッチとの共用 | 端に置いた文字や人物が切れないか確認 |
| 1600×900px | 16:9 | 高解像度画像や複数用途への共用 | 画像容量を圧縮する |
| 1200×800px | 3:2 | 写真の縦方向を残したい場合 | 表示枠による上下の見切れに注意 |
具体例として、Canvaなどで1200×675pxのテンプレートを1つ作り、背景写真だけを差し替える運用があります。中央の約70％以内に文字と人物を収め、四辺には余白を残します。完成後は、PCの4列表示とスマホの1列または2列表示を確認し、読みにくい画像だけ調整すると作業を増やしすぎずに済みます。
- 迷った場合は1200×675pxの16:9を基準にします
- 高解像度や共用を優先する場合は1600×900pxも選べます
- 写真の構図を残したい場合は3:2も候補になります
- 複数画像はピクセル数より縦横比を統一します
- 主要な文字や人物は中央寄りに配置します
バナーの見え方はPC・スマホの列数と表示設定で変わる
基本サイズがわかったところで、次はSWELL側の表示設定を見ていきます。同じ1200×675pxでも、PCの固定幅4列とスマホの1列表示では、画像の表示幅や文字の読みやすさが変わるため、画像だけで判断しないことが大切です。
PCの固定幅4列では1枚あたりの表示幅が小さくなる
SWELL公式の機能説明では、固定幅4列を選ぶと各バナーは横幅25％で表示されます。大きな元画像を用意しても、画面上では4枚に分割されるため、画像内に細かな文字を入れると読みにくくなります。特にノートパソコンやコンテンツ幅を狭く設定したサイトでは、1枚のバナーが想像より小さく見えることがあります。
4列で使うなら、画像内の文言は「ブログ入門」「AI活用」のように短くし、説明文はSWELLのタイトル表示やリンク先の記事で補うとよいでしょう。文字を多く入れるより、写真、色、短いラベルで役割を伝えるほうが視認性を保ちやすくなります。
スマホでは横幅より高さと文字量を確認する
スマホ表示では画面が縦長になるため、PCで整っていたバナーが大きく感じられたり、複数枚を続けて表示するとファーストビューを占有したりします。SWELLではPCサイズとスマホサイズでレイアウトを設定できるため、PCと同じ列数に固定せず、実際の閲覧環境に合わせて選ぶとよいでしょう。
例えばPCは4列、スマホは2列にすると、各バナーの面積を確保しながら縦方向の長さを抑えやすくなります。1列表示は写真や文字を大きく見せられますが、4枚あれば縦に長く続きます。トップページで最初に読んでほしい記事との距離も確認してください。
画像のトリミングを前提に安全領域を作る
ピックアップバナーでは、用意した画像が常に全体表示されるとは限りません。枠の比率や表示方式に合わせて一部が見切れる場合があるため、画像の四隅にロゴ、長い文字、人物の顔を置くと意図が伝わりにくくなります。画像制作時に安全領域を決めておくと、列数を変えた場合にも対応しやすくなります。
具体的には、画像の中央70％ほどに重要要素を集め、外周15％程度には背景だけを置くイメージです。厳密な固定値ではありませんが、トリミングへの備えとして役立ちます。文字を画像へ直接入れる場合は、上下左右に十分な余白を取り、スマホ実機でも確認してみてください。
画像内文字とSWELLのタイトル表示を重ねすぎない
画像にタイトル文字を入れたうえで、SWELL側でもメニュー名を表示すると、同じ言葉が重なって見えることがあります。写真の明るい部分にタイトルが重なると、文字色やオーバーレイを調整しても読みにくい場合があります。画像内文字を使うか、SWELLのタイトル表示を使うか、役割を分けると整理しやすくなります。
初心者の方は、背景写真には文字を入れず、SWELL側のタイトル表示で統一する方法から試すと便利です。ブランド名や短いカテゴリー名を画像に含めたい場合は、SWELL側の表示と重ならない位置を確認します。表示設定を変更した後は、キャッシュの影響も考慮して別ブラウザやシークレット画面でも確認すると安心です。
列数、文字量、トリミング、トップページ全体の長さをセットで確認します。
画像の四隅には重要な文字や人物を置かないようにしましょう。
Q. PCでは4列、スマホでは何列がよいですか。
バナー枚数と文字量によりますが、2列から試すと大きさと縦の長さを両立しやすくなります。写真を大きく見せたい場合は1列も候補です。
Q. 画像へ文字を入れないと内容が伝わりませんか。
SWELL側でタイトルを表示できるため、必須ではありません。写真とタイトル表示を組み合わせ、スマホで一目で読める状態を優先するとよいでしょう。
- 固定幅4列では各バナーの横幅が小さくなります
- スマホは1列と2列を比較して選びます
- 重要要素は画像中央の安全領域へ配置します
- 画像内文字とSWELLのタイトル表示を整理します
- 設定後はPCとスマホの実画面で確認します
SWELLでピックアップバナーを設定する手順と整え方
表示条件を押さえたら、今度は実際の設定手順を整理します。先に画像だけを量産せず、メニュー構成、表示枚数、リンク先、PCとスマホの列数を決めてから制作すると、サイズやデザインのやり直しを減らせます。
最初にピックアップバナー用のメニューを作成する
ピックアップバナーは、見せたい記事やカテゴリーへの案内として使います。管理画面のメニュー設定で対象リンクをまとめ、ピックアップバナーとして表示する流れを確認してください。単に新しい記事を並べるのではなく、初めて訪れた人が次に何を読むとよいかを基準に選ぶと導線が明確になります。
例えば在宅副業ブログなら、「初めての方へ」「ブログの始め方」「AIツール」「安全な副業の選び方」の4項目に絞る方法があります。リンク先の内容が重複しないようにし、カテゴリー名だけで意味が伝わりにくい場合は、短い説明が伝わるタイトルへ整えるとよいでしょう。
外観カスタマイズでPCとスマホのレイアウトを選ぶ
SWELL公式では、「外観」から「カスタマイズ」、「トップページ」、「ピックアップバナー」へ進み、PCサイズとスマホサイズのレイアウトを設定する流れが案内されています。管理画面の名称や配置は、テーマの更新によって変わる場合があるため、見つからないときはSWELL公式のピックアップバナー機能ページを確認してください。
設定時は、まずPCを固定幅4列、スマホを2列など無理のない構成で試します。バナーが3枚しかない場合は、4列設定とのバランスも確認します。プレビューだけで判断せず、公開画面を複数の画面幅で開くと、タイトルの折り返しや余白の差に気づきやすくなります。
各メニュー項目に同じ比率の画像を割り当てる
メニューとレイアウトが決まったら、各項目へ画像を設定します。ここで重要なのは、異なるサイズの画像を無理に混在させないことです。1200×675pxで始めたなら、すべて同じキャンバスを使い、背景画像、色、短い文字だけを差し替えると統一しやすくなります。
画像ファイル名も「pickup-blog-start.jpg」「pickup-ai-tools.jpg」のように内容がわかる形へ整えると、メディアライブラリで探しやすくなります。画像の代替テキストには、装飾的な説明ではなく、必要に応じて画像が示す内容を簡潔に記載します。リンク先と無関係な写真を使うと、クリック後の内容に違和感が出るため注意してください。
表示確認ではリンク先と読み込み速度も確認する
デザインが整っていても、リンク先が誤っていたり、画像容量が大きすぎたりすると使いやすさを損ないます。すべてのバナーをクリックし、想定した記事やカテゴリーへ移動するか確認します。別タブで開く必要がない内部リンクは、通常の画面遷移にそろえると操作がわかりやすくなります。
画像容量は、画質を保ちながらできる範囲で小さくします。具体的な上限値は画像内容や圧縮方式によって変わるため、固定の数字だけで判断せず、PageSpeed Insightsなどの表示速度確認ツールも参考にしてください。テーマやWordPressを更新した後にも表示を見直すと安心です。
| 確認項目 | 見る場所 | 判断の目安 |
|---|---|---|
| メニュー構成 | 外観のメニュー設定 | 初訪問者が選びやすい3〜5項目 |
| PCレイアウト | トップページの公開画面 | 文字が小さすぎず余白がそろう |
| スマホレイアウト | 実機または開発者ツール | 縦に長くなりすぎずタップしやすい |
| リンク先 | 各バナーをクリック | 画像と遷移先の内容が一致する |
| 画像容量 | メディア情報と速度確認 | 画質を保ちながら圧縮されている |
具体例として、4枚のバナーを作る前に、紙やメモアプリへ「項目名、リンク先、画像の色、使う写真」を一覧化します。その後、共通テンプレートで1枚目を作り、PC4列とスマホ2列で表示確認します。文字の大きさや位置が決まってから複製すれば、修正を4回繰り返さずに済みます。
- 画像制作より先にメニューとリンク先を決めます
- カスタマイズ画面でPCとスマホを別々に設定します
- すべての画像を同じ縦横比で作ります
- 公開後は全リンクを実際にクリックします
- 画像容量と表示速度も合わせて確認します
サイズが合わないときはCSSより先に原因を切り分ける
設定手順まで整えても見え方に違和感がある場合は、すぐにCSSを書き足すのではなく、画像比率、列数、タイトル表示、余白設定を順番に確認します。標準機能で直せる部分と追加CSSが必要な部分を分けると、更新後のトラブルを減らせます。
画像が切れる場合は元画像の安全領域を見直す
人物の顔や文字が切れる場合、バナーそのものの横幅をCSSで広げる前に、元画像の構図を確認します。表示枠へ合わせたトリミングが原因なら、重要要素を中央へ移動するだけで改善することがあります。異なる画面幅に対応するレスポンシブ表示では、全端末で画像全体を同じ状態に保つのが難しい場合もあります。
例えば左端に人物、右端に長いタイトルを置いたデザインは、中央寄せで切り取られると両方が欠けやすくなります。人物と短い文字を中央付近にまとめ、外側は背景として使うと安定します。画像を作り直せるなら、CSSより先に安全領域を調整してみてください。
バナーが小さい場合は列数とコンテンツ幅を確認する
PCでバナーが小さく見えるときは、固定幅4列などの列数が影響している可能性があります。公式説明では固定幅4列は各バナーが横幅25％になるため、画像そのものを1600pxへ拡大しても、画面上の表示面積は大きくなりません。元画像の解像度と表示サイズは別の問題です。
バナーを大きく見せたい場合は、列数を減らす、表示枚数を絞る、コンテンツ幅とのバランスを見直す方法があります。1枚を目立たせたいなら、ピックアップバナーよりメインビジュアルや別のバナーブロックが適する場合もあります。目的に合う機能を選ぶことが大切です。
余白だけを変えたい場合は標準設定の有無を確認する
ピックアップバナー周辺の余白が広い場合、トップページの余白設定など、カスタマイザー内で調整できる項目がないか確認します。標準設定で変更できる部分へCSSを追加すると、後から設定を変えた際に原因がわかりにくくなることがあります。まずは外観カスタマイズのトップページ関連項目を順に見てください。
標準設定で目的の余白だけを調整できない場合は、追加CSSを検討します。ただし、クラス名や既定値はSWELLの更新で変わる可能性があります。過去の記事にあるコードをそのまま貼り付けず、現在の表示要素をブラウザの検証ツールで確認し、変更前のコードを保存しておくと安心です。
追加CSSはバックアップと影響範囲を確認して使う
CSSで高さ、余白、文字位置などを変更すると、特定の画面では整っても、別の端末や下層ページで崩れる場合があります。SWELLではピックアップバナーをトップページ以外にも表示できるため、共通クラスへの指定が複数ページへ影響する可能性もあります。変更後はトップページだけでなく、投稿ページやアーカイブページも確認してください。
具体的には、追加前のCSSをメモへ保存し、1項目ずつ変更します。複数の指定を一度に追加すると、不具合の原因を切り分けにくくなります。テーマ更新後に表示が変わった場合は、SWELL公式サイトの機能説明やユーザー向け案内で最新仕様を確認するとよいでしょう。
画像比率、列数、コンテンツ幅、余白設定の順に確認してください。
追加CSSは標準設定で解決できない部分だけに絞ります。
Q. CSSでバナーの高さを固定してもよいですか。
調整はできますが、画面幅によって画像の見切れ方が変わる可能性があります。PCとスマホを分けて確認し、重要な文字や人物が欠けない範囲で設定してください。
Q. 過去の記事のCSSをそのまま使えますか。
テーマの更新やサイト設定によって同じ結果にならない場合があります。現在のクラス名と影響範囲を検証ツールで確認し、バックアップ後に少しずつ試すと安心です。
- 見切れはCSSより先に画像の安全領域を確認します
- 小さく見える場合は元画像より列数を見直します
- 余白はカスタマイザーの標準設定を先に探します
- 追加CSSは1項目ずつ適用します
- 更新後はトップページと下層ページを再確認します
まとめ
SWELLのピックアップバナーサイズは、1200×675pxの16:9を基本にし、すべての画像で比率とデザインを統一すると整えやすくなります。
最初は共通テンプレートで1枚だけ作り、PCの列数とスマホ表示、文字の見切れ、リンク先、画像容量を確認してから残りを複製してみてください。
大きな画像を用意することだけが正解ではありません。あなたのサイトで読者が迷わず次の記事を選べるかを基準に、無理のないサイズと表示方法を整えていきましょう。
本記事は一般的な情報提供を目的としており、起業・副業による収益や成果を保証するものではありません。税務・法務に関する判断は、国税庁や税理士など専門家・公的機関の情報を必ずご確認ください。
