【SWELLデザイン設定編】サイドバーを非表示にしてサイト型トップページを作る方法

SWELLを導入したものの、トップページにブログ記事がずらりと並んでいて

と感じていませんか？

その原因は、SWELLの初期設定が「ブログ型」になっているためです。
ブログ型は新着記事が自動で並ぶ形式なので、個人ブロガーには便利ですが、店舗サイトやコーポレートサイトには向いていません。

本記事では、サイドバーの非表示設定を含め、SWELLで「サイト型トップページ」を作る手順を初心者向けに解説します。
設定作業自体は30分もあれば完了するので、ぜひ記事を読みながら一緒に進めてみてください。

ブログ型とサイト型の違いとは？店舗サイトに「サイト型」が適している理由

サイト型トップページの作り方に入る前に、まずはブログ型との違いを押さえておきましょう。

店舗・中小企業サイトにサイト型が最適な3つの理由

• 信頼感のあるファーストインプレッションを作れる：
  メインビジュアルやキャッチコピーを画面いっぱいに表示でき、訪問者に「きちんとしたお店だ」という印象を与えられる
• 伝えたい情報を優先的に配置できる：
  新着記事に埋もれることなく、サービスの強みや料金表など、見てほしい情報をトップページの目立つ位置に固定できる
• 来店・問い合わせにつながる導線を作りやすい：
  営業時間、アクセス、電話番号、予約ボタンなど、来店に必要な情報をファーストビュー付近にまとめて配置可能

サイト型トップページを作る前に準備しておくこと

完成イメージを決める（どんな情報を載せるか）

設定作業に入る前に、トップページにどんなコンテンツを載せるか整理しておきましょう。飲食店を例にすると、以下のような構成が一般的です。

コンテンツ	掲載内容の例
メインビジュアル	店舗の魅力が伝わる写真＋キャッチコピー
コンセプト	お店のこだわりや想いを短い文章で紹介
メニュー紹介	看板メニューを写真付きで3〜4品ピックアップ
お客様の声	Googleの口コミやお客様からの感想
アクセス・営業情報	住所、地図、営業時間、定休日、駐車場の有無
お知らせ	新着の投稿記事を3件程度表示
お問い合わせ・予約	電話番号、予約フォームへのボタン

すべてを最初から作り込む必要はありません。
まずはサイト型への切り替えを完了させ、コンテンツは後から段階的に追加していくのがおすすめです。

トップページ用の画像を用意する

サイト型トップページで最も印象を左右するのがメインビジュアル画像です。以下のサイズを目安に用意しましょう。

画像はCanvaなどの無料デザインツールで作成できます。
写真素材は自分で撮影したものがベストですが、用意が難しい場合はO-DANやunsplashなどのフリー素材サイトを活用しましょう。

【手順解説】SWELLでサイト型トップページを作る方法

ここからは、実際の設定手順を4つのステップで解説します。

ステップ1｜フロントページ用の固定ページを作成する

WordPress管理画面から「固定ページ ＞ 固定ページを追加」をクリックし、タイトルに「TOPページ」などの名前を入力して公開します。

この時点で本文は空のままで構いません。あくまでサイト型に切り替えるための「箱」を先に用意するイメージです。

投稿記事の一覧を表示するページが必要な場合は、同様に「お知らせ」「ブログ」などの名前で空の固定ページをもう1つ作成しておきましょう。

ステップ2｜表示設定で「固定ページ」をトップページに指定する

管理画面の「設定 ＞ 表示設定」を開き、以下の通り設定します。

1. 「ホームページの表示」で「固定ページ」を選択
2. 「ホームページ」のプルダウンからステップ1で作成した固定ページ（例：TOPページ）を選択
3. 投稿記事の一覧ページを用意した場合は「投稿ページ」にも該当の固定ページを選択
4. 「変更を保存」をクリック

これでトップページが固定ページに切り替わりました。
サイトを表示すると、サイドバーだけが残った白紙のページが表示されるはずです。

ステップ3｜サイドバーを非表示にする

サイト型トップページでは、画面幅をフルに使ったレイアウトが基本です。サイドバーを非表示にしましょう。

カスタマイザーからの設定手順

1. 管理画面の「外観 ＞ カスタマイズ」をクリック
2. 「サイドバー」を選択
3. 「トップページにサイドバーを表示する」のチェックを外す
4. 必要に応じて「固定ページにサイドバーを表示する」のチェックも外す
5. 「公開」をクリックして保存

店舗サイトの場合、トップページと固定ページは「非表示」、投稿ページとアーカイブページは「表示」にするのが一般的な設定パターンです。

なお、投稿ページのサイドバーを非表示にする場合は、1カラムでも読みやすいように「サイト全体設定 ＞ 基本デザイン」で「1カラム時の記事コンテンツ幅」を860px前後に調整しておくとよいでしょう。

ステップ4｜記事スライダーを非表示にする

サイト型に切り替えた後も、ブログ型で使っていた記事スライダーが残っているはずです。こちらもサイト型には不要なので非表示にしましょう。

記事スライダーの非表示手順

1. 「外観」→「カスタマイズ」→「トップページ」→「記事スライダー」を開く
2. 「設置しない」を選択
3. 「公開」をクリック

サイドバーを非表示にした後のデザイン最適化ポイント

サイドバーをなくしただけでは、画面が間延びして見えることがあります。以下の3つのポイントを押さえて、完成度を高めましょう。

1カラム時のコンテンツ幅を調整する

「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」にある「サイト幅」を変更できます。
サイト型トップページの場合は、初期値の1200pxのままで問題ないケースがほとんどです。

フルワイドブロックで視覚的にメリハリをつける

SWELLの「フルワイドブロック」を使うと、セクションごとに背景色を切り替えて画面幅いっぱいのレイアウトを実現できます。

たとえば、以下のように交互に背景色を変えるだけで、ぐっとプロっぽい見た目になります。

店舗サイトならCTAの配置を忘れずに

サイドバーがなくなると、バナーやリンクの設置場所も減ります。その代わりに、トップページ内の適切な位置に「ご予約はこちら」「お問い合わせ」などのCTA（行動喚起）ボタンを配置することが重要です。

SWELLのボタンブロックを使えば、目立つデザインのボタンをかんたんに設置できます。

サイト型トップページでよくある失敗と対策

固定ページを作っただけで表示設定を変えていない

固定ページを公開しただけではトップページは切り替わりません。
必ず「設定」→「表示設定」で「ホームページの表示」を「固定ページ」に変更する必要があります。
ここを忘れると、いつまでもブログ型のままなので注意してください。

サイドバーを非表示にしたのにレイアウトが間延びする

コンテンツ幅が広すぎるとテキストが横に間延びして読みにくくなります。
フルワイドブロックの中でカラムブロックを活用し、2カラムや3カラムに分割して配置するとバランスが整います。

スマホ表示を確認していない

PCで美しく仕上がっても、スマホで見ると崩れているケースは非常に多いものです。
カスタマイザー下部のデバイス切り替えアイコンや、ブラウザのレスポンシブモードを使って、必ずスマホ表示をチェックしましょう。

まとめ

SWELLでサイト型トップページを作る手順は、大きく分けて以下の4ステップです。

設定そのものはシンプルですが、サイドバーを外した後のコンテンツ設計が成果を分けるポイントになります。
フルワイドブロックで視覚的なメリハリをつけ、来店や問い合わせにつながるCTAボタンを忘れずに配置しましょう。

まずは今日、固定ページの作成とサイト型への切り替えだけでも済ませてみてください。
トップページが白紙になった瞬間、「ここからどんなデザインにしよう」というワクワク感が湧いてくるはずです。