【SWELL】メインビジュアルの設定方法と最適サイズについて！画像・スライダー・テキストの入れ方を解説

SWELLのトップ最上部に出る大きな画像エリア、それが「メインビジュアル」です。ここはサイトの第一印象を決める場所。結論、SWELLならカスタマイザーから画像・テキスト・ボタンを設定するだけで、コードなしでかっこいいファーストビューが作れます。つまずきやすいのは画像サイズとスマホでの見切れの2点です。

ブログ歴6年・SWELL歴5年の僕が、メインビジュアルの設定手順と、最適な画像サイズ、文字サイズの調整までまとめて解説します。

• メインビジュアルの設定手順（画像・スライダー・テキスト）
• ぼやけず重くならない最適な画像サイズ
• 文字サイズ調整とスマホ見切れ対策

SWELLのメインビジュアルとは？

メインビジュアルは、トップページの最上部に表示される大きなビジュアルエリアです。SWELLでは次の表示タイプから選べます。

• 画像：1枚の画像を固定で表示
• スライダー：複数画像を自動で切り替え
• 動画：背景に動画を流す
• なし：メインビジュアルを使わない

各スライドにはキャッチコピー（テキスト）とボタンリンクを乗せられます。設定はすべて「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」から行います。

メインビジュアルの最適な画像サイズ

一番つまずくのがここです。小さい画像を使うと拡大されてぼやけ、大きすぎるとページが重くなります。目安は次のとおりです。

項目	推奨	補足
横幅	1920〜2560px	ワイド画面でもぼやけない
縦横比	16:9 など横長	高さはカスタマイザーで調整可
ファイル形式	WebP（推奨）／JPG	WebPは軽くて画質も保てる
ファイルサイズ	200〜500KB目安	圧縮してから入れる

メインビジュアルを設定する手順

SWELL本体の準備が済んでいれば、設定は数分です。まだインストール・初期設定が済んでいない方は、先に使い方の柱記事で全体像をつかんでください。

画像挿入：カスタマイザーのメインビジュアル設定画面のスクリーンショット

文字サイズ・テキストの調整

キャッチコピーの文字サイズは、メインビジュアルの設定内で変更できます。PCで見栄えするサイズにすると、スマホでは大きすぎて改行が乱れることがあります。必ずスマホプレビューでも確認し、長いキャッチコピーは短く言い切る形に調整しましょう。

画像の上に文字を乗せると読みにくくなる場合は、フィルター（オーバーレイ）を少し濃くすると、文字がくっきりします。白文字＋やや暗めのフィルターが王道です。

ブログパーツをメインビジュアルに使う応用ワザ

SWELLの「ブログパーツ」機能を使うと、メインビジュアル下に好きなブロックを差し込めます。たとえば「今月のおすすめ記事」や「カテゴリーへの誘導ボタン」をブログパーツで作っておけば、トップの第一画面を充実させられます。サイト型トップを作りたい人に便利な合わせ技です。

メインビジュアルのよくあるトラブルと対処

• 画像がぼやける：横幅が小さい。1920px以上の画像に差し替える
• ページが重い：ファイルが大きい。WebP化＋圧縮で200〜500KBに
• スマホで見切れる：スマホ用画像を別途設定し、被写体を中央へ
• 文字が読みにくい：フィルターを濃くする／文字色を白に

よくある質問（FAQ）

まとめ：サイズとスマホ確認さえ押さえれば失敗しない

SWELLのメインビジュアルは、カスタマイザーから画像・テキスト・ボタンを設定するだけで作れます。ポイントは「横1920px以上＋WebPで軽量化」「PC・スマホ別画像」「スマホプレビューで文字確認」の3つ。ここさえ押さえれば、ぼやけも見切れも起きません。他のカスタマイズも進めたい方は、使い方ガイドの早見表から逆引きしてください。