SWELLのブレイクポイント最適化｜初心者がやりがちな失敗と直し方7選

SWELLで作ったサイトをスマホやタブレットで開いたとき、「なんかレイアウトが崩れているな」と感じたことはありませんか。

一言でまとめると、SWELLのブレイクポイントで特に大事なのは「600px」と「960px」です。この2つを軸にレイアウトを設計し、必要なところだけ追加CSSで整えてあげると、見た目のトラブルはかなり減らせます。

SWELLのブレイクポイントをざっくり理解しよう

SWELL標準のブレイクポイント一覧をイメージしよう

SWELLのカスタマイズ記事などを見ていると、ブレイクポイントとしてよく出てくるのが「600px」と「960px」です。ここでは、実際の画面幅のイメージと合わせて整理してみます。

デバイス区分	画面幅の目安	主な挙動・ポイント
スマホ	〜599px	1カラム表示が基本。ヘッダーはハンバーガーメニュー。文字やボタンは指で押しやすい大きさ。
タブレット	600〜959px	ヘッダーはスマホ寄りの挙動だが、本文はPC寄り。横向きタブレットだと2カラムも視野に入る。
PC	960px〜	グローバルナビが横並びで表示。サイドバー付きレイアウトや複数カラムが本格的に登場。
ワイドPC	1200px〜前後	本文幅が広がったり、余白がゆったりしたりする。大きなモニター向けの微調整ポイント。

ざっくり言えば、599pxまでがスマホ、600〜959pxがタブレット、960px以上がPCというイメージでOKです。SWELLのブレイクポイントを考えるときも、この3つのゾーンを意識しておくと整理しやすくなります。

一般的なブレイクポイントとの違いを知っておこう

レスポンシブデザインの解説を読むと、「768px」や「1024px」といった数字がよく出てきます。ただ、SWELLのテーマ内では、そういった一般的な値とは少し違うルールでブレイクポイントが決められています。

項目	一般的な解説でよく見る値	SWELLで意識したい値	ざっくりしたイメージ
スマホとタブレットの境目	768px前後	600px	スマホ側の幅がやや広く取られている。
タブレットとPCの境目	1024px前後	960px	少し狭いPC画面からPC扱いとしている。
ワイドレイアウト	1200〜1440px	1200px前後	広いモニターでゆったり見せるための調整。

ネットで見つけたCSSのサンプルをそのままコピペすると、「説明ではうまくいくはずなのに、SWELLのサイトでは崩れる」ということが起こりがちです。まずは「このテーマは600pxと960pxを基準に考えられているんだな」と頭に入れておくのが安心です。

まず押さえたい「960pxの壁」と「600pxライン」

実際に相談を受けていると、特にトラブルが出やすいのはこの2つのラインです。

• 960px付近でヘッダーメニューが2行になったり、ロゴと重なったりする
• 600px付近でカラムやボタンが中途半端な位置で折り返される

理由はシンプルで、600pxでスマホからタブレット、960pxでタブレットからPCに切り替わるからです。どのゾーンでどんなレイアウトにしたいかを先に決めておくと、SWELLのブレイクポイントを調整するときの迷いがかなり減ります。

SWELL ブレイクポイントで起こりがちな崩れパターン

ヘッダー・グローバルナビが崩れるケース

一番よく聞くのが、「PC表示にしたときのヘッダーメニューが途中から2行になってしまう」という悩みです。特に、ウインドウ幅が960〜1100pxくらいのときに起きやすいです。

症状	起きやすい幅	主な原因	ざっくり対処方針
グローバルナビが2行になる	960〜1100px前後	メニュー数が多い、文言が長い、余白が広すぎる	メニューを減らす、省略語にする、余白をCSSで少し詰める。
ロゴとメニューが重なる	960px付近	ロゴが大きい、ナビエリアとのバランスが悪い	ロゴ画像の幅を小さくするか、PCナビの表示幅を見直す。
スマホメニューとPCメニューが同時に見える	境目付近	独自CSSで挙動を変えすぎている	一度独自CSSを外し、標準の挙動に戻してから必要な部分だけ調整する。

私の体感では、ヘッダー崩れの多くは「メニューを詰め込みすぎ」と「ロゴが立派すぎ」が原因です。ブレイクポイントを変える前に、メニュー構成やロゴサイズだけで解決できないか、一度冷静に見直してみるのが近道です。

カラムレイアウトやボタンが中途半端に折り返すケース

次によくあるのが、カード型のカラムやボタンが「タブレットだけおかしい」というパターンです。PCではきれいな3カラムなのに、600〜959pxあたりで微妙な配置になってしまうことがあります。

よくある原因は、次のようなものです。

• ブロックの「カラム数」設定と実際の表示幅が噛み合っていない
• 文字量が多くて、ボタンやカードの高さが揃わない
• 画像サイズがバラバラで、並べたときにガタついて見える

このあたりを避けるには、あらかじめざっくりとこう決めておくと楽です。

• スマホ（〜599px）は1カラム前提にする
• タブレット（600〜959px）は2カラムまでにしておく
• PC（960px〜）は2〜4カラムまで状況に応じて使う

無理に「どの幅でも3カラムを維持しよう」と頑張るより、ゾーンごとに見せ方を割り切ったほうが、SWELLのブレイクポイントとうまく付き合えます。

プラグインやコアブロックとのブレイクポイント差

SWELLのブロックだけで組んだサイトなら問題が少ないのですが、フォームやスライダーなど、外部プラグインを一緒に使うと、ブレイクポイントの違いから崩れが出ることがあります。

たとえば、こんなパターンです。

• プラグイン側は「768pxでスマホ表示」に切り替える仕様
• SWELLは「600pxまでスマホ扱い」で設計されている

この場合、600〜767pxの間で挙動のズレが出やすくなります。こういったときは、次の順番で原因を切り分けるとスムーズです。

• どの幅で崩れているのか、ブラウザの幅を動かしながらメモする
• 開発者ツールで該当要素を選び、SWELL側かプラグイン側のどのCSSが効いているか確認する
• 必要ならメディアクエリで片方のブレイクポイントに寄せてあげる

「なんとなくこのCSSを上書きしたら直った」だと、あとから別のページで問題が出ることもあるので、どのファイルのどのルールが原因なのかを一度特定する癖をつけておくと安心です。

SWELLのデバイス出し分け機能とクラスを使いこなす

pc_only・sp_onlyをしっかり理解しよう

SWELLには、特定のデバイスだけに要素を表示したり隠したりできるクラスや設定があります。その代表が「pc_only」と「sp_only」です。これを理解しておくと、わざわざ複雑なCSSを書かなくても、かなり柔軟な出し分けができます。

クラス名・機能	表示されるデバイス	ブレイクポイントとの関係	使いどころ
.pc_only	PC＋タブレット（600px以上）	600px以上の画面幅で表示されるイメージ	PCとタブレットで共通のナビや表を見せたいとき。
.sp_only	スマホ（〜599px）	599px以下のスマホ幅だけで表示	スマホ専用バナー、縦長のボタン、短いコピーなど。
ブロックの「PCのみ表示」	PC表示でのみ有効	SWELLのPC判定と連動して表示・非表示を切り替え	PCだけに出したい装飾や画像を置くとき。
ブロックの「スマホのみ表示」	スマホ表示でのみ有効	599px以下のスマホ画面と連動	スマホでだけ見せたい短い導線や別デザインの要素。

よくある勘違いとして、「pc_onlyはPCだけ」と思ってしまうケースがありますが、実際にはタブレットも含まれます。タブレットをPC寄りで見せるのか、スマホ寄りで見せるのかを決めたうえで、このクラスをどう使うか考えると迷いにくくなります。

ブロックエディタの「表示設定」でブレイクポイントを意識する

SWELLの専用ブロックには、「PCで表示」「スマホで表示」といったチェックボックスも用意されています。ここでも、さきほどのブレイクポイントがそのまま効いてきます。

たとえば、次のような考え方です。

• タブレットもPCと同じくらいの情報量を見せたい場合は「PC寄り」に設定する
• タブレットでもシンプルに見せたい場合は「スマホ寄り」にまとめる

なんとなく思いつきで「ここはPCだけ」「ここはスマホだけ」と切り替えていくと、あとから自分でもどこで何を出しているのか分からなくなります。最初に「タブレットはPC扱いかスマホ扱いか」というルールを決め、それに従って出し分けをしていくと、SWELLのブレイクポイントがぶれません。

どのデバイスに何を見せるか決めるとブレイクポイント調整が楽になる

ブレイクポイント調整で泥沼になりがちなパターンは、「とりあえず全部の情報を全部のデバイスで見せようとしている」ときです。CSSの前に、情報の優先順位を決めてしまうと一気に楽になります。

私が実務でよくやるのは、紙に次の3つを書き出すことです。

そのうえで、スマホには「結論やボタン」を中心に、タブレットとPCには「補足情報や表・図」を厚めに配置するイメージでレイアウトを組みます。こうして情報設計をしておくと、SWELLのブレイクポイントをCSSで微調整するときも、「どの要素を残すか、どこで切るか」の判断がしやすくなります。

追加CSSでSWELL ブレイクポイント周りを安全にカスタマイズ

カスタマイズ前に押さえたい注意点

ブレイクポイントに関わるCSSは、ヘッダーやカラムなど、サイト全体の見た目に直接影響します。勢いで書き足す前に、次のような準備をしておくと安心です。

• いきなり本番サイトで試さず、テスト用の固定ページなどで挙動を確認する
• 追加したCSSはコメントやメモでまとめておき、いつでも削除・修正できるようにする
• スマホファーストで考え、まずは599px以下できれいに表示できているか確認する

私も一度、思いつきでCSSを書き足して、気づかないうちに別ページのサイドバーまで消してしまったことがあります。SWELLのブレイクポイントに関わるクラスは幅広く使われているので、「どの範囲に効くか」を意識しながら書くのが大事です。

よく使うメディアクエリサンプルと考え方

ここでは、SWELLのブレイクポイントと相性が良いメディアクエリの例を、用途とセットで整理しておきます。細かいところはサイトに合わせて調整してください。

メディアクエリ例	対象幅のイメージ	よくある用途
@media (max-width: 599px) { … }	スマホ	スマホだけフォントサイズを上げる、ボタンを縦並びにするなど。
@media (min-width: 600px) and (max-width: 959px) { … }	タブレット	タブレットだけカラム数を2にする、余白を増やして読みやすくする。
@media (min-width: 960px) { … }	PC	PCのときだけサイドバーの幅を調整、ヘッダーの余白を変えるなど。
@media (max-width: 959px) { … }	スマホ＋タブレット	PCだけ別デザインにして、それ以外はまとめて同じ見た目にしたいとき。
@media (min-width: 1200px) { … }	ワイドPC	横幅の広いモニターで本文が横に広がりすぎないように制限する。

メディアクエリを書くときは、SWELLのブレイクポイントに合わせることと、条件を増やしすぎないことがポイントです。メディアクエリが増えるほど、どこで何が効いているのか分かりにくくなります。「スマホだけ」「タブレットだけ」「PCだけ」「スマホ＋タブレット」の4パターンを基本にして、どうしても必要なときだけ追加するようにすると、保守が楽になります。

サイトタイプ別のおすすめブレイクポイント運用

同じSWELLのブレイクポイントでも、サイトの目的によって「どのデバイスでどこまで見せるか」は変わってきます。ここでは、よくある3タイプのサイトでの考え方を簡単にまとめてみます。

サイトタイプ	スマホでの見せ方	タブレットでの見せ方	PCでの見せ方
ブログ・メディア	本文優先。サイドバーは下部に回すか、思い切って非表示も検討。	PCに近いレイアウトにして、関連記事やプロフィールなどの回遊要素を出す。	サイドバー付き2カラムや3カラムで、関連記事や人気記事をしっかり見せる。
コーポレートサイト	問い合わせボタンや電話ボタンを常に目立たせる。	PCと同じ導線を保ちつつ、文字サイズを少し大きめに。	会社情報、事例、採用情報などを整理し、迷わずたどり着けるナビを用意。
LP・セールスページ	1カラムでストーリー重視。要所にボタンを用意。	スマホと似た構成でOKだが、画像が大きくなりすぎないよう注意。	横幅を活かして図解や比較表を増やしつつ、読み飛ばされないようブロックごとに区切る。

SWELLのブレイクポイントを調整する前に、「このサイトはどのタイプに近いか」「スマホとPCで役割がどう違うか」を決めておくと、CSSを書くときの判断がぶれにくくなります。

実例で学ぶSWELL ブレイクポイント調整の手順

例1：ヘッダーメニューが2行になる問題をどう見るか

まずは、PC表示のヘッダーメニューが2行になってしまうケースです。焦ってCSSで文字サイズを小さくする前に、次の順番でチェックするのがおすすめです。

それでも厳しいときに、ようやくCSSの出番です。

• PCナビとハンバーガーメニューの切り替え幅を、少し広めに設定し直す
• ナビの左右余白や文字サイズを、追加CSSでほんの少しだけ詰める

経験上、「メニューを整理するだけで解決した」というケースはかなり多いです。SWELLのブレイクポイントが悪いというよりも、「全部見せたい欲」がデザインを圧迫していることも多いので、情報の断捨離からやってみると視界が開けます。

例2：サイドバー付きレイアウトをきれいに切り替える

もうひとつよくあるのが、「PCではサイドバーありの2カラム、スマホでは1カラム」にしたい場合の悩みです。ここでも、SWELLのブレイクポイントをどう使うかがポイントになります。

私がよく採用する考え方はこうです。

• サイドバーは960px以上で出すと割り切る
• 600〜959pxのタブレットでは、サイドバーを本文の下に回すか、非表示にしてスッキリ見せる

そのうえで、CSSでは次のような切り方をします。

• @media (min-width: 960px) でサイドバーの幅や余白を調整する
• @media (max-width: 959px) でサイドバーに相当するブロックを下部に移動させるか、非表示にする

「どの幅からサイドバーを使うか」を先に決めておけば、SWELLのブレイクポイントと矛盾しにくく、CSSもシンプルに書けます。

デバッグに役立つチェックリスト

最後に、SWELLのブレイクポイント周りで困ったときに、私がいつも確認しているポイントをチェックリストにまとめました。問題が起きたときは、この表をなぞるように見直してみてください。

チェック項目	見るポイント	よくあるNGパターン
崩れる幅を特定したか	ブラウザの幅を動かし、変化が起きる幅をメモしているか。	「スマホでおかしい」程度のざっくりした認識で止まっている。
どのCSSが効いているか	開発者ツールで要素を選び、適用中のCSSとファイル名を確認したか。	SWELLなのかプラグインなのか分からないまま上書きしてしまう。
優先順位を整理したか	スマホ・タブレット・PCのどこを最優先で整えるか決めているか。	すべての幅で完璧を目指し、メディアクエリが増えすぎて混乱する。
テスト環境で試したか	テスト用ページや限定公開ページで試してから本番に反映したか。	本番に直接書き込み、どのCSSが原因か分からなくなる。

一気に全部を直そうとせず、「どの幅で」「どの要素が」「どのCSSで」崩れているのかを分解していくと、問題は意外とシンプルだったりします。

よくある質問（SWELL ブレイクポイント編）

Q1. SWELLのブレイクポイントの数値を変更しても大丈夫ですか？

A. 追加CSSで挙動を変えることはできますが、テーマ本体の数値を直接いじるのはおすすめしません。SWELL全体が600pxと960pxを基準に設計されているので、ヘッダーだけでなくカラムやボタンなど、思わぬところに影響が出る可能性があります。

どうしても変えたい場合は、次の点に気をつけてください。

• テーマ本体ではなく、追加CSSか子テーマで上書きする
• 対象となる要素を絞り込み、「スマホだけ」「タブレットだけ」など範囲を限定する
• 1つずつテストし、影響範囲を確認しながら進める

大きく設計を変えるより、「情報設計を見直して、標準のブレイクポイントに乗せる」ほうが結果的に楽なことも多いです。

Q2. スマホだけデザインを変えたいとき、どう考えればいいですか？

A. スマホだけのデザイン変更であれば、「599px以下」をターゲットにするイメージで考えると分かりやすいです。具体的には、次のような方法があります。

• sp_onlyクラスや「スマホのみ表示」を使って、スマホ専用ブロックを用意する
• @media (max-width: 599px) のメディアクエリで、フォントサイズや余白を調整する

タブレットをPC寄りで見せるか、スマホ寄りで見せるかを先に決めておくと、SWELLのブレイクポイントに沿ってすっきり設計できます。

Q3. ブレイクポイントを増やして、もっと細かく分けてもいいですか？

A. 技術的には可能ですが、SWELLのブレイクポイントをむやみに増やすと管理が大変になります。特に、時間が経つと「この幅はいったい何用だったっけ？」と自分でも分からなくなることがあります。

私のおすすめは、次の方針です。

• 基本は「スマホ」「タブレット」「PC」「ワイドPC」の4区分に絞る
• それでも足りないケースだけ、ピンポイントでブレイクポイントを追加する

ルールがシンプルなほど、将来の自分や別の担当者にも優しいサイトになります。

まとめ

この記事のポイントを振り返っておきます

今日からできる最初の一歩としては、自分のサイトをブラウザで開き、ウインドウ幅をゆっくり動かしながら「600px付近」と「960px付近」で何が起きているかを観察してみてください。そのうえで、スマホで必ず見せたい情報と、PCに任せてもよい情報を書き出してみると、SWELLのブレイクポイントをどう設計するかが見えやすくなります。

一度に完璧を目指す必要はありません。sp_onlyやメディアクエリを少しずつ試しながら、自分のサイトにちょうどいいバランスを探していきましょう。