SWELLで企業サイトのトップページを組む手順｜スマホ表示の確かめ方

2026年10月13日

アイキャッチ — パソコンの画面に並んだトップページのセクションのブロックが、横のスマートフォンの画面では縦一列に積み直されて表示されている構図

「SWELLでトップページを作り始めたが、パソコンでは整って見えるのに、スマホで見ると文字が画像に埋もれている」「セクションごとに余白がばらばらで、どこを直せばよいか分からない」——SWELLで自社サイトを組んでいる方から、当社がよく受ける相談です。

載せる中身が決まっていても、どの設定とどのブロックで組むかで、仕上がりと公開後の更新のしやすさは変わります。パソコンの編集画面だけを見て組むと、スマホでの崩れに公開後まで気づけないこともあります。

この記事では、SWELLでトップページを組む操作の手順と、スマホで崩れていないかを確かめる手順を扱います。トップページに載せる中身の考え方は「Swellでコーポレートサイトの作り方」で扱っているので、構成がまだ決まっていない方は先にそちらをご覧ください。

この記事の結論

SWELLのトップページは、最上部のメインビジュアルを「カスタマイザー」で、その下の各セクションを「固定ページのブロック」で組むと整理しやすくなります。セクションはフルワイドブロック1つに役割を1つとし、余白はフルワイドブロックの「上下内側の余白量」で、PCとスマホを別々に決めます。メインビジュアルの文字は画像に焼き込まず、テキストの欄に入れて、スマホ用の画像も設定します。仕上げに、エディターのプレビューだけでなく実機のスマホで上から順に確かめると、崩れに公開前に気づきやすくなります。

機能名・設定名は執筆時点（2026年10月）の表記です。

組み始める前に、トップページの土台を2つ整えておく

ブロックを置き始める前に、土台の設定を済ませておくと、後からレイアウトを組み直す手間が減ります。

トップページに使う固定ページを決める

この記事では、自分で組んだ固定ページをトップページとして表示する前提で進めます。WordPressの「設定」→「表示設定」で指定します。画面の流れは「Swellでコーポレートサイトの作り方」で手順を載せています。

そのページのサイドバーを表示しない

SWELLのフルワイドブロックは、公式マニュアルでワンカラム（サイドバー非表示）での使用を想定していると説明されています。サイドバーがあるページでは、画面幅いっぱいに広がらず、本文の幅に収まって表示されます。

トップページだけサイドバーを外したい場合は、固定ページの編集画面の右側にある「SWELL設定」で、そのページだけ表示を上書きできます。

ポイント

「サイドバーを消したのにフルワイドが広がらない」ときは、カスタマイザーの「基本デザイン」で、コンテンツの背景を白にする設定が有効になっていないかも確かめてください。公式マニュアルでは、この設定がオンだとワンカラムでもコンテンツ幅に収まると説明されています。

トップページの部品は「カスタマイザー」と「ブロック」の2か所で作る

SWELLのトップページは、編集する場所が2つに分かれています。どこで何を作るのかを先に把握しておくと、「この部分はどこから直すのか」を判断しやすくなります。

部品	編集する場所	向いている使い方
メインビジュアル	「外観」＞「カスタマイズ」＞「トップページ」＞「メインビジュアル」	最上部の画像・動画と、キャッチコピー
記事スライダー	同「トップページ」＞「記事スライダー」	お知らせや事例記事をスライドで見せる
ピックアップバナー	同「トップページ」＞「ピックアップバナー」（中身は「外観」＞「メニュー」で作成）	主要ページへの画像つきの入口
各セクション	固定ページのブロックエディター	事業内容・強み・実績・会社概要・問い合わせ誘導

上の3つはカスタマイザーから設定するトップページ向けの機能で、事業内容や実績などのセクションは固定ページの本文としてブロックで組みます。

図解 — トップページを上から順に並べた縦長の画面図。最上部のメインビジュアルと、その下のスライダーやバナーの帯がひとつの設定パネルにつながり、それより下に積まれた複数のセクションのブロックが別の編集画面につながっている。上下2つの編集場所に分かれていることを示す構成図

迷ったら「更新する人が触れる場所」で決める

最上部をメインビジュアルで作るか、固定ページの最初のブロックで作るかで迷ったら、公開後にその部分を誰が、どれくらいの頻度で変えるかで決めます。頻繁に差し替えるなら、社内の担当者が慣れている画面で編集できるほうが続きます。編集できる範囲の決め方は「ホームページのどこまで自分で編集できるのか」で詳しく扱っています。

メインビジュアルを設定する手順と、文字が読めなくなる失敗

メインビジュアルは訪問者が最初に見る部分で、ここの崩れはページ全体の印象を下げます。

STEP

画像か動画かを選ぶ

「外観」＞「カスタマイズ」＞「トップページ」＞「メインビジュアル」を開き、最初の設定で画像か動画かを選びます。この選択で以降の設定項目が変わり、動画を選ぶと「動画の設定」が表示されます。以下は画像を選んだ場合の手順です。

STEP

「表示設定」で高さを決める

「メインビジュアルの高さ設定」は、画像・動画サイズのまま／数値で指定する／ウィンドウサイズにフィットさせる、の3種類から選べます。数値で指定する場合は、PCサイズ（幅960px以上）とSPサイズ（幅960px未満）を分けて、500pxのように半角・単位付きで入力します（%は使えません）。

STEP

スライドごとに画像と文字を入れる

各スライドには「スライド画像（PC用）」と「スライド画像（スマホ用）」の欄があります。キャッチコピーは「メインテキスト」「サブテキスト」に、ボタンは「リンク先URL」と「ボタンテキスト」に入れます。

STEP

文字の読みやすさを整える

「テキストカラー」「テキストシャドウカラー」と、表示設定にあるカラーオーバーレイ（色と不透明度）で、背景の画像と文字の差をつけます。

よくある失敗は「文字を画像に焼き込む」こと

キャッチコピーを書き込んだPC用の画像をスマホでも使うと、設定によっては文字が小さくなったり、切れたりすることがあります。文字はテキストの欄に入れておけば、画面幅に応じて表示され、検索エンジンや読み上げ機能にも文字として伝わります。

もう1つは、PC用の横長の画像だけを設定し、スマホでも同じ画像を使うケースです。画面の縦横比が違うため、スマホでは写真の大事な部分が切れたり、文字が人物の顔に重なったりすることがあります。スマホ用の画像を別に用意し、文字を置く位置に余白がある写真を選ぶと防ぎやすくなります。

注意

カスタマイザーの「ヘッダー」で、トップページのヘッダー背景を透明にする設定を使う場合は、ロゴやメニューがメインビジュアルの画像に重なります。透過時用のロゴ画像を用意し、明るい写真の上でも読めるかを確かめてください。

セクションはフルワイドブロック1つに役割を1つ持たせる

メインビジュアルより下は、固定ページのブロックで組みます。企業サイトのトップページでは、SWELLの専用ブロックである「フルワイドブロック」を、セクションの外枠として使うのが組みやすい方法です。

1つのフルワイドブロックに1つの役割

「事業内容」「実績」「問い合わせ誘導」のように、役割ごとにフルワイドブロックを1つずつ置きます。複数の話題を1つに詰め込むと、順番の入れ替えや1つだけの削除が難しくなります。主に使う設定は次のとおりです。

設定項目	何を決めるか	企業サイトでの使い方
コンテンツの横幅	記事／サイト幅／フルワイドの3段階	文章のセクションは「記事」か「サイト幅」にすると読みやすい
上下内側の余白量	PCサイズ時・スマホサイズ時を別々に5段階	スマホでは一段小さくすると間延びしにくい
背景色・背景画像	セクションの背景	背景画像の上に文字を置くときは、背景色がオーバーレイカラーとして働く
上下の境界線の形状	斜め・ウェーブなど	背景画像を設定していないときのみ有効

見出しは「セクション用」スタイルにそろえる

フルワイドブロックを追加すると、最初から「セクション用」スタイルの見出しが入っています。見出しブロックの「スタイル」から選べる中央寄せのデザインで、セクションの見出しをすべてこれにそろえると、全体の見た目が統一されます。

余白をそろえたいセクションも、フルワイドブロックで囲む

公式マニュアルによると、フルワイドブロックを続けて置いた場合は、ブロック同士の間の余白がなくなるように作られています。背景色をつけないセクションも、背景を透明にしたフルワイドブロックで囲むと、余白を「上下内側の余白量」で一元管理できます。セクションごとの余白のばらつきは、まずここで整えられないかを確かめます。

図解 — 左側には箱の中に箱が何重にも入れ子になった深い構造、右側には同じ大きさの横長の箱が縦に5つ並び、それぞれの中に見出しと中身が1段だけ入った浅い構造。右側の浅い構造が更新しやすいことを示す比較図

ポイント

フルワイドブロックの中に、さらにグループやカラムを何重にも入れると、公開後に「どのブロックを選べば文字を直せるのか」が分からなくなります。当社では、フルワイドブロックの中は1〜2段の入れ子までを目安に組んでいます。

横並びはカラムブロックで組み、スマホでの並び方を先に決める

事業内容を3つ並べるといった横並びには「カラムブロック」を使います。大事なのは、スマホでどう並ぶかを組む段階で決めておくことです。

カラムはスマホで縦1列になるのが標準

カラムブロックは、標準ではスマホサイズで1列の縦並びになり、そのぶんトップページが長くなります。

SWELLでは、カラムブロックにスマホで2列表示にする設定があります。アイコンと短い言葉だけのカードなら、2列にするとページの長さを抑えられます。反対に、説明文が長いカードを2列にすると1行の文字数が少なくなり、読みにくくなります。中身の長さで1列か2列かを決めるのが目安です。

表は、スマホでの見せ方を設定で選ぶ

会社概要の抜粋などを表で載せる場合、SWELLの表ブロックには、スマホサイズで「縦並び」または「スクロール可能」にして表示する設定があります。列の多い表は、スマホで文字が細く折り返されやすいため、どちらかを選んでおきます。

「PCだけ」「スマホだけ」の表示は使いすぎない

SWELLには、ブロックごとに「スマホサイズでのみ表示」「PCサイズでのみ表示」を切り替えるデバイスコントロールの機能があります。

ただし、同じ内容をPC用とスマホ用で2つ作ると、片方だけ直して、もう片方が古いまま残るという更新漏れが起きやすくなります。デバイスコントロールは画像の差し替えなど最小限にとどめ、文章は1つのブロックで両方に表示するのが無難です。改行位置だけを変えたい場合は、ツールバーから呼び出せる「スマホだけ改行・PCだけ改行」のショートコードで対応できます。