SWELL固定ページのメインビジュアルとトップページ設定ガイド！

WordPressでSWELLを使っていると、「固定ページをトップページにして、ちゃんとしたメインビジュアルを出したいな」と一度は思うはずです。

この記事では、SWELLの固定ページをトップページとして使うときの基本と、固定ページのメインビジュアルをきれいに見せるコツを、私の実体験も混ぜながらまとめていきます。

結論を先にいうと、SWELLは「固定ページをトップページにして、メインビジュアルをしっかり作り込む」のがかなりやりやすいテーマなので、基本のステップといくつかのチェックポイントさえ押さえれば、専門的な知識がなくても十分見栄えのいいトップページが作れます。

SWELLで固定ページをトップページにする前に知っておきたいこと

ブログ型トップと「固定ページをトップページに」の違いと役割

最初に押さえておきたいのが、「ブログ型トップページ」と「固定ページをトップページにした場合」の違いです。

ブログ型は、新着記事の一覧がいきなりどんと出る構成で、固定ページトップは、サービスやプロフィールなど、読ませたい情報を自由に並べられる構成です。

項目	ブログ型トップページ	固定ページをトップページにした場合
最初に出る情報	投稿の新着記事一覧	自己紹介・サービス・実績など、自由に配置した内容
主な目的	とにかく記事をたくさん読んでもらう	信頼感やサービス内容を先に伝える
編集方法	テーマ側の投稿一覧表示が中心	固定ページをブロックエディタでレイアウト
向いているサイト	日記や雑記ブログ、更新頻度の高いブログ	事業サイト、サービスサイト、専門性を出したいブログ

私の感覚としては、趣味や日記メインならブログ型のままでも十分ですが、サービスや実績をしっかり見せたいなら、固定ページをトップページにする構成のほうがしっくりきます。

どちらが正解というより、「訪問してほしい人に、最初に何を見せたいか」で決めるイメージです。

SWELLの固定ページとメインビジュアルの関係をざっくり理解しよう

次に、SWELLでよく使う「大きな画像エリア」がどこで管理されているかを整理しておきます。

SWELLには、おおまかに次の2種類の“見出し的な画像エリア”があります。

• トップページ専用のメインビジュアル機能
• 固定ページのタイトル部分に表示できる背景画像（タイトル位置の設定と組み合わせて使う）

エリア	主な設定場所のイメージ	よく使う場面
トップページのメインビジュアル	テーマカスタマイザー内のトップページ関連設定	サイトの一番上に出る大きなヒーローイメージ
固定ページタイトルの背景画像	固定ページ編集画面のアイキャッチやページ設定	下層ページやLPのヘッダー画像的な見せ方

この記事では、「固定ページをトップページにするときのメインビジュアル」と、「下層固定ページで使うメインビジュアル風のエリア」の両方をカバーしながら話を進めていきます。

SWELL 固定ページをトップページにする3ステップ

ここからは、実際にSWELLの固定ページをトップページとして使うための手順を見ていきます。

やることをざっくりまとめると次の3ステップです。

• トップページ用の固定ページを作る
• 投稿一覧を表示させるための固定ページを作る
• WordPressの設定で「固定ページをトップページに」切り替える

順番に見ていきましょう。

HOME用の固定ページと投稿ページ用の固定ページを作成する

まずは、「トップページとして使う固定ページ」と「投稿一覧を表示するための固定ページ」の2つを用意します。

ページの用途	タイトル（例）	スラッグ（URLの末尾）例	中身のイメージ
トップページ用固定ページ	HOME / トップページ	home / top など	メインビジュアル、サービス紹介、プロフィールなど
投稿一覧用固定ページ	ブログ / コラム一覧	blog / column など	本文は空でOK（テーマが自動で投稿一覧を表示）

ポイントは、「投稿一覧用の固定ページの中身は基本的に何も書かなくてOK」というところです。

SWELL側が投稿一覧を表示してくれるので、本文を無理に書く必要はありません。

このタイミングでは、まだサイトの見え方は変わりませんが、このあと設定を切り替えると、トップページとして機能し始めます。

ホームページ設定で「固定ページをトップページに」切り替える

次に、WordPressの設定から「固定ページをトップページに」切り替えていきます。

やること自体はシンプルで、一般的には次のような流れです。

実際の画面の表現は環境によって多少違いますが、「ホームページに表示するのは固定ページ」「どの固定ページをトップにするか」という2点を決めているイメージです。

ここまでできれば、SWELLのトップページは投稿一覧ではなく、あなたが作った固定ページが表示されるようになります。

SWELL固定ページトップページで最低限入れておきたいブロック構成

固定ページをトップページに切り替えたら、次は中身のレイアウトです。

あれもこれもと盛り込みたくなりますが、最初はシンプルに「これだけ押さえておけばOK」という型から始めるのがおすすめです。

これらを、SWELLのブロックエディタでグループ化しながら並べていくと、トップページらしい流れが自然とできます。

メインビジュアルの作り方や画像の考え方は、次の章でSWELLの固定ページのメインビジュアルにフォーカスしながら詳しく解説していきます。

SWELL 固定ページ メインビジュアルをきれいに見せる基本設定

トップページのメインビジュアル設定で押さえたい項目

SWELLには、トップページ専用のメインビジュアルを設定できる機能があります。

テーマカスタマイザー内のトップページに関する項目から開けることが多く、「メインビジュアル」やそれに近い名前の設定画面が用意されています。

そこでよく触る項目を、ざっくり整理しておきます。

項目	内容のイメージ	迷ったときの考え方
表示内容	画像・動画・表示しないなどを選択	まずは画像から始めると扱いやすい
高さの設定	数値指定や画面の高さに合わせる設定	PCで見て「高すぎないか」を基準に調整
画像の登録	背景となるメインの画像	できるだけ横幅の大きい画像を用意する
フィルター・オーバーレイ	画像の上にうっすら色を重ねて暗くするなど	文字が読みやすくなるように少し効かせる
テキスト・ボタン	キャッチコピーやボタンの文言	取ってほしい行動を1つに絞ると分かりやすい

特に大事なのが「高さ」と「テキストの読みやすさ」です。

高さを大きくしすぎると、スマホで見たときにスクロールが増え、肝心のコンテンツまでなかなかたどり着けません。

また、背景画像が明るすぎたりごちゃっとしていると、キャッチコピーが読みにくくなってしまいます。

最初は、PC画面の半分〜8割くらいの高さに収まるように意識して、テキストの後ろに少し濃いめのオーバーレイをかけるくらいから試してみると、バランスが取りやすいです。

メインビジュアルで使う画像サイズと比率の目安

SWELLの固定ページのメインビジュアルで多い悩みが、「画像がぼやける」「トリミングが変」というものです。

この原因の多くは、「元画像のサイズや縦横比」と「実際に表示される領域」が噛み合っていないことです。

テーマの設定やサイトによってベストは少し変わりますが、私が意識しているざっくりの目安は次の通りです。

デバイス	比率の目安	用意しておきたい画像サイズのイメージ
PC	16:9〜21:9くらいの横長	横幅は大きめ（目安として横2000px前後）
スマホ	3:4〜4:5くらいのやや縦長	情報は詰め込みすぎず、中央に要素を寄せる
共通の注意点	重要な部分は中心付近にまとめる	左右の端は多少切れても問題ない部分にする

実務的には、次のように考えると失敗しにくいです。

• PC向けの横長画像と、スマホ向けの少し縦長寄りの画像を別で用意しておく
• ロゴや人物、訴求したい商品などは中央寄りに配置する
• 画像に文字を入れすぎず、キャッチコピー1本に絞るくらいにしておく

こうしておくと、メインビジュアルの高さを少し上下させても、致命的に崩れることが少なくなります。

固定ページタイトルの背景画像で「擬似メインビジュアル」を作る

トップページ以外の固定ページでも、SWELLの「タイトル部分の背景画像」を上手く使うと、メインビジュアル風のヘッダーエリアを簡単に作れます。

ざっくりとした流れは次の通りです。

• 固定ページにアイキャッチ画像を設定する
• SWELLのページ設定でタイトルの表示位置を調整する（コンテンツの上に出すなど）
• 必要に応じて、高さや余白をテーマ設定やCSSで微調整する

ページタイプ	背景画像の役割	おすすめの使い方
サービスページ	どんなサービスかを一瞬でイメージさせる	サービスに合ったイメージ写真＋短いコピー
実績・事例ページ	雰囲気や信頼感を伝える	制作物や現場の様子が伝わる写真
お問い合わせページ	安心感を出して不安を和らげる	柔らかい印象の写真やイラスト
プロフィールページ	人柄や世界観を見せる	本人の写真や自分らしさを表す画像

このように、固定ページタイトルの背景画像とページ設定を組み合わせるだけでも、「下層ページごとのメインビジュアル」を簡単に作れます。

トップページのメインビジュアルとテイストを合わせると、サイト全体に統一感も生まれます。

固定ページごとにメインビジュアルを変える実践パターン

ページの役割に合わせてSWELL固定ページメインビジュアルを設計する

固定ページごとにメインビジュアルを変えるときに、いちばん大事なのは「ページの役割に合わせて目的をはっきりさせる」ことです。

私なら、ざっくり次のように考えて設計していきます。

• トップページ：サイト全体のコンセプトと、読者にとってのメリットを一言で伝える
• サービス紹介ページ：どんな悩みを持つ人に、どんな価値を提供するのかをはっきり書く
• プロフィールページ：誰が運営しているのか、人柄や得意分野が伝わるようにする
• LP風のページ：申し込みや登録など、取ってほしい行動を最優先で伝える

同じSWELLの固定ページのメインビジュアルでも、「どのページで」「誰に向かって」「何を伝えるのか」を変えるだけで、サイト全体がぐっと分かりやすくなります。

固定ページメインビジュアルのテキスト構成テンプレート

メインビジュアルのテキストは、あれもこれも書こうとすると一気に読みにくくなります。

私がよく使っている、シンプルで使いやすい構成テンプレートを紹介します。

• 1行目：キャッチコピー（短くインパクトのある一文）
• 2行目：補足説明（誰のどんな悩みを解決するのか）
• 3行目：ボタンの文言（「無料相談はこちら」などの具体的な行動）

行	内容	文字数の目安
1行目	キャッチコピー	15〜25文字くらい
2行目	補足説明	30〜40文字くらい
3行目	ボタン文言	8〜12文字くらい

トップページのメインビジュアルにテキストやボタンを載せるときは、この3つの要素を意識しておくと、自然と整理された構成になります。

固定ページタイトルの背景画像をメインビジュアル代わりに使う場合は、画像側で文字を詰め込みすぎず、「画像で雰囲気を伝え、本文で詳しく説明する」という役割分担にすると、読みやすさも保ちやすいです。

SWELL固定ページ メインビジュアルまわりでよくある失敗と対策

SWELLの固定ページのメインビジュアルを触っていると、つまずくポイントはだいたい似ています。

代表的な失敗パターンと、私なりのシンプルな対策をいくつか挙げておきます。

• 画像がぼやける
  • 原因：元画像のサイズが小さすぎる、もしくは極端にトリミングされている
  • 対策：横幅の大きい画像を用意し、重要な部分を中央に寄せる
• 文字が読みづらい
  • 原因：背景画像と文字色のコントラストが足りない
  • 対策：背景に少し暗めのオーバーレイをかけ、文字色は白やはっきりした色にする
• スマホでバランスが悪い
  • 原因：PC前提の画像だけで対応しようとしている
  • 対策：スマホ向けの画像も用意するか、中央に必要な情報をまとめておく
• 高さが極端に高い
  • 原因：大きく見せたくて高さを欲張ってしまう
  • 対策：何度かプレビューしながら、スクロール量がストレスにならない高さに調整する

このあたりをひとつずつ潰していくだけでも、「なんとなく違和感のあるメインビジュアル」から「ちゃんと整っているファーストビュー」にかなり近づきます。

SWELL固定ページトップページを活かすデザイン＆SEOのコツ

固定ページトップのメインビジュアルと見出し構造の関係

SWELLの固定ページでメインビジュアルを作り込むとき、つい忘れがちなのが「見出しタグ（H1〜H3）の構造」です。

よくあるのは、タイトルを非表示にしてメインビジュアルだけを見せている状態で、H1がどこにあるか分からなくなっているケースです。

押さえておきたいポイントは次の通りです。

• 固定ページのタイトルは、基本的にH1相当の重要なテキストになる
• タイトルをデザイン上非表示にしても、中身としてはしっかり設定しておく
• 本文の最初には、そのページ全体を説明するH2を置くと読みやすい

メインビジュアルのテキストも大切ですが、検索エンジンが構造として読み取るのは「タイトル」や「見出しタグ」です。

「見た目ではメインビジュアルが主役だけれど、構造としてはH1やH2でしっかり内容を伝える」という意識を持っておくと、デザインとSEOのバランスが取りやすくなります。

トップページ直下のコンテンツ構成テンプレート

メインビジュアルのすぐ下には、「ここはどんなサイトなのか」が一目で分かるようなコンテンツを置いておくと効果的です。

私がSWELLの固定ページトップページでよく使う構成を、ざっくり書き出してみます。

これらをSWELLのカードブロックやグループブロックで整理しながら並べると、初めて来た人でも迷いにくいトップページになります。

「固定ページのメインビジュアルで興味を持ってもらい、その直後のコンテンツで詳しく知ってもらう」という流れを意識してみてください。

画像の重さと表示速度のバランスを意識する

固定ページをトップページにして、さらにメインビジュアルも大きく作り込むと、どうしても画像が重くなりがちです。

表示速度が極端に遅くなると、せっかくデザインしたのに、読み込まれる前に離脱されてしまうこともあります。

そこで意識しておきたいポイントがこちらです。

• メインビジュアル用の画像は、画質と容量のバランスを見ながら適度に圧縮する
• 必要以上に大きすぎる画像を使わない（横幅の目安を決めておく）
• 動画を背景に使う場合は、本当にそこまでのインパクトが必要か一度立ち止まって考える

SWELLの固定ページトップページは、サイトの入り口としてとても重要な場所です。

「きれいに見えること」と同じくらい、「ストレスなく表示されること」も大切な要素として、メインビジュアルの画像選びや設定を整えてみてください。

SWELL固定ページのよくある質問

Q1. SWELL 固定ページをトップページにしたら、ブログ記事一覧が見つからなくなりました

A. 投稿一覧用の固定ページをきちんと作り、「表示設定」で投稿ページに割り当てているかをまず確認してみてください。

SWELLの固定ページをトップページにした場合、もともとのブログ型トップページは自動では残りません。

別途、ブログ用の固定ページを作り、そのページを「投稿ページ」として指定しておく必要があります。

あわせて、メニューに「ブログ」「コラム」などのリンクを追加し、その投稿一覧ページに飛べるようにしておくと、読者も迷いにくくなります。

Q2. SWELL 固定ページ メインビジュアルの画像がどうしても汚く見えます

A. 多くの場合、「元画像のサイズ」と「メインビジュアルの表示サイズ」が合っていないのが原因です。

SWELLの固定ページのメインビジュアルで画像が粗く見えるときは、次のような点をチェックしてみてください。

• 元画像の横幅が足りているか（小さな画像を無理に引き伸ばしていないか）
• 極端に横長・縦長すぎる画像を使っていないか
• 高さ設定を変えた結果、必要以上に拡大されていないか

スマホ表示で違和感を感じる場合は、画像の中央に重要な要素を寄せるか、スマホ向けに別画像を用意して切り替えるのがおすすめです。

Q3. トップページのタイトルを非表示にして、メインビジュアルだけにしても大丈夫ですか

A. デザインとしてはよくある形ですが、見出し構造とキーワードの扱いには少し注意が必要です。

SWELLの固定ページをトップページにしたとき、タイトルを見せたくない場合でも、タイトル自体はしっかり設定しておきましょう。

そのうえで、本文の最初にページ全体を説明する見出しを置き、メインビジュアル内のテキストにも、狙いたいキーワードを自然な日本語の流れで入れておくと安心です。

こうしておくと、「見た目はメインビジュアル中心だけれど、構造としてはちゃんと意味が通っているトップページ」にできます。

SWELL 固定ページ メインビジュアルとトップページ化のまとめ

この記事のポイントを振り返ります

今日できる最初の一歩としては、次の流れがおすすめです。

• まずはHOME用とブログ用の固定ページを作り、固定ページをトップページに切り替えてみる
• 次に、トップページのメインビジュアルだけに集中して、「画像」「高さ」「テキスト」を整える
• 最後に、プロフィールやサービス紹介、新着記事などのセクションを少しずつ追加していく

一度で完璧なトップページを作ろうとしなくても、SWELLの固定ページのメインビジュアルと構成を少しずつ調整していくだけで、サイトの印象は驚くほど変わります。

ぜひ、あなたのサイトでも「固定ページをトップページにする」一歩を踏み出して、SWELLならではの気持ちのいいデザインを楽しんでみてください。