SWELLのフルワイドブロックの使い方完全ガイド

ブログやサイトのトップページをもっとおしゃれにしたくて、SWELLのフルワイドブロックを試してみたものの、「全幅にならない」「思っていた仕上がりにならない」と首をかしげていませんか。

結論として、SWELLのフルワイドブロックの使い方を「レイアウトと設定」「デザインの型」「トラブル対策」という順番で押さえていくと、サイト型トップページやLP風レイアウトを安定して作れるようになります。

SWELLフルワイドブロックの基本とメリット

フルワイドブロックとは？他ブロックとの違い

フルワイドブロックは、画面の横幅いっぱいに背景色や背景画像を敷いて、その中に見出しや文章、ボタンなどをまとめて配置できるSWELL専用のブロックです。イメージとしては「1つの大きなセクションを丸ごとデザインするための箱」のような存在だと思ってもらえれば大丈夫です。

似ているブロックもいくつかあるので、違いを簡単な表に整理しておきます。

ブロック名	主な役割	横幅のイメージ	向いている使い方
段落ブロック	文章を書く	記事本文の幅	通常のテキストエリア
カバーブロック	画像＋テキスト	本文幅〜少し広め	見出し周りの飾りや、短いセクション
フルワイドブロック	セクション全体	画面端まで広げられる	トップページの各セクション、LP、区切りの帯

フルワイドブロックを使うと、次のような演出が簡単にできるようになります。

• ヘッダーのすぐ下に、横幅いっぱいのメインビジュアル（キャッチコピー＋ボタン）を配置する
• サービス紹介や料金表の背景を色付きの帯にして、重要な情報を目立たせる
• セクションごとに背景色を切り替えて、ページ全体にメリハリを出す

通常の段落ブロックだけでページを作ると、どうしても紙のレポートのような平坦な印象になりがちです。そこにフルワイドブロックを「区切り」として差し込んでいくと、一気にサイト型のトップページらしい雰囲気が出てきます。

SWELLフルワイドブロックが向いているシーン

便利なブロックですが、「どこにでも使えばOK」というわけではありません。特に力を発揮しやすいのは、こんな場面です。

• 固定ページで作るトップページやLPの、それぞれのセクション
• プロフィールやサービス紹介など、一目で内容を伝えたい部分
• 背景色や背景画像を切り替えながら、ストーリーを段階的に見せたいとき

逆に、通常のブログ記事を最初から最後までフルワイドで埋めてしまうと、読者からすると「どこからどこまでが1つの話なのか」が分かりづらくなってしまいます。

ざっくりまとめると、次のような使い方がバランスよく感じます。

• 記事本文：基本は通常ブロックで組み立てて、要所だけフルワイドで強調
• トップページやLP：フルワイドブロックをベースにセクションを組み立てる

この感覚を一度つかんでおくと、「ここはフルワイドにしたほうが良さそうだな」と判断しやすくなります。

SWELLフルワイドブロックの使い方【基本操作】

フルワイドブロックの挿入手順

まずはエディター上でフルワイドブロックを追加するところからです。やってみると、手順自体はとてもシンプルです。

追加した直後は、まだ中身が空っぽの大きな箱の状態です。この箱の中に見出しや段落、ボタン、画像などのブロックを並べていき、1つのセクションとして仕上げていきます。

フルワイドブロックを選択すると、右側の設定パネルに専用の項目が表示されます。ここで横幅、上下左右の余白、背景色や背景画像、境界線などを調整していきます。

最初に触るときは、ひとまず箱の中に見出しブロックと短い本文、そしてボタンを1つ置いてみると、どんな雰囲気になるかがつかみやすいです。

コンテンツ幅・余白の設定

次に、フルワイドブロックの中身の幅と、上下の余白（padding）を整えます。ここを適当にしてしまうと、「なんとなく素人っぽい」仕上がりになりやすいので、少し丁寧に見ておきましょう。

よく使う設定を表にまとめると、こんなイメージになります。

設定項目	説明	目安の使い分け
コンテンツ幅：記事	通常の本文と同じ幅	ブログ記事内で、背景色だけ変えて軽く目立たせたいとき
コンテンツ幅：サイト幅	ヘッダーやフッターとそろう幅	トップページの多くのセクションの基準として使う
コンテンツ幅：フルワイド	画面の端まで広がる	メインビジュアルなど、思い切り見せたいセクション
上下余白（padding）	セクションの高さ	PCは80〜120、スマホは40〜60くらいから調整

私が意識しているポイントは、次の3つです。

• コンテンツ幅は「サイト幅」を基本にして、インパクトを出したい部分だけ「フルワイド」にする
• 上下の余白は、少し多いかなと思うくらいからスタートして、プレビューを見ながら微調整する
• スマホ表示で窮屈に見えないか、実機かエミュレーターで必ずチェックする

慣れていないころの私は、「余白を増やすと情報量が減ってもったいない気がする」と思っていましたが、実際にはその逆で、余白をしっかり取ったほうが読みやすさも、デザインの印象もぐっと良くなりました。

背景色・背景画像の設定とコツ

SWELLのフルワイドブロックの印象を大きく左右するのが、背景色と背景画像の設定です。ここでは、それぞれの役割と、失敗しにくい選び方のポイントをまとめます。

• 背景色：単色で塗りつぶす。読みやすさを重視したいセクション向き
• 背景画像：写真やイラストを敷く。世界観や雰囲気を強く出したいとき向き

背景色を選ぶときは、サイト全体で使っている色とのつながりを意識すると統一感が出ます。

• メインカラー：ボタンや重要な見出しに使う強めの色
• サブカラー：フルワイドブロックの背景などに使う、少し落ち着いた色

テキストとのコントラストも大事です。濃い背景色には白文字、薄めの背景色には黒や濃いグレー、といった基本を守るだけでも、読みやすさがかなり違ってきます。

背景画像を使うときは、次の点をチェックしてください。

• 画像の上に載せる文字は必要最低限にする
• 文字が読みにくいときは、黒や白の半透明のオーバーレイをかける
• 人物の顔やロゴなど、重要な部分と文字が重ならないように位置を調整する

背景画像はインパクトがありますが、その分だけ読みづらさとも隣り合わせです。私は、大事な説明をするセクションは背景色だけで組み立てて、背景画像は見せ場になる部分だけに使うようにしています。

フルワイドブロックの使い方を生かしたデザイン実例

サイト型トップページのセクション構成例

サイト型トップページでは、「1セクション＝1つのフルワイドブロック」と考えると、全体の構成がとても組み立てやすくなります。典型的な例を表にすると、こんなイメージです。

セクション順	内容	フルワイドブロックの設定例
1	ヒーロー（キャッチコピー＋ボタン）	コンテンツ幅フルワイド＋背景画像＋上下余白多め
2	サービス概要	コンテンツ幅サイト幅＋薄めの背景色
3	実績・お客様の声	コンテンツ幅サイト幅＋グレー背景＋リッチカラム
4	プロフィール・会社情報	コンテンツ幅サイト幅＋白背景＋画像＋テキスト
5	よくある質問・お問い合わせ案内	コンテンツ幅サイト幅＋背景色＋大きめボタン

このように、フルワイドブロックを「セクションの箱」として順番に並べていくと、自然とサイト型のトップページになります。

私がよく使うパターンは、1つ目のセクションだけコンテンツ幅をフルワイドにして背景画像を敷き、その下のセクションはすべてサイト幅＋背景色違いで切り替えていく構成です。これだけでも十分にプロっぽい印象になります。

LP風レイアウトでの使い方

LP（ランディングページ）風に使うときは、「読者の感情の流れ」を意識してフルワイドブロックを並べていくと、読みやすさが大きく変わります。よくある流れは、次のような感じです。

それぞれを1つのフルワイドブロックにして、背景色や写真でリズムをつけていきます。

• 悩みの提示：少し落ち着いた色の背景＋シンプルな見出し
• サービス紹介：明るめの背景＋アイコン付きで分かりやすく説明
• 実績紹介：白背景でスッキリ見せる
• 料金表：淡い色の背景＋表ブロックで分かりやすく比較

SWELLのフルワイドブロックの使い方として、この「感情の流れ」と「色の変化」を意識できるようになると、同じ情報でも印象がガラッと変わります。

ブログ記事内でのアクセントとしての活用

フルワイドブロックはトップページ専用ではなく、通常のブログ記事の中でもアクセントとして活躍してくれます。

• 記事の途中に、背景色付きの「中間まとめボックス」を入れる
• 特に重要な注意点だけ、帯状のフルワイドブロックで目立たせる
• ダウンロードリンクやキャンペーンの案内を、区切りとして挟み込む

ただし、1本の記事の中でフルワイドブロックを使いすぎると、どこが本筋なのか分かりにくくなってしまいます。私の感覚では、1記事あたり2〜3箇所に抑えておくと、読みやすさとデザイン性のバランスがちょうどいいです。

SWELLフルワイドブロックが崩れる原因と対処法

フルワイドにならない・左右に余白が残る

一番多い相談が、「フルワイドブロックを使っているのに、横幅いっぱいに広がらない」というものです。原因としてよくあるのは、次のようなケースです。

特にSWELLでは、「コンテンツの背景を白にする」がオンになっていると、フルワイドブロックを使っても画面いっぱいに広がらない場合があります。その場合は、カスタマイザーの「サイト全体設定」から「基本デザイン」を開き、「コンテンツの背景を白にする」をオフにしてみてください。

ちゃんとフルワイド表示になっているかどうかを確認するには、テストとして派手な背景色を設定してみるのが手っ取り早いです。画面の端まで色がついていれば、設定は問題ないと考えてOKです。

境界線デザイン（波線など）が崩れる

フルワイドブロックの魅力のひとつが、「波」「斜線」「円」「ジグザグ」といった境界線デザインです。ただ、使い方を間違えると上下の境界線がぶつかり合って、かえってガタガタした印象になってしまいます。

よくあるパターンを表にしておきます。

症状	よくある原因	対処法
上下の境界線が重なってギザギザになる	連続した2つのフルワイドに、両方とも境界線を設定している	どちらか片方だけ境界線を使うか、片方の境界線の高さを0にする
背景画像＋波線で不自然な切れ目が出る	背景画像を使ったフルワイドに境界線を直接乗せている	境界線専用のフルワイドブロックを別に用意して、色だけ敷く
スマホだけ境界線の見え方が変	PC前提の余白や文字サイズになっている	スマホプレビューで確認しながら、余白や文字サイズを調整する

境界線デザインは、アクセントとして使うととても効果的ですが、連続させすぎるとページ全体が落ち着かなく見えてしまいます。私の場合は、「3つか4つに1つだけ境界線を使う」くらいの控えめな使い方にしておくと、ちょうどいいと感じることが多いです。

モバイル表示での注意点

SWELLのフルワイドブロックは、PCとスマホで挙動が少し違う部分があります。特に気をつけたいのが「固定背景」や「パララックス効果」の設定です。

• 固定背景：PCでは背景が固定されて、前面だけがスクロールするように見える
• スマホ：ブラウザの仕様上、背景が固定されず、PCとは違う見え方になることが多い

そのため、PCでは「おー、いい動きだな」と思っても、スマホで見ると「想像と違う」と感じることがあります。対策としては、次のような工夫が有効です。

• スマホで見ても違和感が少ないように、重要な部分が中央に来る画像を選ぶ
• 本当に見せたい画像は、背景ではなく通常の画像ブロックで配置する
• スマホでは背景画像を使わず、背景色だけに切り替えることも検討する

フルワイドブロックの使い方を決めるときは、必ずスマホ表示を確認しながら調整してみてください。PCだけを見ていると気づかないズレが、モバイル側には意外と多く潜んでいます。

フルワイドブロックと他ブロックの使い方の違い

カバーブロックとの違いと選び方

カバーブロックも背景画像＋テキストを載せられるので、見た目だけ見るとフルワイドブロックに近い印象があります。ただ、得意な場面は少し違います。

ブロック	主な使いどころ	特徴	向いている人
カバーブロック	記事内の見出し上や短いセクション	画像の上に文字を重ねるのが得意で、機能はシンプル	通常の記事を、少しだけリッチな見た目にしたい人
フルワイドブロック	トップページやLPのセクション全体	背景色や境界線、余白調整など、セクション単位の設定が豊富	サイト型トップページや本格的なLPを作り込みたい人

ざっくりとした使い分けの目安は、こんな感じです。

• 記事の中で「ここだけちょっと目立たせたい」→ カバーブロック
• ページのセクション全体をデザインしたい → フルワイドブロック

フルワイドブロックは、境界線や余白など「セクションごとに整えたいポイント」を細かく調整できるのが強みです。一方で、カバーブロックはシンプルなので、細かくいじる必要がない場面でサッと使える軽さがあります。

セクションブロックやリッチカラムとの組み合わせ方

SWELLには、セクションブロックやリッチカラムブロックなど、レイアウトを整えるための便利なブロックも用意されています。これらはフルワイドブロックの中に入れて使うと、よりきれいに情報を整理できます。

• フルワイドブロック：背景色・余白・境界線など、セクション全体の箱
• セクションブロック：箱の中をさらに分割して、整ったレイアウトを作る
• リッチカラム：アイコン付きのカラムを、少ない手間で並べられる

例えばサービス紹介のセクションを作るときは、こんな構成が定番です。

• フルワイドブロックで、背景色と上下の余白を設定する
• その中にセクションブロックを入れて、タイトル・説明文・ボタンの位置関係を整える
• その下にリッチカラムを置き、「3つの特徴」などを並べて紹介する

こうした組み合わせを意識できるようになると、「フルワイドブロックの使い方」というレベルから一歩進んで、「フルワイドの中身まで含めてセクションを設計する」という感覚に変わってきます。ここまで来ると、デザインの自由度がかなり広がります。

よくある質問（SWELLフルワイドブロック編）

Q1：SWELLフルワイドブロックとカバーブロックはどちらを使えばいいですか？

A：セクション全体をデザインしたいときはSWELLのフルワイドブロック、文章中の一部分だけを強調したいときはカバーブロックを選ぶのがおすすめです。

フルワイドブロックは、背景色・境界線・余白などをまとめて調整できるので、サイト型トップページやLPのように、はっきり区切りをつけたい場面に向いています。一方でカバーブロックは、記事内の見出しや重要な一文を飾る用途にちょうど良く、気軽に使えるのがメリットです。

Q2：フルワイドブロックの使い方は、固定ページと投稿ページで違いますか？

A：操作方法そのものは同じですが、目的が違うので「どう設計するか」は変わってきます。

固定ページでは、SWELLのフルワイドブロックを軸にして、サイト型トップページやサービスページを組み立てることが多いです。セクション単位で構成を考えながら、背景色や境界線でメリハリをつけるイメージです。

投稿ページでは、通常の本文ブロックをメインにして、フルワイドブロックは「まとめ」「キャンペーン案内」「プロフィール紹介」など、アクセント的な役割に絞ると読みやすさを保ちやすくなります。

Q3：フルワイドブロックをたくさん使うと、ページが重くなりませんか？

A：フルワイドブロック自体が極端に重いわけではありませんが、背景画像の使い方次第でページが重く感じられることはあります。

SWELLのフルワイドブロックの使い方としては、背景画像は「見せ場になるセクションだけ」に絞り、それ以外は背景色ベースでデザインするのがおすすめです。また、画像のサイズを適度に圧縮したり、同じ画像をうまく使い回したりするだけでも、体感の表示速度はかなり変わります。

まとめ：SWELLフルワイドブロックの使い方を定着させよう

この記事の要点おさらい

• フルワイドブロックは「セクション全体をデザインするための箱」として使うと分かりやすい
• コンテンツ幅と上下の余白をきちんと整えるだけでも、見た目がぐっと引き締まる
• 背景色は読みやすさ重視、背景画像は雰囲気づくり重視で使い分ける
• サイト型トップページやLPでは、「1セクション＝1フルワイドブロック」で組むと設計しやすい
• 「フルワイドにならない」「境界線が崩れる」といったトラブルは、レイアウト設定や背景の条件を見直すことで解決しやすい

今日から取るべき最初の一歩

いきなり完璧なトップページを作ろうとすると、どうしても手が止まってしまいます。そこで、SWELLのフルワイドブロックの使い方に慣れるために、まずは次のステップだけやってみてください。

• 今ある固定ページを1つ開く
• ページの一番上にフルワイドブロックを1つだけ挿入する
• 「背景色＋見出し＋短い文章＋ボタン」のシンプルなセクションを作ってみる

この小さな一歩を踏み出すだけで、「フルワイドブロックはこういう感覚で使うのか」というイメージが一気につかめます。そこからセクションを2つ、3つと増やしていけば、自然とサイト型トップページやLPらしい形になっていきます。

私も最初の1セクションを形にできたとき、「これなら自分にもできそうだ」と肩の力が抜けました。あなたもSWELLのフルワイドブロックの使い方を少しずつ身につけて、自分の世界観が伝わるページを育てていきましょう。