「SWELLでサイト型トップページを作りたいけど、何から手を付ければいいのか分からない…」と感じていませんか。
読み終えるころには、自分のサイトに合ったサイト型トップページのイメージがはっきりし、「とりあえずここから作ってみよう」と一歩踏み出せる状態になっているはずです。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLでサイト型トップを作ると何がいいのか
まずは、「そもそもサイト型トップとは何か」「ブログ型と何が違うのか」「自分が本当にサイト型にするべきか」を整理しておきます。ここをあいまいにしたままだと、作業中に迷子になりやすいので、最初に軽く押さえておきましょう。
サイト型とブログ型の違いをざっくり整理
イメージを共有するために、サイト型トップとブログ型トップの違いを表にまとめてみます。
| 項目 | サイト型トップ | ブログ型トップ |
|---|---|---|
| 表示される内容 | 固定ページで自由に組んだレイアウト | 新着記事の一覧 |
| 主な目的 | サービス案内や収益記事への導線を整理する | 最新記事をそのまま読んでもらう |
| 向いているサイト | アフィリエイトサイト、店舗サイト、教室、ポートフォリオなど | 日記ブログ、時事ネタ、更新頻度が高い雑記ブログなど |
| 読者の動き | トップから目的のページにまっすぐ進む | 新着記事を順番に読み進める |
SWELLでサイト型トップにすると、いわゆる「ホームページっぽい」見た目になり、どこに何の情報があるのかを最初の画面で伝えやすくなります。一方、更新を追いかけてもらうのがメイン目的のブログなら、無理にサイト型にしなくても十分です。
SWELLでサイト型トップを作る前に決めておきたいこと
いきなりデザインから手を付けるとだいたい行き詰まるので、その前に次の3つだけ決めておくのがおすすめです。
| 決めること | 具体例 |
|---|---|
| サイトの目的 | ブログ収益アップ、サービスの申し込み、メルマガ登録など |
| 理想の読者像 | 副業ブロガー、子育て中のママ、フリーランスデザイナーなど |
| 読者にしてほしい行動 | 商品を申し込む、問い合わせを送る、特定カテゴリの記事を読んでもらうなど |
この3つが決まっていると、トップページに何をどんな順番で置けばいいかが自然と見えてきます。私もここをぼんやりしたまま作り始めたことがあるのですが、ボタンやメニューの位置が決まらず何度も作り直すことになりました。
必要なページと素材をざっくり洗い出す
次に、サイト型トップに載せたいページと素材をメモレベルで書き出しておきましょう。
- サービスや商品紹介ページ
- 収益記事やおすすめ記事の一覧
- プロフィールページ
- お問い合わせページ
- ブログ記事一覧ページ
合わせて、ある程度そろえておきたい素材は次のとおりです。
- ロゴ画像（なければテキストロゴでもOK）
- メインビジュアル用の横長画像
- カテゴリ紹介用の画像（あれば見栄えが良くなります）
完璧に準備しなくても大丈夫ですが、「とりあえずこれだけあれば形になる」というラインを軽く決めてから作業に入ると、途中で止まりにくくなります。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
SWELLでサイト型トップを作る流れをつかもう
ここからは、SWELLでサイト型トップページを作る全体の流れを整理します。細かい操作はあとで説明するので、まずは全体像だけざっくり頭に入れてください。
SWELLでサイト型トップを作る5ステップの全体像
SWELLでサイト型トップページを作るときの大まかな流れは、次の5ステップです。
- サイトの目的とトップページの構成を決める
- 固定ページで「トップページ」と「ブログ記事一覧ページ」を作る
- WordPressの表示設定でトップページを固定ページに切り替える
- SWELLの機能を使って各セクションを配置・カスタマイズする
- スマホ表示をチェックして微調整する
こうして見ると、思っていたよりシンプルに感じるかもしれません。この流れに沿って一つずつ進めていけば、「どこからやればいいんだっけ」と迷う場面はかなり減ります。
作業に必要なSWELLの主な機能
実際の作業でよく使うSWELLの機能はだいたい決まっています。
- 固定ページの編集画面（ブロックエディター）
- SWELLブロック（ボックス、カラム、ボタン、PRエリアなど）
- カスタマイザーのトップページ関連の設定
- ウィジェット設定（フッターなど）
名前だけ聞くと難しそうに感じるかもしれませんが、実際は「用意されたパーツを組み合わせる作業」に近いです。いきなり全部覚えようとせず、この記事を見ながら触っていけば大丈夫です。
固定ページでサイト型トップの土台を作る作り方
ここからは、実際に管理画面を触ってサイト型トップの土台を作っていきます。まずは「固定ページの作成」と「表示設定」の2つを終わらせるところまで進めましょう。
トップページと記事一覧ページを作成する
最初に、サイトの顔となる固定ページを2つ作ります。
- サイト型トップページ用の固定ページ
- ブログ記事一覧を表示させる固定ページ
ページタイトルやスラッグの例を表にまとめました。
| 用途 | ページタイトルの例 | スラッグの例 |
|---|---|---|
| サイト型トップ | ホーム / TOP / サイト案内 など | home / top |
| 記事一覧 | ブログ / 記事一覧 | blog / posts |
スラッグはURLの一部になるので、一度決めたらあまり変えない前提で考えておくと安心です。私は「home」「blog」のようなベーシックな単語にしておくことが多く、他のサイトでも同じルールを使うと管理が楽になりました。
表示設定でトップページをサイト型に切り替える
固定ページを2つ作ったら、次はWordPressの「表示設定」でトップページをサイト型用の固定ページに切り替えます。やることはシンプルです。
- 「ホームページの表示」で「固定ページ」を選ぶ
- ホームページに、先ほど作った「トップページ」用の固定ページを指定する
- 投稿ページに、「ブログ記事一覧」用の固定ページを指定する
これで、サイトにアクセスしたときに、新着記事一覧ではなく、固定ページで作ったサイト型トップページが表示されるようになります。この段階ではトップページの中身がスカスカでも問題ありません。あとから少しずつ中身を作っていきましょう。
パーマリンクと表示の注意点を押さえておく
SWELLでサイト型トップを作るときに、地味に気を付けたいのがURLと表示まわりの細かい部分です。
- トップページ用固定ページのスラッグは短くシンプルにする
- 投稿ページとして指定した固定ページの本文には、基本的に何も書かない
- テスト中に検索結果に出したくない場合は、SEOプラグインなどでインデックス設定を確認しておく
最初から完璧な設定を目指す必要はありませんが、「あとで大きく変えづらい部分」だけは軽く確認しておくと安心です。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
各セクション別のSWELLサイト型トップの作り方
ここからは、サイト型トップページの中身をパーツごとに作っていきます。ヘッダー、メインビジュアル、記事スライダー、中段コンテンツ、フッターまで、よくある構成をベースに解説します。
ヘッダーとグローバルメニューの作り方
ヘッダーは、サイトの第一印象を決める重要なエリアです。特にサイト型トップでは、「このサイトは何のサイトか」「どこに何があるのか」をざっくり伝える役割があります。
ヘッダーに置くメニューの例を表にまとめました。
| メニュー名 | リンク先の例 | 狙い |
|---|---|---|
| ホーム | サイト型トップページ | 困ったらここに戻れるようにしておく |
| ブログ | 記事一覧ページ | 情報収集したい人向けの導線 |
| サービス / メニュー | サービス紹介ページ | 収益につながるページへの導線 |
| プロフィール | 運営者情報のページ | 信頼感を高める |
| お問い合わせ | 問い合わせフォーム | 「気になった人」の受け皿を用意する |
メニューが多すぎると、どこをクリックすればいいか分かりにくくなります。まずは4〜5個に絞り、どうしても増やしたいリンクがあれば、ドロップダウンメニューを活用するのがおすすめです。
メインビジュアル（ヒーローエリア）を作る
次に、サイト型トップで一番目立つ「メインビジュアル」を作っていきます。ここでは、次の3つを意識すると分かりやすくなります。
- キャッチコピー（何のサイトかを一言で伝える）
- サブコピー（どんな人に何を提供しているのかを補足する）
- ボタン（読者に一番押してほしいリンク先）
例えば、ブログノウハウサイトなら「ブログで収益を目指す人のための情報サイト」のようなイメージです。キャッチコピーは、声に出して読んだときにスッと入ってくる長さにしておくと、違和感が出にくくなります。
記事スライダー・ピックアップで導線を作る
SWELLには、記事スライダーやピックアップバナーを設置できる機能があります。ここの使い方次第で、サイト型トップから収益記事や読んでほしい記事への導線がぐっと良くなります。
【稼げるキーワード教えます】
▼ ▼ ▼
エリアごとのおすすめ記事の例をまとめました。
| 表示エリア | おすすめの記事の種類 | 例 |
|---|---|---|
| スライダー | 収益記事、サービス紹介記事 | 商品レビュー記事、サービス比較記事 |
| ピックアップバナー | 初心者向けの導入記事 | 初めての方向けの案内、サイトの使い方まとめ記事 |
| カードリンク | 人気カテゴリの代表記事 | 副業、子育て、旅行など主要カテゴリの記事 |
以前の私は「とりあえずアクセスが多い記事」を並べていましたが、「読者に次に何をしてほしいか」から逆算して記事を選ぶようにしてから、トップページの役割がはっきりしてきました。SWELLでサイト型トップを作るときは、この導線設計を意識するだけでも仕上がりが変わります。
中段コンテンツとフッターで信頼感を上げる
サイト型トップの中盤から下のエリアには、次のようなコンテンツを置くケースが多いです。
- サイトコンセプトの紹介
- カテゴリ一覧（カード型で表示）
- 運営者プロフィールの抜粋
- お客様の声や実績（あれば）
- フッターウィジェット（人気記事、カテゴリ、固定ページのリンクなど）
特に、プロフィールやコンセプトは「このサイトは誰がどんな想いで運営しているのか」を伝える大事な要素です。長い自己紹介を書く必要はなく、「どんな経験があり、誰のどんな悩みを解決したいのか」を数行でまとめるだけでも、読者の安心感はかなり違ってきます。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
デザインとスマホ表示を整えるSWELLサイト型トップの作り方
ここでは、見た目やスマホ表示を整えるときに意識したいポイントをまとめます。難しいデザイン理論ではなく、「このくらい決めておけば大きく外さない」という実践的なコツに絞って紹介します。
画像サイズと見た目のルールをざっくり決める
画像まわりのルールをざっくり決めておくだけで、サイト全体の印象はかなり整います。
| 用途 | 比率の目安 | ポイント |
|---|---|---|
| メインビジュアル | 横長（16:9〜21:9程度） | テキストを載せるスペースをあらかじめ意識する |
| アイキャッチ画像 | 横長（16:9） | 文字を入れるなら少なめにし、読みやすさを優先する |
| プロフィール画像 | 正方形に近い形 | 顔や雰囲気が分かる写真やイラストを使う |
| バナー類 | 横長の細め | ボタンとセットで使うとクリックされやすい |
SWELL側で自動調整してくれる部分も多いですが、極端に縦長・横長の画像が混ざると、どうしてもチグハグな印象になりがちです。「同じ用途の画像は、できるだけ似た比率にそろえる」と覚えておけば十分です。
スマホ表示でチェックすべきポイント
SWELLはスマホ対応のテーマですが、コンテンツの入れ方次第で読みづらくなることもあります。必ずチェックしておきたいポイントは次のとおりです。
- スマホのファーストビューで「何のサイトか」が伝わっているか
- メニューやボタンが小さすぎず、指で押しやすいか
- 画像とテキストのバランスが悪くないか（画像だらけ・文字だらけになっていないか）
- 余白が詰まりすぎていないか（少しゆとりがある方が読みやすい）
私は実際のスマホでスクロールしながら、「自分が初めて訪れた読者だったら、どこで戻るボタンを押しそうか」を意識して見るようにしています。違和感を覚えたところが、改善ポイントになりやすいです。
サイト型トップを少しずつ改善していくコツ
サイト型トップページは、一度作って終わりではなく、「育てていくページ」と考えた方が気が楽です。
- クリックされていないボタンの文言や位置を変えてみる
- 読まれていないセクションは思い切って削るか、別ページに分ける
- よく読まれている記事を、トップの目立つ位置に持ってくる
完璧な状態を目指して作業が止まってしまうより、「まずは6〜7割くらいの完成度で公開し、反応を見ながら直していく」と考えたほうが行動しやすいです。SWELLでのサイト型トップの作り方も同じで、最初はシンプルな構成から始めるのがおすすめです。
目的別のSWELLサイト型トップのテンプレ例
ここからは、目的別に「このパターンで組むと作りやすい」というテンプレ案を紹介します。自分のサイトに近いパターンをベースに、少しずつアレンジしてみてください。
アフィリエイト特化サイト向けテンプレ
アフィリエイトで収益を狙うサイト向けのサイト型トップの例です。
- メインビジュアル：サイトのテーマ＋「おすすめランキングを見る」ボタン
- ランキングセクション：主力商品のランキングを並べる
- カテゴリ別おすすめ：ジャンルごとのおすすめ記事を紹介
- 初めての方向けの案内：サイトの使い方や記事の見方を説明
- レビュー実績や比較記事への導線：信頼感と詳しい情報をセットで見せる
この構成にすると、「どの記事から読めばいいか分からない」という状態になりにくく、収益記事に自然と誘導しやすくなります。
個人事業・サービスサイト向けテンプレ
教室、サロン、コンサルなど、自分のサービスを知ってもらいたい方向けのサイト型トップのテンプレです。
- メインビジュアル：サービスの簡単な説明＋「メニューを見る」ボタン
- サービス紹介セクション：メニュー一覧と料金の概要
- お客様の声や実績：写真やコメントがあればベスト
- プロフィール：顔写真と、サービスに込めている想い
- ブログへの導線：詳しい情報や事例紹介の記事に案内
ポイントは、「サービスに興味を持ってくれた人が、迷わずメニューと実績、プロフィールにたどり着けること」です。余計な情報を詰め込みすぎず、「一番見てほしい情報」から順番に並べていきましょう。
雑記ブログをちょっとサイト型に寄せるテンプレ
「完全なサイト型にするほどではないけれど、トップに少しだけサイトっぽさを出したい」という場合のテンプレです。
- メインビジュアル：ブログ全体のテーマや雰囲気を一言で伝える
- カテゴリ一覧：代表カテゴリをカード型で見せる
- 人気記事一覧：定番記事や反応が良い記事をまとめて紹介
- プロフィールの抜粋：運営者の雰囲気が分かる程度に短くまとめる
- 新着記事一覧：最新の記事をリストで表示する
このパターンなら、今の雑記ブログにセクションを足していくだけでも「なんとなくサイトっぽいトップページ」になります。SWELLのブロックを少しずつ足していく感覚で試してみてください。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
よくある質問（SWELLサイト型トップの作り方編）
最後に、SWELLでサイト型トップページを作るときによく聞かれる質問にまとめて答えておきます。
Q1. SWELLでサイト型トップを作るのは、初心者でもできますか？
A. 初心者の方でも十分できます。
SWELLはブロックエディターと相性が良く、サイト型トップページも「ブロックを積み木のように並べていく」イメージで作れます。この記事で紹介したように、固定ページの作成、表示設定、ヘッダーやメインビジュアルの設定といった流れで進めれば、コードが分からなくても少しずつ形にできます。
Q2. ブログ型からサイト型に変えるとSEOに悪影響はありますか？
A. 基本的に、正しく設定すれば大きな悪影響は出にくいです。
大切なのは、むやみにURLを変更しないことと、トップページから重要な記事へ内部リンクをきちんと張ることです。サイト型トップにしたことで、読者が目的のページにたどり着きやすくなれば、滞在時間や閲覧ページ数が増え、結果的に良い方向に働くケースも多いです。
Q3. サイト型トップには、どのくらいのコンテンツを詰め込めばいいですか？
A. 何でもかんでも詰め込む必要はありません。
SWELLでサイト型トップを作るときは、「読者にしてほしい行動」から逆算して必要な導線だけを厳選するのがおすすめです。迷った場合は、メインビジュアル、ヘッダーメニュー、収益記事やサービス紹介への導線、簡単なプロフィールの4つを押さえ、あとは少しずつ足していくくらいがちょうどいいバランスになります。
まとめ：SWELLのサイト型トップ作りで迷わないために
この記事の内容を振り返ります
- SWELLでサイト型トップを作る前に、サイトの目的と読者像、してほしい行動を決めておく
- 固定ページで「トップページ」と「記事一覧ページ」を用意し、表示設定でトップを固定ページに切り替える
- ヘッダー、メインビジュアル、スライダー、中段コンテンツ、フッターそれぞれの役割を意識して配置する
- 画像サイズやメニュー数など、簡単なルールを決めるだけでも全体の印象が整いやすくなる
- 完璧を目指しすぎず、まずは公開してから少しずつ改善していく意識が大切
今日からできる最初の一歩としては、「トップページ用の固定ページを1つ作り、サイトの目的とキャッチコピーを1〜2行だけ書いてみる」ことをおすすめします。
そこからメニューや導線を少しずつ足していけば、気づいたころには自分らしいサイト型トップページが出来上がっているはずです。SWELLならではの使いやすさも味方にしながら、サイト作りを楽しんで進めてみてください。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
