SWELLのテーブル幅の最適なサイズは？PCでもスマホでも読みやすいポイントとは

SWELLでテーブルを作ったのに幅がバラバラで落ち着かない、スマホで見ると表が画面からはみ出してしまう、そんなモヤモヤを感じたことはありませんか。

一言でまとめると、SWELLで作るテーブルは「幅の決め方」と「スマホ表示のクセ」を理解すれば、誰でも読みやすい表に整えられるというのが結論です。

SWELLのテーブル幅でよくあるつまずき

SWELLのテーブル幅でよくある悩みを整理しよう

よく聞く悩みをざっくり一覧にしてみました。自分がどれに当てはまりそうか、軽くチェックしてみてください。

状況	よくある悩み	ありがちな原因
2列の会社概要やプロフィール表	左の項目列だけ妙に広く、右の説明が窮屈に見える	テーブル幅をデフォルトのまま使っている
3列以上あるサービス比較表	PCでは何とか読めるが、スマホだとぐちゃっと崩れてしまう	スマホ表示モードと列数・幅のバランスが合っていない
料金表やプラン一覧	大事な金額情報が折り返されて読みづらい	列幅と文字量のバランス設計ができていない

私も最初に会社概要のテーブルを作ったとき、左の項目列だけスカスカで、右の説明列がギュウギュウに詰まってしまい、「なんかかっこ悪いな…」とかなり違和感を覚えました。

これから紹介するSWELLのテーブル幅の考え方を知っておくと、こうしたモヤモヤはかなり減らせます。

なぜデフォルトのままだと読みにくくなるのか

ブロックエディター標準のテーブルは、デフォルトではセルの中身の文字量に合わせて自動的に幅が変わるようになっています。そのままでも使えますが、列ごとに文章量や見出しの長さがばらついていると、その差がそのまま列幅の差になり、どうしても読みにくさが出てきます。

しかもSWELLは、スマホでも読みやすくするためのテーブル設定がたくさん用意されているので、何も考えずに触っていると「どこを触れば幅が変わるのか分からない」という状態になりがちです。

だからこそ、最初にSWELLのテーブル幅まわりのルールをざっくり理解しておくことが、きれいな表を作る近道になります。

SWELLテーブル幅の基本仕様と考え方

ブロックエディター標準のテーブルとの違い

WordPressのブロックエディター（Gutenberg）に最初から入っているテーブルブロックには、「表のセル幅を固定」というチェックボックスがあります。

これをオンにすると列の幅がそろい、オフのままだとセルの中身に合わせて自動で幅が変わる、というシンプルな動きです。

一方でSWELLは、この標準テーブルとは別に専用のテーブルブロックを備えています。

そこに「最低限維持する横幅」や「スマホで縦並び」「横スクロール」などの設定が追加されることで、見た目のきれいな比較表を作りやすくなっています。

そのぶん設定項目もそれなりに多いので、慣れないうちは「どこを触ればいいのか分からない」という状態になりやすいのが正直なところです。

SWELL独自のテーブル幅設定を押さえよう

SWELLのテーブルブロックには、テーブル幅に関係する設定がいくつかまとまって用意されています。代表的なものをざっくり表にするとこんな感じです。

項目名	ざっくりした意味	よく使うシーン
各列で最低限維持する幅	列が極端に細くなりすぎないようにする下限の幅	列数が多い比較表を作るとき
テーブル1列目の横幅	左端の列だけピクセル指定で幅を固定する	会社概要や料金表の項目名列を読みやすくしたいとき
スマホで縦並びに表示する	スマホでは行ごとにカードのように縦に積んで表示する	2列の項目一覧やQ&Aテーブルなど
横スクロール設定	表全体を横方向にスワイプして見せる	列数が多い比較表やスペック表

ざっくり言うと、「各列で最低限維持する幅」と「テーブル1列目の横幅」でPCの見た目のバランスを取り、「スマホで縦並び」「横スクロール設定」でスマホの読みやすさを整える、という役割分担になっています。

この4つの考え方さえ押さえておけば、SWELLのテーブル幅まわりの悩みの多くはコントロールしやすくなります。

用途別におすすめのSWELLテーブル幅とレイアウト

会社概要・プロフィール用の2列テーブル

会社概要やプロフィールなど、左に項目名、右に説明文が入る2列テーブルはとてもよく使うパターンです。

この場合、PCでは左をやや狭く、右を広めに取ったほうが読みやすくなります。

パターン	PCの幅配分の目安	スマホでのおすすめ設定
ベーシック	左30％：右70％	「スマホで縦並びに表示する」をオン
コンパクト項目	左25％：右75％	縦並びに加えて行間を少し広めにする
長めの見出し	左35％：右65％	見出しを少し短く調整しつつ縦並びをオン

私の場合は、テーブル1列目の横幅に「250〜300px」前後を指定し、2列目は自動に任せることが多いです。

見出しの文字数が短いなら少し狭めに、長いなら少しだけ広げるくらいの感覚で調整してあげると、バランスが取りやすくなります。

スマホでは「スマホで縦並びに表示する」にチェックを入れておくと、左の項目→右の説明の順に縦方向へ並んでくれるので、一気に読みやすさが上がります。

比較表・料金表に向いたテーブル幅

サービス比較や料金プラン比較のように、3列以上のテーブルを使う場合は、PCでは「横スクロール前提にするか」「列幅のメリハリをつけるか」を決めておくと迷いにくいです。

列数	幅配分のイメージ	ポイント
3列	左30％・中35％・右35％	左を項目列にして少し狭くする
4列	項目25％・他25％ずつ	文字数をそろえてシンプルな比較にする
5列以上	各列で最低限維持する幅をオン	横スクロール設定との併用を前提にする

列数が増えるほど、1つ1つのセルの情報量を減らすことが大事になってきます。

テーブル幅の設定だけに頼らず、「1セルあたり何文字くらいまでにするか」をざっくり決めておくと、SWELLでのテーブル設計がぐっと楽になります。

スマホで崩れないSWELLのテーブル幅と表示モード

縦並びと横スクロールの使い分け

SWELLのテーブル設定には、「スマホで縦並びに表示する」と「横スクロール設定」という大きな2つの選択肢があります。

それぞれの向き不向きを整理すると、次のようなイメージになります。

表のタイプ	縦並びが向いているケース	横スクロールが向いているケース
2列テーブル	会社概要・Q&A・スペック一覧など	あまり使わない
3〜4列テーブル	重要度の高い列だけを残して見せたいとき	料金プランやサービス比較をしっかり見せたいとき
5列以上	項目をかなり絞らないと難しい	基本的に横スクロール前提で考える

ざっくり言うと、2列テーブルは縦並び、3列以上の比較表は横スクロール、という分け方をしておけば大きく外すことはありません。

縦並びを選ぶときは、「1行が縦に長くなりすぎていないか」「見出しと説明のペアがパッと見で分かるか」を意識してチェックしてみてください。

テーブル1列目の幅と固定のコツ

SWELLには、テーブル1列目の幅を指定する機能と、横スクロール時に1列目を左端に固定する機能の2つがあります。

うまく使うと、項目名が読みやすくなり、比較表の理解がグッと楽になります。

設定	使いどころ	注意点
テーブル1列目の横幅	項目名の列だけを少し広めに見せたいとき	値を大きくしすぎるとスマホで窮屈に感じる
1列目を左端に固定する	横スクロールする比較表	横スクロール設定をオンにしないと有効にならない

私のおすすめは、まずPCの表示で1列目の幅を少しだけ広げてみて、そのあとスマホのプレビューで窮屈になっていないか確認する流れです。

それでも見づらければ、思い切って1列目のテキスト自体を短くリライトすることも検討してみてください。テーブル幅だけで何とかしようとするより、結果的に読みやすくなることが多いです。

カスタマイズでSWELLのテーブル幅をもっと追い込む方法

CSSで列ごとの幅を指定する考え方

「このテーブルだけは、列ごとにきっちり幅を決めたい」という場合は、CSSでクラスを付けてしまうのが一番シンプルです。

流れとしては、だいたい次のような手順になります。

• テーブルブロックに分かりやすい追加クラス名を付ける
• テーマ側のスタイルシートや追加CSSに、そのクラス名に対して列幅を指定する

この方法なら、「この料金表だけ1列目を40％、2列目を30％…」といった、きめ細かいテーブル幅の調整も可能になります。

その代わり、SWELL側の「各列で最低限維持する幅」や「テーブル1列目の横幅」、ブロックエディター標準の「表のセル幅を固定」などと競合する場合があります。

カスタムCSSで幅をがっつり指定するときは、これらの設定をオフまたは最小限にしておくと、思わぬ崩れを防ぎやすくなります。

JavaScriptカスタマイズを使うときの注意点

さらに踏み込んだカスタマイズとして、JavaScriptでテーブルのセル幅を動的に調整する方法もあります。たとえば、画面幅に合わせて自動的に列の比率を変えたり、特定の条件のときだけ列を折りたたんだり、といったことも技術的には可能です。

ただ、JavaScriptでSWELLのテーブル幅をいじる場合は、テーマのアップデートや他プラグインとの相性で動かなくなるリスクもあります。

個人的には、「どうしても標準機能とCSSだけでは目的を達成できない」と感じたときの最終手段くらいにとどめておくのがおすすめです。

SWELLのテーブル幅でよくある質問

Q1. SWELLのテーブル幅の設定が効かないのはなぜですか？

A. 多くの場合、SWELL側とブロックエディター標準の設定がぶつかっていたり、別のCSSが優先されているのが原因です。

次のポイントを順番に確認してみてください。

• 標準テーブルの「表のセル幅を固定」がオンになっていないか
• SWELLの「各列で最低限維持する幅」と「テーブル1列目の横幅」を両方いじりすぎていないか
• 追加CSSでテーブルタグ全体に強めの幅指定をしていないか

このあたりを一度リセットしつつ、どの設定が効いているのかを1つずつ試していくと、多くの「テーブル幅が変わらない問題」は整理しやすくなります。

Q2. 比較表がSWELLの横スクロールでも読みづらいときはどうすればいいですか？

A. 列数が多すぎたり、1セルの文字が多すぎると、横スクロールにしても読みづらくなります。

テーブル幅だけで解決しようとせず、次のような工夫も試してみてください。

• 比較する項目を絞って列数を減らす
• 似た内容の列は統合するか、別の表に分ける
• 各セルの文章を短くまとめ、箇条書きをうまく使う

情報を整理したうえで横スクロールを使うと、SWELLのテーブル機能の良さがしっかり生きてきます。

Q3. SWELLのテーブル幅を変えたらCore Web Vitalsに悪影響はありますか？

A. 一般的な範囲でテーブル幅を調整するだけなら、Core Web Vitalsに大きな悪影響が出ることはあまりありません。

むしろ、テーブル幅を整えることでレイアウトのズレが減り、ユーザーの読みやすさが上がるケースのほうが多いです。

ただし、JavaScriptで複雑な処理を入れたり、非常に大きなテーブルを1ページに詰め込みすぎたりすると、表示速度などに影響が出る可能性があります。

「テーブルをいくつかのブロックに分ける」「本当に必要な情報だけ残す」といった工夫もセットで考えると安心です。

まとめ：SWELLのテーブル幅を整えて読みやすくしよう

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

今日からの最初の一歩としては、まず1つだけテーブルを選んで、PCの幅配分とスマホの表示モード（縦並びか横スクロールか）をじっくり調整してみてください。

「これは前より読みやすくなった」と思えるテーブルが1つ作れれば、その成功パターンを他の記事の表にもどんどん横展開していけます。