SWELLのテーブルブロックで綺麗な表を作る方法とは

ブログやサイトで表を使いたいのに、SWELLのテーブルブロックをうまく使いこなせず、なんとなく野暮ったい表になってしまう…という相談をよく受けます。

この記事では、SWELLの表やテーブル機能をちゃんと使いこなして綺麗な表を作る方法をお伝えします。

結論から言うと、SWELLの表・テーブルブロックを一通り理解しておけば、プラグインを増やさなくても、かなり本格的な比較表や料金表を作れます。

SWELLの表・テーブルを使いこなすと何が変わる？

SWELL テーブルでできることをざっくり整理

まずは「やりたいこと」と「どの機能を使うと近道か」をセットで見ていきます。

やりたいこと	使うSWELLの機能	一言ポイント
商品を横並びで比較したい	テーブルブロック＋比較用パターン	比較表パターンをベースに中身だけ入れ替えると楽です。
料金表を見やすく並べたい	テーブルブロック＋ストライプ＋強調行	行ごとの色分けで、違いがひと目で伝わります。
メリット・デメリットを整理したい	テーブルブロック＋左右2列レイアウト	左右に分けるだけで、頭の中がかなり整理されます。
長い表をスマホで見やすくしたい	横スクロール＋1列目固定の設定	比較軸を固定すると、迷子になりにくくなります。

こんな感じで、SWELLの表やテーブルは「ただの表」ではなく、比較表や料金表など、よく使うパターンをしっかり支えてくれる機能がそろっています。

標準テーブルとの違いと、SWELLを使うメリット

WordPressの標準テーブルブロックだけでも簡単な表は作れますが、細かいところで「もう一歩ほしい」と感じることが多いです。

ざっくり比較すると、イメージはこんな感じです。

• 標準テーブル
  ・シンプルな表なら十分だが、デザインの選択肢は少なめ
  ・セルの装飾や結合など、細かいレイアウト調整は弱め
  ・スマホ表示用の設定が少なく、長い表は読みにくくなりがち
• SWELLの表・テーブル
  ・あらかじめパターンが用意されていて、すぐに実用的な形になる
  ・セル結合、背景色、アイコン、ボタンなど装飾の自由度が高い
  ・縦並びや横スクロール、1列目固定など、スマホでも読みやすくできる

私も以前は別のテーブル系プラグインを使っていましたが、SWELLの表を使うようになってから、「テーマだけで完結するのってこんなに楽なんだ」と実感しました。

プラグインが減ると表示速度の面でも不利になりにくいので、長く運営するブログほど恩恵が大きいと感じています。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

 

SWELL テーブルブロックで表を作る基本の流れ

SWELLで表ブロックを挿入する手順

まずは、テーブルブロックを呼び出して形にするまでの流れです。

ステップ	操作内容	ポイント
1	＋ボタンから「テーブル」を検索して選ぶ	ブロック検索に「テーブル」と入力するとすぐ出てきます。
2	行数と列数をざっくり決めて作成する	後から増減できるので、大まかに決めてしまってOKです。
3	セルにテキストを入力する	まずは中身を埋めて、あとで見た目を整えるイメージです。
4	右サイドバーでスタイルや色を選ぶ	雰囲気を見ながら、合いそうなスタイルを一度決めてしまいます。
5	スマホ表示の設定を確認する	縦並びか横スクロールか、実際にスマホプレビューで確認しましょう。

この5ステップを一通りなぞるだけでも、だいたいの表は形になります。

慣れてくると、「今日は比較表を1つ作ってみよう」といった感覚で、短時間で量産できるようになります。

行・列の追加とセル編集でつまずかないコツ

実際に表を作り始めると、「やっぱり列を増やしたい」「ここはセルをまとめたい」といった細かい調整が必ず出てきます。

そこでつまずかないために、よく触る操作だけ先に押さえておきましょう。

• 行・列の追加と削除
  ・テーブル内をクリックすると、上下と左右に行・列を追加するボタンが表示される
  ・いらない行は、その行を選んでゴミ箱アイコンから削除
  ・いったんざっくり組んで、あとから行・列を整理するくらいがちょうどいいです
• セルの結合と分割
  ・タイトル行など、横一列をまとめたいときは複数セルを選んで結合
  ・行方向にも結合できるので、説明文などを縦にまとめたいときにも使える
  ・結合を増やしすぎるとスマホで崩れやすいので、「見出しくらい」にとどめると安心です
• セルごとの装飾
  ・強調したいセルだけ背景色を変えると、視線を誘導しやすい
  ・セルの中にボタンや画像を入れて、アフィリエイトリンクやロゴを置くこともできる
  ・装飾をする前に、一度スマホ表示で行間やバランスを確認するクセをつけると失敗が減ります

このあたりの操作に慣れてくると、「あ、ここは表でまとめた方が伝わりやすいな」と発想できる場面が増えてきます。

 

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

SWELL 表デザインのパターンと実用テーブル例

比較表・料金表でよく使うレイアウト

よく使うテーブルレイアウトを用途別にまとめると、ざっくり次のようになります。

用途	列の構成イメージ	ポイント
商品比較表	商品名／画像／特徴／価格／ボタン	商品数は3〜4つくらいに絞ると読みやすいです。
料金プラン表	プラン名／料金／内容／おすすめ度	おすすめプランだけ背景色を変えて目立たせます。
メリット・デメリット表	メリット／デメリット	左右のバランスを意識して、どちらかだけ盛りすぎないようにします。
サービス機能一覧	機能名／対応の有無／補足説明	○×だけでなく、簡単な一言を足すと親切です。

SWELLには、こういったレイアウトに近いテーブルパターンが用意されているので、ゼロから組むよりもパターンを呼び出して編集する方がずっと楽です。

最初は「パターンを呼び出す → 必要な列・行だけ調整 → 色や文言を自分用に変える」という流れで慣れていくのがおすすめです。

色・アイコン・ボタンで「読まれる表」にするコツ

同じ内容でも、色やアイコン、ボタンの使い方ひとつで、表の印象はガラッと変わります。

ただ、やりすぎると一気にチラついた見た目になるので、少し控えめくらいがちょうどいいです。

SWELLの表は見た目をいじりやすいぶん、「足すより減らす」意識を持っておくと、結果的にプロっぽい落ち着いたデザインに近づきます。

 

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

1. センスが必要
2. 文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

SWELL テーブルの便利機能とスマホ表示のコツ

横スクロール・1列目固定などスマホ向け設定

長めの比較表を作るときは、スマホ用の表示モードをどうするかがかなり重要です。

代表的な設定を表で整理しておきます。

設定項目	効果	使うときのイメージ
縦並び表示	各行をカードのように縦に積み上げる	商品数が少なく、1つ1つの情報量が多いときに向いています。
横スクロール表示	表全体を横にスワイプして閲覧できる	3つ以上の商品やプランを比較するときに便利です。
1列目固定	横スクロールしても1列目だけ固定される	比較軸を見失わずに済むので、行数の多い表と相性がいいです。
ヘッダー行の固定	スクロールしても一番上の項目名を表示し続ける	項目名を覚えにくい専門的な表で特に役立ちます。

私がよく使う組み合わせは、「PCは通常の表表示」「スマホは横スクロール＋1列目固定」です。

これだけでも、「今どの項目を見ているのか」が分かりやすくなり、ストレスをかなり減らせます。

読みやすさ重視のテーブル設計

SWELLの表は詰めようと思えばいくらでも情報を詰め込めるので、気づくと「情報ぎっしりで読みにくい表」になりがちです。

読みやすさを残したまま情報を載せるために、次の点を意識してみてください。

• セル内のテキスト量を絞る
  ・1セルの文章は、できれば1〜2行以内におさめる
  ・どうしても説明が長くなる場合は、テーブルの下に補足を書く
  ・箇条書きは便利だが、セルの中に3つ以上並べると一気に窮屈になる
• 行・列の数を決めるときの考え方
  ・比較する商品やサービスは、多くても3〜4つくらいにしておく
  ・比較軸も、「読者が本当に気にするポイント」に絞る
  ・自分が詳しいほど項目を増やしたくなるので、読み手目線で少し削るくらいがちょうどいい
• 余白と行間を意識する
  ・行間を少し広げるだけで、印象がグッと読みやすくなる
  ・罫線で区切りすぎるより、余白で区切る方がスッキリ見えることが多い
  ・色を増やす前に、まず余白を調整してみると、意外とそれだけで解決することもあります

SWELLのテーブル機能は「情報を載せる力」が強い分、「どこまで載せるか」の線引きを自分で決めておくと、ブレない表を作れるようになります。

SWELL 表・テーブルで成果を出す書き方のポイント

アフィリエイト向けの比較表の作り方

アフィリエイトで成果を出す比較表を作るとき、まず考えたいのは「どの軸で比べると読者が選びやすくなるか」です。

代表的な比較軸を整理しておきます。

比較軸	優先度の目安	コメント
料金・コスパ	高い	多くの読者がまずチェックするポイントです。
安全性・信頼性	高い	サービス案件では必須の比較軸です。
機能・サービス内容	中〜高	違いが分かる程度に、ざっくりまとめれば十分です。
キャンペーン情報	中程度	変わりやすいので、シンプルな書き方を心がけます。
デメリット	高い	あえて書くことで、逆に信頼感が高まります。

アフィリエイト案件の表をSWELLのテーブルで作るときは、だいたい次の順番で考えると組み立てやすいです。

• 読者が一番気にしているポイントを決める
  ・ダイエット系なら「続けやすさ」「安全性」
  ・転職系なら「求人数」「サポートの手厚さ」など
• 比較しないと違いが見えないポイントを追加する
  ・料金やキャンペーンなど、数字や条件で差が出るところ
• 最後にデメリット行を1つ入れる
  ・欠点もきちんと書くことで、「ちゃんと比較してくれている」と感じてもらいやすくなる

そして、SWELLのテーブル内に「公式サイトを見る」「体験談を読む」などのボタンを入れておくと、次のアクションにつなげやすくなります。

企業サイト・LP向けテーブルのポイント

企業サイトやLPでSWELLの表を使うときは、アフィリエイトとは少し違う視点も必要になります。

• 料金表は「迷わない構成」を最優先にする
  ・プラン数は3つ前後に絞り、「おすすめプラン」を1つだけ強調する
  ・料金に関する注意書きは、テーブルのすぐ下にまとめておく
  ・「問い合わせ」や「見積もり依頼」のボタンを、テーブルのすぐ近くに配置する
• サービス比較表は、「強みが自然に目に入る」作りにする
  ・自社と主要な競合2社くらいの3社比較にするとまとまりやすい
  ・自社が優れている部分だけ、背景色やアイコンでさりげなく強調する
  ・露骨に競合を下げる書き方は避け、事実ベースで淡々と比べる
• 採用サイトなら、福利厚生や働き方の表も有効
  ・福利厚生の有無を表にすると、ぱっと見で魅力が伝わる
  ・リモート可否やフレックスの有無など、働き方の項目もテーブルで整理できる

同じSWELLの表でも、項目の選び方と強調の仕方を変えるだけで、「ブログっぽさ」から「企業サイトらしさ」まで雰囲気を調整できます。

 

---

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

1. 実際に10万稼いだキーワード
2. 今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

---

 

SWELL 表・テーブルに関するよくある質問

Q1. SWELL テーブルだけで十分？プラグインは不要ですか？

A. 一般的なブログやアフィリエイトサイトであれば、SWELLの表やテーブルだけで足りるケースがほとんどです。

比較表、料金表、メリット・デメリット表、機能一覧など、よく使う形はSWELLのテーブル機能でカバーできます。

専用プラグインを入れれば、より特殊な表やデータベース連携などもできますが、そのぶん管理が複雑になったり、サイトが重くなったりするリスクもあります。

特別な事情がなければ、まずはSWELLの表でどこまでできるか試してみて、それでも足りない場合にだけプラグインを検討する流れがおすすめです。

Q2. SWELLの表がスマホで崩れます。どう直せばいいですか？

A. まず、テーブルブロックのスマホ表示モードを見直してみてください。

縦並びにするか、横スクロールにするかによって、見え方はかなり変わります。

• スマホでの崩れを減らすチェックポイント
  ・表示モード（縦並び／横スクロール）を切り替えて試してみる
  ・セル内の文章を短くし、言い回しをシンプルにする
  ・セルの結合を多用していないか確認して、必要最低限にする
  ・表の中に大きすぎる画像を入れていないかチェックする

このあたりを調整するだけでも、多くのSWELLのテーブルはだいぶ読みやすくなります。

Q3. SWELL 表とリストはどちらを使うべきですか？

A. 「横に並べて比べたい情報」があるならSWELLの表、「順番に並べたいだけ」ならリスト、と覚えておくと判断しやすいです。

• SWELLの表が向いているケース
  ・A社とB社を比較したいとき
  ・複数の料金プランの違いを一度に見せたいとき
  ・メリットとデメリットを対比させたいとき
• リストが向いているケース
  ・やることリストやチェックリストを出したいとき
  ・注意点を列挙したいとき
  ・手順を1〜5の順番で説明したいとき

迷ったら、「今書こうとしている内容は、横に見比べられると分かりやすいか？」と自分に聞いてみてください。

見比べた方が分かりやすいならSWELLのテーブル、そうでなければリスト、くらいの感覚でOKです。

SWELL テーブル活用のまとめ

ここまでのポイントをまとめます

今日からできる最初の一歩としては、まず1つ、自分のサイトでよく読まれている記事に「SWELLのテーブルを使った比較表」を足してみてください。

最初はシンプルな表で大丈夫です。作ってみて、スマホで確認して、少しずつ色やアイコン、ボタンを足していくうちに、SWELLの表やテーブルに対する感覚がどんどんつかめてきます。

その経験がたまるほど、あなたのサイト全体が「読みやすくて、分かりやすくて、成果につながる」方向に育っていきます。

SWELLの表・テーブル機能を、ぜひあなたのサイトでも使い倒してみてください。

 

---

★初心者さん必見★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ