WordPressテーマ「SWELL」を使い始めたけれど、
トップページの画像をどのように設定すればいいのか分からない…
画像はアップロードできたけど、スマホで見ると表示が崩れてしまう…
そんな悩みを抱えている方も多いのではないでしょうか？
この記事では、WordPressテーマ「SWELL」でメインビジュアルを設定する方法を、初心者の方にも分かりやすく解説します。
- メインビジュアルの基本設定方法
- 画像や動画を使った魅力的なビジュアルの作り方
- デザインをワンランクアップさせる応用テクニック
- よくあるトラブルの解決方法
メインビジュアルとは?なぜ重要なのか
メインビジュアルとは、Webサイトを開いたときに最初に目に飛び込んでくる、トップページ上部の大きな画像や動画のことです。
- 第一印象を決定づける
訪問者がサイトに到着して最初の3秒で印象が決まります - サイトの目的を伝える
何のサイトか、どんな情報を提供しているかを視覚的に伝えられます - ブランドイメージを確立する
デザインや色使いで、サイト全体のイメージを表現できます
メインビジュアル設定の基本
カスタマイザーの開き方
SWELLでメインビジュアルを設定するには、WordPressのカスタマイザーを使用します。
設定画面へのアクセス手順は以下の通りです。
画像と動画、どちらを選ぶべき?
メインビジュアルには、静止画像または動画を設定できます。
それぞれのメリット・デメリットを理解して、サイトの目的に合った選択をしましょう。
| 種類 | メリット | デメリット |
|---|---|---|
| 画像 | ページの読み込みが速い 設定が簡単 画像編集ツールで加工しやすい | 動きがないため印象が弱くなりがち 情報量に限りがある |
| 動画 | 動きがあり印象に残りやすい 多くの情報を伝えられる 高級感や先進的なイメージを演出できる | ファイルサイズが大きく読み込みが遅い 制作に時間とコストがかかる スマホのデータ通信量を消費する |
ブログやメディアサイトの場合
ページ表示速度を重視して画像がおすすめです。
SEO的にも、読み込み速度は重要な評価指標になっています。
企業サイトや商品PRの場合
動画を使うことでブランドイメージを強く印象づけられます。
画像を使ったメインビジュアル設定【基本編】
画像1枚のシンプル設定
- PC表示用: 1600×900px（横長・16:9）
- スマホ表示用: 960×1200px（縦長・4:5）
画像のアップロード手順
カスタマイザーの画面下部には、デバイス切り替えアイコンがあります。
PC・タブレット・スマホの各表示を確認して、どのデバイスでも美しく見えることを確かめてください。
表示設定の詳細
メインビジュアルの高さ設定3パターン
SWELLでは、メインビジュアルの高さを3つの方法から選択できます。
アップロードした画像の元のサイズで表示されます。画像の縦横比を保ったまま表示したい場合に適しています。
px（ピクセル）やvh（ビューポートハイト）などの単位で、高さを具体的に指定できます。
例えば「500px」と入力すれば、画面サイズに関わらず常に500pxの高さで表示され、「100vh」で画面いっぱい表示することもできます。
閲覧者のブラウザウィンドウの高さいっぱいに、メインビジュアルを表示します。
画面全体を使った印象的なビジュアルを作りたい場合におすすめですが、画像が引き伸ばされて荒れる可能性があるため、注意が必要です。
テキストとボタンの追加
メインテキスト・サブテキストの入力
メインビジュアル設定画面には、テキスト入力欄が用意されています。
サイトのキャッチコピーを入力。短く、インパクトのある言葉が効果的です。
メインテキストを補足する説明文を入力します。
- メインテキスト
「毎日の食卓を彩るレシピ集」 - サブテキスト
「簡単・時短・美味しい、働く主婦の味方レシピを公開中。」
CTA(行動喚起)ボタンの設定
メインビジュアルにボタンを配置することで、訪問者に具体的な行動を促せます。
「詳しく見る」「無料で試す」など
遷移先ページを指定
サイトのテーマカラーに合わせる
デザインをワンランクアップさせる設定
画像スライダー設定
最大5枚の画像をスライドショーのように切り替えて表示できます。
フェード
徐々に切り替わる。
上品で落ち着いた印象。
スライド
横方向にスライド。
動きがあり活発な印象。
表示間隔
3〜5秒程度が適切。
実際にプレビューしながら、心地よいリズムを見つけましょう。
フィルター処理の活用
画像に特殊効果を加えることで、独特の雰囲気を演出できます。
ブラー(ぼかし)
背景をぼかすことでテキストを引き立てる
グレースケール
モノクロでシックな印象に
ドット加工
ポップでグラフィカルな表現
ブラシ加工
アーティスティックな質感
オーバーレイカラーの設定
画像の上に半透明の色を重ねることで、テキストの視認性を高められます。
- ブランドカラーを使う
サイトのテーマカラーを設定することで、統一感が生まれる - 黒または白
最もシンプルで使いやすい。黒は重厚感、白は清潔感を演出 - 画像の主要色を抽出
画像内の色をオーバーレイに使うと、自然になじむ
- 10〜30%
画像がしっかり見える - 40〜60%
バランスが取れた設定（最も使いやすい） - 70〜90%
テキスト重視
Scrollボタンの表示
メインビジュアル下部に下向き矢印を表示し、訪問者に「下にコンテンツがある」と促せます。
動画を使ったメインビジュアル設定
動画ファイルの準備
推奨仕様
- 形式: MP4（H.264コーデック）
- 解像度: 1920×1080px以上
- 長さ: 10〜30秒程度のループ動画
- ファイルサイズ: 5MB以下が理想
容量を軽くする方法
- 解像度をフルHDに抑える
- ビットレートを3000〜5000kbpsに設定
- 音声トラックを削除
- HandBrakeなどの圧縮ツールを使用
動画のアップロードと設定
動画の設定
PCとスマホで別々の動画を設定できます。
スマホでは通信量を考慮して、静止画像を設定するのも賢明な選択です。
ポスター画像
動画が読み込まれるまでの間や、動画が表示されない場合に代わりに表示する画像を設定できます。
よくあるトラブルと解決方法
1. 画像がぼやける・荒れる
画像サイズの見直し
メインビジュアルの画像がぼやけて見える場合、最も多い原因は画像サイズの不足です。
- 画像サイズ
画像の幅が1600px以上あるか確認 - 画像表示
画像を拡大表示していないか確認（元のサイズより大きく表示すると荒れる） - 画像解像度
元の画像ファイルを、より高解像度のものに差し替える
画像圧縮の最適化
画像のファイルサイズを小さくするために圧縮しすぎると、画質が劣化してぼやけて見えます。
2. スマホで表示が崩れる
レスポンシブ対応のチェックポイント
スマホで見たときにメインビジュアルが崩れる場合、以下を確認しましょう。
- 高さ設定
PCと同じ高さ設定だと、スマホでは大きすぎる/小さすぎる場合がある - テキストサイズ
PCで読みやすいサイズでも、スマホでは大きすぎて画面からはみ出ることがある - 画像の向き
横長の画像はスマホの縦画面では上下が切れてしまう
- 高さ設定
デバイスごとに別々に設定 - テキストサイズ
スマホでは小さめに調整 - SP専用画像
縦長(4:5)の画像を用意
3. 表示速度が遅い
画像・動画の最適化方法
メインビジュアルがあることで、ページの読み込みが遅くなっている場合の対策です。
- ファイル形式の見直し
写真はJPEG、イラストや透過画像はPNG、最新ブラウザ対応ならWebP形式 - 適切なサイズ
必要以上に大きな画像を使わない。最大でも幅2000px程度
- ファイルサイズの削減
前述の圧縮方法を徹底的に実施 - YouTubeの活用
自サーバーではなくYouTubeにホスティングすることで、サーバー負荷を軽減 - スマホでは画像に切り替え
モバイル通信では動画を避け、静止画像を表示
ページ速度は、GoogleのPageSpeed Insightsで測定できます。定期的にチェックして、スコア90以上を目指しましょう。
まとめ
SWELLのメインビジュアル設定について、基本から応用まで解説してきました。最後に、重要なポイントをおさらいしましょう。
ブログやメディアサイトでは表示速度を優先して画像を、企業サイトでは印象重視で動画を検討しましょう。
PC用は1600×900px、スマホ用は960×1200pxを基本に、デバイスごとに最適化された画像を用意することで、どの環境でも美しく表示されます。
画像だけでなく、キャッチコピーとCTAボタンを配置することで、訪問者に具体的なアクションを促せます。
画像にオーバーレイカラーを重ねることで、テキストが読みやすくなり、デザインの統一感も生まれます。
どれだけ美しいメインビジュアルでも、読み込みが遅ければユーザーは離脱してしまいます。画像の圧縮と最適化を徹底しましょう。
メインビジュアルは、サイトの顔となる重要な要素です。
この記事で紹介した設定方法を活用して、訪問者の心を掴む魅力的なトップページを作り上げてください。
設定は一度で完璧にする必要はありません。実際に公開してから、アクセス解析のデータを見ながら、少しずつ改善していくのがおすすめです。
試行錯誤を楽しみながら、あなたのサイトに最適なメインビジュアルを見つけていきましょう。
