SWELLのレスポンシブ対応とスマホ表示の基本｜押さえたい6つの視点

SWELLでサイトを作ったのに、スマホで見ると「なんかレイアウトが変」「文字が小さくて読みづらい」と感じていないでしょうか。

結論から言うと、SWELLのレスポンシブ対応はきちんとポイントさえ押さえれば難しくありません。

SWELLはレスポンシブ対応済み？まず全体像を整理しよう

SWELLのレスポンシブ対応でよくある勘違い

SWELLのレスポンシブ対応について、私も含めてよくある勘違いを表にまとめるとこんな感じです。

よくある思い込み	実際のSWELLと正しい理解
SWELLを入れた時点で、何をしてもスマホ最適化は自動で完璧	テーマとしての土台はレスポンシブ対応だが、画像やレイアウト次第で崩れることは普通にある
レイアウトが崩れたのは全部SWELLの不具合	追加CSSやプラグイン、テーブルや画像の幅指定が原因になっているケースがかなり多い
PCでキレイに見えていれば、スマホでもそのまま大丈夫	スマホは横幅がかなり狭いので、PCでは問題ない要素でも突然はみ出したり折り返しが変になったりする
メニューやヘッダーはとりあえず全部詰め込んでおけばOK	スマホではメニューが増えるほど迷いやすくなり、操作しにくくて離脱につながる
文字が小さいのは見る側のスマホ設定のせい	基本のフォントサイズや行間の決め方しだいで、読みやすさは大きく変わる

SWELLは、テーマとしてレスポンシブデザインが組み込まれているので、何もしていなくても「大きく崩れる」ということは少ないです。

ただ、そこに自分で追加した画像やテーブル、カラムレイアウトなどが乗ってくると、一気にスマホ表示が崩れやすくなります。

私も、最初は「テーマを変えれば全部自動で整う」と期待していましたが、実際には次の3つだけを意識して調整しただけで、スマホの読みやすさがぐっと良くなりました。

• 画像サイズと比率
• カラム数と情報量
• 文字サイズと行間

レスポンシブ対応がSEO・集客に効いてくる理由

レスポンシブ対応は「見た目が崩れていないかどうか」だけの問題ではありません。

検索結果から来た人が、スマホでどれだけストレスなく読めるかにも関わってきます。

ざっくり言うと、次のような理由で重要です。

つまり、SWELLのレスポンシブ対応を丁寧に整えることは、見た目だけでなく「読んでもらえるか」「行動してもらえるか」に直接つながります。

ここから先は、テーマ側の設定と記事側の作り方に分けて、具体的な改善方法を見ていきます。

SWELLでレスポンシブ対応を確認する基本設定（スマホ対応の土台）

カスタマイザーでSWELLのレスポンシブ対応をざっくりチェック

まずはWordPressのカスタマイザーから、PC・タブレット・スマホそれぞれの見え方をざっと確認します。

なんとなく全体を見るのではなく、「どの画面幅のときに何がどう変わるか」を意識して見るのがポイントです。

確認する画面	チェックしたいポイント
PCプレビュー	ヘッダーの高さ、ロゴの大きさ、グローバルメニューの項目数、横長のコンテンツがないか
タブレットプレビュー	2カラムレイアウトやサイドバーが窮屈になっていないか、ボタンやリンクが押しやすいか
スマホプレビュー	文字サイズと行間、余白のバランス、ボタンの押しやすさ、画像の大きさや比率

カスタマイザーで特に見直しておきたいのは次のような部分です。

• ロゴのサイズやヘッダー画像が、スマホで画面を占領しすぎていないか
• グローバルメニューの項目数が多すぎて、スマホで迷わないか
• サイドバーの表示位置（下に回すか、そもそも非表示にするか）

私がよくやるのは「スマホのファーストビューには、キャッチコピーとメインボタンが収まるくらいにする」という考え方です。

情報を詰め込みすぎず、「続きはスクロールしてもらう前提」で整理すると、スマホの見やすさがぐっと上がります。

ブロックエディタでの基本：文字サイズと行間を整える

テーマ側だけでなく、記事を書くときのブロックエディタの設定も、レスポンシブ対応に大きく関わります。

特に意識したいのは次の3つです。

• 本文の文字サイズを、スマホでも読みやすい大きさにする
• 行間を少しゆったりめにして、詰め込みすぎないようにする
• 見出しと本文のサイズ差で、メリハリをはっきりつける

ブロックエディタの段落ブロックでは、文字サイズと行の高さを個別に設定できます。

毎回調整するのが面倒な場合は、SWELLのカスタマイザーやエディタのスタイル機能を使って、ベースの文字サイズと行間をあらかじめ決めておくと楽です。

私の場合は、「スマホで長文を読んでも目が疲れにくいか」を基準に、少し大きめのサイズを採用しています。

画像とテーブル（表）の基本ルールを決めておく

レスポンシブ対応で一番崩れやすいのが、画像とテーブルです。

ここは記事ごとに考えるのではなく、あらかじめ「自分なりのルール」を決めておくと運用がとても楽になります。

要素	おすすめのルール例
本文中の画像	原則として横幅はコンテンツ幅いっぱいにして、必要以上に大きい画像は使わない
テーブル（表）	基本は3列以内にして、列が多くなる場合は行を分けるか別の見せ方を検討する
ボタン風の画像	画像でボタンを作り込むより、SWELLのボタンブロックを使う方がレスポンシブ的に安全
比較表	テキストを詰め込まず、アイコンや短いラベルで情報を絞ってシンプルに見せる

私も以前、比較表を細かく作り込みすぎて、スマホでは横スクロールしないと読めないページになってしまったことがあります。

それ以来、「列を欲張らない」「細かい装飾より情報の分かりやすさ」を意識して作るようにしたら、スマホでもかなり読みやすくなりました。

SWELLのレスポンシブ出し分け機能（PC/スマホで表示を変える）

デバイス制限で「PCだけ」「スマホだけ」表示を切り替える

SWELLには、ブロックごとに「PCだけ表示」「スマホだけ表示」を切り替えられるデバイス制限機能があります。

例えば、次のようなケースで役立ちます。

やりたいこと	設定のイメージ
PCだけに横長の比較表を見せたい	比較表ブロックをPC表示のみONにし、スマホには別のシンプルなリストを用意する
スマホだけに「今すぐLINEで相談」ボタンを出したい	ボタンブロックを作成し、スマホ表示のみONにする
PCとスマホで違うサイズのバナーを使いたい	画像ブロックを2つ用意し、それぞれPC用・スマホ用としてデバイス制限で出し分ける

この機能を使うと、次のような構成が作りやすくなります。

• PC版は情報量を増やしたリッチなレイアウト
• スマホ版は要点に絞ったシンプルで見やすいレイアウト

ただし、あれもこれも出し分けしすぎると管理が大変になるので、「本当に必要な箇所」に絞って使うのがおすすめです。

pc_only・sp_onlyクラスや改行の出し分けを使いこなす

SWELLには、特定のクラス名を使って、PCとスマホで表示をさらに細かく制御する方法も用意されています。

代表的なのが、次の2つのクラスです。

• pc_only：PC（とタブレット）だけに表示したい要素につけるクラス
• sp_only：スマホだけに表示したい要素につけるクラス

ブロックによっては、追加CSSクラスの欄にこれらのクラスを指定するだけで、簡単に出し分けができます。

また、文章中の改行を「PCでは改行」「スマホでは1行で表示」といった形で変えたい場面もあります。

その場合は、PCだけで改行させるショートコードと、スマホだけで改行させるショートコードを使い分けることで、読みやすさを調整できます。

例えば、キャッチコピーをPCでは1行、スマホでは2行にしたいといったケースに便利です。

こういった出し分け機能を使うときのコツは次の2つです。

• あとから自分で見ても分かるように、どのブロックがどのデバイス用かメモを残しておく
• 複雑になりすぎないように、重要な箇所だけに限定して使う

私も、出し分けを多用しすぎて「どこが何のためのブロックか分からなくなった」経験があります。

それ以来、「ここだけはPCとスマホで分けたい」という箇所に絞って使うようにしています。

SWELLのブレイクポイントとCSS調整で細かくレスポンシブ対応

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

ブレイクポイントとは、「画面幅がこのサイズを下回ったらレイアウトを切り替える」という境目のことです。

SWELLでも、一定の幅を境にレイアウトが変わるようになっています。

細かい数値を暗記する必要はなく、「画面幅が変わるとこんな動きになる」という感覚を持っておければ十分です。

例えば、次のようなイメージで考えると分かりやすいです。

PCブラウザの横幅をゆっくり縮めていくと、「どのタイミングでメニューがハンバーガーになるか」「どこでカラムが縦並びになるか」が分かります。

一度これを自分のサイトで試しておくと、「どの幅あたりで崩れやすいのか」が具体的にイメージしやすくなります。

追加CSSでレスポンシブ対応を微調整するときのコツ

「ここだけどうしてもスマホの見た目を変えたい」といった場面では、追加CSSを使うこともあります。

そのときに意識しておきたいポイントは次の3つです。

• まずはブロックの設定やSWELLの機能で解決できないか試してみる
• CSSを書くときは、影響範囲をできるだけ小さく限定する
• スマホだけに効かせたい場合は、メディアクエリを使って幅を絞る

例えば、スマホのときだけ特定のボックスの余白を減らしたい場合は、次のような流れで考えます。

• そのボックス専用のクラス名を付ける
• 「スマホ幅のときだけ」そのクラスの余白を変更するCSSを書く

サイト全体に効くようなCSS（例：すべての段落タグに対してサイズを指定するなど）を書いてしまうと、あとから大きな副作用が出がちです。

私も昔、「pタグの文字サイズを一括で指定してしまい、サイト全体の文字が予想以上に小さくなった」という失敗をしたことがあります。

それ以来、「広すぎる指定はしない」「ピンポイントだけに効くCSSを書く」というルールを自分に課しています。

SWELLでありがちなレスポンシブ崩れと対応策

レスポンシブ崩れの原因と対処フロー

よくある崩れ方と、その裏にある原因をざっくりまとめるとこんなイメージです。

よくある症状	主な原因の例	対処の考え方
スマホだけレイアウトが崩れる	追加CSS、プラグイン、テーブルや画像の幅固定など	追加CSSを一時的にコメントアウトし、怪しそうなプラグインを1つずつ停止して確認する
PCでは問題ないのに、スマホで横スクロールが出る	横幅固定の画像やテーブル、極端に長い単語やURL	画像・テーブルの幅を見直し、必要なら改行や短縮URLを使う
特定のスマホ機種だけ表示が変に見える	キャッシュやブラウザ表示、ビューポート関連の問題など	キャッシュ削除、別ブラウザやシークレットウィンドウで確認する
テーマやプラグインの更新後に崩れた	CSSの競合や仕様変更、カスタマイズとの相性	更新前後で何が変わったかを確認し、差分がありそうな箇所から順にチェックする
特定のページだけ崩れる	そのページ固有のレイアウトやカスタムHTML、ショートコード	問題のページだけ一度シンプルな構成に戻して、何を追加すると崩れるかを検証する

私が実践している簡単なチェックフローは次の通りです。

• ブラウザのキャッシュとキャッシュ系プラグインのキャッシュを削除する
• プラグインを一度すべて停止し、SWELLだけの状態で表示を確認する
• 追加CSSを一時的にコメントアウトしてみる
• それでも直らなければ、そのページのブロックを少しずつ削っていき、どのブロックが原因かを探す

この順番で切り分けていくと、「何となく不安だけ募る状態」から抜け出しやすくなります。

実際によくあるトラブルと、私がやったレスポンシブ対応

ここでは、私が実際にやらかした失敗と、そのときに行った対策をいくつか紹介します。

• 比較表を作り込みすぎて、スマホでは文字が小さく横スクロール必須になった

列を思い切って減らし、重要な情報だけ残して、細かい説明は本文でフォローする形に変えたら、スクロールなしで読めるようになりました。

• トップのメイン画像をテキスト入りの一枚画像にしてしまい、スマホでは文字がつぶれて読めない

背景だけをシンプルな画像に変え、テキストはブロックエディタの見出しや段落で入力する構成にしたところ、どの端末でも読みやすくなりました。

• PCでちょうどよかった文字サイズが、スマホでは小さくて読みづらかった

ベースの文字サイズを少し大きくし、見出しと本文の差をつけ直したところ、スマホでもストレスなく読めるようになりました。

このようなトラブルは、SWELLに限らずどのテーマでも起こり得ます。

大事なのは、「テーマが悪い」と決めつけるのではなく、「自分が足した要素のどこに原因がありそうか」を冷静に切り分けていくことだと感じています。

SWELLをレスポンシブ対応のまま高速化するポイント

スマホ表示を重くしないためのSWELL設定

スマホでの表示速度を落とさないために、私が意識しているポイントを整理すると次のようになります。

項目	考え方のポイント
画像のサイズ	必要以上に大きい画像をアップしない。アイキャッチ以外はほどほどのサイズに抑える
アニメーションや装飾	動きが多いとスマホでは読みづらいので、演出は最小限にする
スライダーやカルーセル	見栄えは良いが重くなりやすいので、枚数や設置箇所を絞る
不要なプラグイン	使っていない機能のプラグインは停止・削除して、できるだけ身軽に保つ
フォントの数	読み込みが増えすぎないよう、Webフォントは必要最小限にする

特に画像は、少し意識するだけで体感速度が変わります。

私も、以前は「とりあえず大きいサイズの画像をアップしておけば安心」と思っていましたが、適切なサイズに整理してからスマホでの読み込みがかなり軽くなりました。

UX（使いやすさ）から見たレスポンシブ対応チェック

レスポンシブ対応は、単に「崩れていないレイアウト」を作ることではありません。

スマホで「使いやすいかどうか」を一緒に考えることで、サイト全体の印象が大きく良くなります。

最後に、スマホで確認しておきたいポイントを一覧にしました。

チェック項目	見るポイント
ボタンの大きさと間隔	親指で押しやすいサイズか、隣のボタンを誤タップしないか
行間と文字サイズ	スマホで読んだときに「ぎゅうぎゅう詰め」の印象がないか
メニューの階層	階層が深すぎて、目的のページにたどり着くまでに迷わないか
ファーストビュー	最初に伝えたいメッセージと、押してほしいボタンがきちんと見えているか
フォームや問い合わせボタン	ページの目立たない場所に埋もれていないか、タップしやすい位置にあるか

私は記事を書き終えたら、必ずスマホで自分のページを開き、最初の数画面だけはしっかり確認するようにしています。

ファーストビューから数スクロール分の印象で、「読むか閉じるか」がほぼ決まると感じているからです。

よくある質問（SWELL レスポンシブ 対応のQ&A）

Q1. SWELLは設定しなくてもレスポンシブ対応されていますか？

A. テーマとしての基本的なレスポンシブ対応はされていますが、それだけで完璧というわけではありません。

画像やテーブル、レイアウトの組み方しだいで、SWELLでもスマホ表示が崩れることは普通にあります。

この記事で紹介したように、カスタマイザーでの確認やブロックの設定を少し見直すだけでも、レスポンシブ対応の精度はかなり上がります。

Q2. SWELLでレスポンシブ対応をするには、CSSの知識は必須ですか？

A. 基本的なレスポンシブ対応を整えるだけなら、CSSの知識は必須ではありません。

デバイス制限やpc_only・sp_onlyクラス、ブロックエディタの設定だけで、かなりの部分はカバーできます。

どうしても細かい見た目を変えたい箇所が出てきたときに、必要な分だけCSSを覚えていけば十分です。

Q3. 他のテーマからSWELLに変えたら、レスポンシブ崩れが増えました。どうすればいいですか？

A. 他のテーマで作ったレイアウトやカスタムCSSが、SWELLのスタイルと噛み合っていない可能性があります。

まずは、崩れているページだけをシンプルな構成に戻して、SWELLの標準ブロックだけで組んでみてください。

それで問題が解消するようであれば、元テーマ時代のCSSやショートコードが原因の可能性が高いので、少しずつ置き換えていくと良いです。

それでも崩れる場合は、プラグインや追加CSSがSWELLのレスポンシブ対応を邪魔していないか、この記事で紹介した順番で切り分けていくのがおすすめです。

まとめと今日からできる一歩

この記事のポイントを整理しておきます

今日からできる最初の一歩としては、次の3つをおすすめします。

• カスタマイザーのスマホプレビューで、トップページとよく読まれている記事をチェックする
• 「文字の大きさ」「行間」「ボタンの押しやすさ」だけに絞って、気になる点を書き出す
• そのメモをもとに、ブロックエディタやSWELLの設定で直せる箇所から一つずつ修正してみる

いきなりサイト全体を完璧にしようとする必要はありません。

よく見られているページから少しずつ整えていくだけでも、SWELLのレスポンシブ対応は着実に良くなっていくので、肩の力を抜いて取り組んでみてください。