SWELLでトップページを作る方法｜サイト型・ブログ型の構成と設定手順【2026年版】

SWELLでトップページを作ろうとすると、「最新記事を並べるだけでよいのか」「固定ページを使ってサイトらしく作るべきか」で迷いやすいものです。

結論からいうと、記事の更新をそのまま見せたいならブログ型、読者を目的別に案内したいならサイト型が向いています。どちらが上という関係ではなく、トップページに持たせたい役割で選ぶことが大切です。

この記事では、サイト型・ブログ型の違いから、固定ページの作成、SWELLブロックを使った構成、表示設定、スマートフォン確認までを順番に解説します。まず自分に合う型を選び、必要な手順から進めましょう。HOAI Journalの構成例も紹介します。

管理画面の名称や配置は、WordPress・SWELLのバージョンによって異なる場合があります。この記事の表示設定は2026年10月に確認しています。

SWELLのトップページはサイト型とブログ型から選ぶ

固定ページは、プロフィールや案内ページのように、記事の新着順とは別に用意するページです。WordPressは初期状態では、トップページへ新しい投稿を時系列で表示します。一方、特定の固定ページをホームページに指定すると、案内やカテゴリー、プロフィールなどを組み合わせたサイト型のトップページを作れます。

比較項目	ブログ型	サイト型
主な目的	新着記事をすぐ読んでもらう	読者を目的別の情報へ案内する
トップページ	最新の投稿を自動表示	固定ページを表示
更新の手間	少ない	構成の見直しが必要
向いているサイト	更新中心の個人ブログ、日記、ニュース	メディア、事業サイト、サービス案内
設計の自由度	比較的シンプル	高い

ブログ型は記事更新を中心に見せる

ブログ型では、公開した記事がトップページへ自動的に追加されます。トップページ用の固定ページを作らなくても運用できるため、まず記事を書くことへ集中したい初心者に向いています。

ただし、読者の目的が複数あるサイトでは、新着順だけだと「何から読めばよいか」が伝わりにくくなることがあります。

サイト型は読者の行動順を設計する

サイト型では、固定ページに最初の画面（ファーストビュー）、案内文、新着記事、カテゴリー、プロフィールなどを配置します。必要に応じて、問い合わせや記事の閲覧など次の行動を促す案内（CTA）も加えます。読者へ「このサイトは何を扱い、次にどこへ進めばよいか」を示せるのが強みです。

その反面、セクション（内容ごとのまとまり）を増やしすぎると読みどころがぼやけます。サイト型では、見た目よりも読者の優先行動を一つ決めることが先です。

迷ったら小さく始めて後から切り替える

開設直後で記事数が少ない場合は、ブログ型から始めても問題ありません。カテゴリーや案内したい記事が増えたら、固定ページを作ってサイト型へ切り替えられます。

記事公開を優先するか、複数の入口を設計するかで分けると判断しやすくなります。切り替えは後からできるため、最初から完成形を作り込む必要はありません。

作り始める前にトップページの役割を決める

トップページ作りでは、ブロックを並べる前に「誰へ、何を伝え、どこへ進んでもらうか」を決めます。この設計が曖昧なまま作ると、セクションが増えて更新しにくくなります。

最優先の読者と行動を一つ決める

たとえば初心者向けメディアなら、最優先の行動は「はじめての方向け記事を読む」「学びたいカテゴリーを選ぶ」などです。サービスサイトなら「サービス内容を知る」「問い合わせる」が候補になります。

複数のボタンを同じ強さで並べるのではなく、主CTAを一つ、補助導線を必要な分だけ用意します。

必要なセクションを読者の行動順に並べる

初心者向けの基本構成は、次の順序で考えると整理しやすくなります。

1. サイトの目的と対象読者を伝える
2. 最初に読んでほしい内容へ案内する
3. 新着記事や主要カテゴリーを示す
4. 運営者やサイトの信頼情報を示す
5. 次の行動を案内する

すべてを入れる必要はありません。読者の理解や行動に影響しないセクションは省き、後から必要になったときに追加します。

完成後の更新方法まで決める

固定文を毎回手作業で差し替える構成は、記事が増えるほど管理が難しくなります。新着記事はSWELLの投稿リストブロックで自動表示し、固定文はサイトの方針が変わったときだけ見直すなど、自動で変わる部分と固定文を分けましょう。

カスタマイザーでトップページ上部を整える

SWELLには、固定ページの本文とは別に、トップページ上部を整える専用機能があります。「外観」→「カスタマイズ」→「トップページ」から、メインビジュアル、記事スライダー、ピックアップバナーを設定できます。

3機能はすべて表示する必要はありません。固定ページに同じ役割のセクションがある場合は、情報が重複して主役が分かりにくくなります。まず役割を決め、必要な機能だけを選びましょう。

機能	主な役割	向いている用途
メインビジュアル	サイトの印象と主要メッセージを伝える	ブランドやサイトの目的を最初に示す
記事スライダー	注目記事を動的に案内する	読んでほしい記事を条件で選んで見せる
ピックアップバナー	主要ページへの入口を作る	カテゴリーや案内ページを画像で選ばせる
固定ページのブロック	独自の順番で情報を構成する	読者の行動順に合わせて自由に案内する

メインビジュアルでサイトの第一印象を伝える

メインビジュアルは、トップページを開いたときに最初に表示される領域です。画像、複数画像のスライダー、動画から表示方法を選び、メインテキスト、サブテキスト、ボタンも重ねられます。

• 表示内容：表示しない、画像、動画から選ぶ
• 高さ：素材サイズ、内容、数値、ウィンドウサイズから選ぶ
• 見やすさ：フィルターやオーバーレイで文字とのコントラストを調整する
• 行動導線：必要な場合だけ、目的が分かるボタンを一つ置く

固定ページ本文にも大きなファーストビューを作ると、似た案内が連続します。どちらを主役にするか決め、重複する見出しやボタンは減らしてください。詳しい項目は、SWELL公式のメインビジュアル設定方法で確認できます。

HOAI Journalのトップページでは、メインビジュアルでサイトの方針を短いメッセージにしています。固定ページ本文の「はじめての方へ」では、同じ文章を繰り返さず、対象読者と提供内容を補足しています。

記事スライダーで注目記事を案内する

記事スライダーは、指定した条件に合う投稿を横方向へ切り替えて表示する機能です。カテゴリーまたはタグで対象を絞り、並び順、表示枚数、切替速度、タイトル位置、余白や背景などを調整できます。

「新しい記事を並べる」ことだけが目的なら、固定ページ内の投稿リストや通常の記事一覧の方が、読者が自分のペースで比較しやすい場合があります。記事スライダーは、注目させる記事と選定基準が明確なときに使うと効果的です。メインビジュアルを使用する場合は、その下へ表示されます。

設定方法と表示条件は、SWELL公式の記事スライダー設定方法で確認できます。

HOAI Journalでは記事スライダーを設置していません。トップページ本文の投稿リストで新着記事を3件自動表示しているため、同じ記事案内を上部で重複させない方針です。

ピックアップバナーで主要ページへの入口を作る

ピックアップバナーは、画像付きのナビゲーションとして、カテゴリーや重要な案内ページへの入口を並べる機能です。カスタマイザーだけでは完結せず、最初に「外観」→「メニュー」で専用メニューを作り、メニューの位置を「ピックアップバナー」に設定します。

その後、「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」で、PC・スマートフォンの列数、タイトル位置、画像の暗さ、余白などを調整します。バナー画像には、リンク先のアイキャッチ画像またはメニュー項目で指定した画像を使用できます。

固定ページ本文にカテゴリーカードや主要ページへのリンクをすでに設置している場合は、同じ入口が重複しないか確認してください。詳しい作成手順は、SWELL公式のピックアップバナー機能の使い方で確認できます。

HOAI Journalではピックアップバナーを表示していません。固定ページ本文で「はじめての方へ」「新着記事」「カテゴリー」の順に案内しているため、画像バナーを追加せず、本文内の導線へ役割を集約しています。

メインビジュアルは印象、記事スライダーは注目記事、ピックアップバナーは主要ページへの入口が役割です。必要な役割を持つ機能だけを選びます。固定ページのブロックと役割が重なる場合は、どちらか一方へまとめましょう。

ブログ型トップページを設定する

ブログ型は、WordPressの「設定」→「表示設定」で「最新の投稿」を選ぶのが基本です。固定ページをホームページとして指定する必要はありません。

ブログ型は「最新の投稿」を選び、画面下の「変更を保存」を押します。

最新の投稿を選択する

管理画面から「設定」→「表示設定」を開き、「ホームページの表示」で「最新の投稿」を選び、画面下の「変更を保存」を押します。保存後にサイトのトップURLを開き、公開済みの投稿が新着順に表示されることを確認します。「ホームページの表示」が見当たらない場合は、固定ページが1件以上あるか確認してください。

SWELLのカスタマイザーで記事一覧を整える

SWELLでは「外観」→「カスタマイズ」から、記事一覧のレイアウトや表示情報を調整できます。カード型、リスト型、サムネイル比率などを変更するときは、PCだけでなくスマートフォンでもタイトルと画像が読みやすいか確認してください。

記事一覧の見た目を整える詳しい手順は、「SWELLの基本設定とカスタマイズ方法」で解説しています。

記事数が少ないうちは空白を埋めようとしない

開設直後は、トップページに表示できる記事が少なくても問題ありません。関連性の低い装飾や仮の案内を増やすより、読者に必要な記事を順番に公開するほうがサイトの価値につながります。

サイト型トップページを固定ページで作成する

サイト型は、トップページ用の固定ページを作り、WordPressの表示設定でホームページに指定します。工程には順序があるため、上から一つずつ進めます。

SWELLブロックでトップページを組み立てる

SWELLを使う場合も、すべてを専用ブロックへ置き換える必要はありません。自動更新や全幅表示など、専用機能に明確な利点がある箇所へ使います。

セクション	基本のブロック	使う理由
ファーストビュー	グループ／カラム／画像／ボタン	文章と画像の単純な配置に向く
背景を画面幅いっぱいにする区切り	SWELLフルワイド	全幅背景と上下余白を管理しやすい
新着・おすすめ記事	SWELL投稿リスト	公開記事を条件に応じて自動表示できる
カテゴリー案内	カラム／グループ／リンク	少数の案内を分かりやすく配置できる
主要CTA	ボタンまたはSWELLボタン	次の行動を明確に示せる

ファーストビューではサイトの目的を短く伝える

最初の画面では、サイト名だけでなく「誰に、何を届けるサイトか」を短く示します。長い説明や複数のボタンを詰め込むと、スマートフォンで主役が分かりにくくなります。

HOAI Journalのトップページでは、「始めることを、もっと自然に。」と短い方針を置き、その下で対象分野と読者への価値を一文で補足しています。実例の文言をそのまま使わず、自分のサイトの対象読者に置き換えてください。

新着記事はSWELL投稿リストで自動更新する

SWELLの投稿リストブロックは、公開済みの記事を条件に応じて自動表示できます。たとえば3件から始め、必要に応じて増やすと、最初の画面が記事だけで埋まるのを防げます。

1. 固定ページの編集画面で「＋」を押し、「投稿リスト」を検索して追加する
2. 追加したブロックを選び、右側のブロック設定で表示件数と並び順を決める。新着記事なら新しい順にする
3. カテゴリーやタグの絞り込みを使う場合は、対象の記事がその条件に合っているか確認する
4. プレビューで意図した記事が並ぶか確認し、記事カードから本文へ移動できるか確かめる

全記事への入口も必要なら、投稿一覧やカテゴリーへのリンクを添えます。投稿リストの基本はSWELL公式の投稿リストブロックの説明でも確認できます。

HOAI Journalでは、SWELL投稿リストで新しく公開した記事を3件表示しています。記事の公開に合わせて一覧が自動更新されるため、固定ページを毎回編集する必要がありません。

カテゴリーは読者の言葉で案内する

カテゴリー名だけでは内容が伝わりにくい場合は、短い説明を添えます。似たカテゴリーを増やしすぎず、読者が自分の目的に合う入口を選べる数に絞ります。

HOAI Journalでは、カテゴリー名の下に「何を学べるか」を一文で添えています。読者は管理上の分類名ではなく、自分の目的に合う入口として選べます。

プロフィールとCTAは役割を分ける

プロフィールは「誰が運営しているか」、CTAは「次に何をするか」を伝える場所です。一つのセクションへ詰め込まず、必要に応じて運営者情報ページや問い合わせページへ案内します。

HOAI Journalでは、プロフィールで運営者の経験と記事の背景を伝え、別に置いた「最初の一歩を見つける」というボタンから記事の案内へ戻れるようにしています。信頼形成と行動喚起を同じブロックへ詰め込まず、役割を分けています。

スマートフォン表示と更新しやすさを整える

トップページは要素が多くなりやすいため、PCで完成してから縮めるのではなく、スマートフォンで上から読む順序を基準に確認します。

一画面に情報を詰め込みすぎない

WordPress標準のカラムは、「モバイルでは縦に並べる」が有効な場合に小さい画面で縦並びになります。SWELLのリッチカラムなど別のブロックでは列数の設定が異なるため、スマートフォンで必ず1列になるとは限りません。使っているブロックの設定と実際の表示を確認し、見出し→説明→ボタンの順に読めるよう整えてください。

画像を原寸より大きく表示しない

小さな画像を記事幅いっぱいに拡大すると粗く見えます。画像の原寸と表示幅を確認し、文字を含む画像はスマートフォンで拡大しなくても読める構成にします。

公開後も見直す項目を決める

記事数、主要カテゴリー、サービス内容、運営者情報が変わったときは、トップページの案内も見直します。更新日を決めるより、変更が起きる項目と連動させると漏れを防げます。

公開前は、目的、導線、表示、リンク、更新性を一つずつ確認します。特にスマートフォンでは、最初の画面と主要ボタンの位置を優先して見てください。

トップページが反映されないときの確認順

設定後に表示が変わらない場合は、手当たり次第に設定を変えず、影響範囲の小さい項目から順に切り分けます。

表示設定と保存状態を確認する

最初に「設定」→「表示設定」で、最新の投稿と固定ページのどちらが選ばれているか、指定した固定ページが正しいかを確認します。固定ページ側も最新の内容が保存されているか見直します。

キャッシュを順番に確認する

保存済みなのに古い内容が出る場合は、ブラウザーを再読み込みします。それでも変わらなければ、一時的に保存された表示データ（キャッシュ）が残っていないか、利用中のSWELL機能、キャッシュ系プラグイン、サーバーの設定を一つずつ確認します。導入している機能だけを対象にし、表示が直った時点で止めます。設定をまとめて変更する必要はありません。

ブロックと表示条件を確認する

投稿リストに記事が出ない場合は、投稿が公開済みか、カテゴリーや除外条件が意図どおりか、表示件数が少なすぎないかを確認します。フルワイドが画面幅いっぱいにならない場合は、サイドバーやコンテンツ背景の設定が影響することがあります。

設定後の表示をまとめて確認する

設定を保存したら、管理画面だけで完了とせず、次のチェックリストに沿って公開画面を確認してください。

• サイトのトップURLに、選んだ「最新の投稿」または固定ページが表示されている
• 固定ページの本文、画像、投稿リストが保存した内容と一致している
• 主要ボタン・カテゴリー・記事カードから目的のページへ進める
• 投稿ページを指定した場合は、別のURLに記事一覧が表示される
• スマートフォンで見出し・表・画像がはみ出さず、ボタンを押しやすい
• 切り替え前のトップページやメニューに、不要な重複案内が残っていない

よくある質問

サイト型とブログ型はどちらがSEOに有利ですか？

形式だけで有利・不利が決まるわけではありません。読者が必要な情報を見つけやすく、記事や固定ページへ自然に移動できる構成を優先してください。

サイト型にするには固定ページが必須ですか？

この記事で紹介する一般的な方法では、トップページ用の固定ページを作り、表示設定で指定します。WordPressのテーマや機能構成によって方法が異なる場合はありますが、SWELLでブロックを使って自由に組み立てるなら固定ページが分かりやすい方法です。

サイト型へ変更すると既存の記事は消えますか？

トップページの表示方法を切り替えても、公開済みの記事自体は消えません。ただし、読者が記事一覧へ進めるリンクや投稿リストを用意し、切り替え後の導線を確認してください。

投稿ページは必ず作る必要がありますか？

WordPress標準の投稿一覧ページを使う場合は専用の固定ページを指定します。SWELLの投稿リストブロックやカテゴリーアーカイブを記事一覧として使う構成もあるため、重複した入口を作らず、サイト全体の導線に合わせて決めます。

新しい記事がトップページに表示されないのはなぜですか？

投稿が下書きのまま、投稿リストのカテゴリー・除外条件に合わない、表示件数を超えている、キャッシュが残っている、といった原因が考えられます。公開状態、ブロック設定、キャッシュの順に確認してください。

まとめ

SWELLのトップページは、記事更新を中心に見せるブログ型と、固定ページで導線を設計するサイト型から選べます。迷ったときは、読者へ最初に何をしてほしいかを基準にしてください。

• 新着記事をそのまま届けたいならブログ型
• 目的別に記事やサービスへ案内したいならサイト型
• サイト型では固定ページを作り、表示設定でホームページに指定する
• 新着記事は投稿リストなど自動更新できるブロックを活用する
• PCとスマートフォンで導線、画像、余白、リンクを確認する

最初から多くのセクションを作らず、サイトの目的、最初の案内、記事一覧から始めましょう。記事やカテゴリーが増えたら、その時点でトップページを育てれば十分です。

目的別に次の記事を選ぶ

トップページ全体の色、文字、ヘッダー、記事一覧を整えたいなら、「SWELLの基本設定とカスタマイズ方法」を確認してください。

フルワイドや投稿リストなど、トップページで使えるSWELL専用ブロックを詳しく知りたいなら、「SWELL専用ブロックの使い方」を確認してください。