ブログの記事に料金表や比較表を入れたいのに、思ったように作れない…そんなモヤモヤを抱えていませんか。
私も自分のブログやクライアントサイトで、WordPressの表づくりに何度もつまずいてきました。
コードはよく分からないし、スマホで崩れそうで怖い、その気持ちは本当によく分かります。
先に結論を言うと、WordPressの表は「標準機能＋必要に応じてプラグイン」という組み合わせさえ押さえれば、初心者でも十分きれいで使いやすい表が作れるようになります。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
WordPressの表を使うと読みやすさが一気に上がる話
ここでは、そもそもなぜWordPressの記事に表を入れると読みやすくなるのか、イメージしやすいように整理します。
表があるだけで一瞬で違いが伝わる
長い文章を読むのが得意な人ばかりではありません。私もスマホで記事を読むときは、ずらっと文字が並んでいるより、パッと見で比較できる表があるとホッとします。
同じ内容でも、文章だけの場合と、表でまとめた場合では、読者の「分かった気になるまでの時間」が全然違います。
ざっくり言うと、こんなイメージです。
| 状態 | 読者の感じ方 |
|---|---|
| 文章だけで料金や特徴を説明している | どこを読めばいいか分からず、読み飛ばしやすい |
| WordPressの表で料金や機能をまとめている | 一目で違いが分かり、「自分に合うもの」が選びやすい |
ブログやサービスサイトで、料金表やプラン比較、機能一覧などをWordPressの表で見せてあげると、読者の迷いが減り、申し込みやお問い合わせにもつながりやすくなります。
WordPressの記事で表が活躍する代表的なシーン
WordPressの表が特に役立つ場面を、少し具体的に挙げておきます。
- サブスクやサービスの料金表をすっきり見せたいとき
- 複数プランや商品の違いを分かりやすく比較したいとき
- セミナーの日程や店舗の営業時間を一覧にしたいとき
- チェックリストや手順書を整理して見せたいとき
こういった情報を文章だけで書こうとすると、どうしても「長くて読みづらい説明文」になりがちです。
そこで、WordPressの記事の中に表をうまく混ぜてあげると、読む側のストレスをかなり減らせます。
表を入れすぎるデメリットも知っておく
とはいえ、ページのあちこちに表が並んでいると、それはそれで読むのが大変です。
- 1画面に表が2つ以上あると、どれを見ればいいか迷いやすい
- スマホの小さな画面だと、細かい表が続くとスクロールがしんどい
- 本文と関係が薄い表は、「飾り」に見えてしまう
大事なのは、「ざっくりした説明は文章で、細かい比較や一覧は表で」という役割分担を意識することです。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
WordPressの表を作る5つのパターンを比較しよう
ここからは、WordPressで表を作る代表的な方法を5つ紹介し、それぞれの特徴をざっくり整理します。
パターン1：テーブルブロック（標準機能）で作る
ブロックエディターを使っているなら、テーブルブロックを追加するだけでWordPressの表が作れます。
手順はかなりシンプルです。
- 投稿または固定ページの編集画面を開く
- 本文中で「＋」ボタンを押す
- 「テーブル」や「table」と検索してブロックを追加する
- 行数と列数を指定して作成する
- セルに文字を入力していく
テーブルブロックのざっくりした特徴をまとめると、次のような感じです。
| 項目 | 内容 |
|---|---|
| 難易度 | やさしい。基本はクリックと入力だけでOK |
| 向いている表 | 料金表、簡単な比較表、小さめの一覧 |
| 強み | プラグイン不要で、テーマとの相性も取りやすい |
| 弱み | 複雑な表や細かいデザインには少し不向き |
最初の一歩としては、この標準機能から慣れていくのがおすすめです。
パターン2：Excel・スプレッドシートからコピーする
すでにExcelやGoogleスプレッドシートで表を作っているなら、それをWordPress側に持ってくる方法もあります。
基本の流れはこんなイメージです。
- Excelやスプレッドシートで、使いたい範囲をコピーする
- WordPressの編集画面で、テーブルブロックを挿入するか、そのままペーストする
- 必要に応じて、文字サイズやセルの幅を整える
シンプルな表であれば、元の形に近い状態で貼り付けられます。
ただ、細かい装飾や罫線デザインは崩れることも多いので、「大まかな形を引き継ぐ」くらいに考えておくとストレスが少ないです。
パターン3：プラグインで高機能なWordPressの表を作る
データ量が多かったり、並べ替えや検索などの機能がほしい場合は、プラグインの出番です。
代表的なプラグインの例を挙げておきます。
- TablePress
- WP Table Builder
- テーブル系のブロックを増やすプラグイン
プラグインを使うと、次のようなメリットがあります。
- 専用の管理画面で表をまとめて管理できる
- ショートコードで好きな記事・好きな位置に挿入できる
- 並べ替えや検索、ページ送りなどの便利機能が使えるものもある
大きめの一覧表や、何度も使い回したい表があるなら、早めに検討しておきたい方法です。
パターン4：HTMLで<table>タグを書いて作る
HTMLに慣れている人は、カスタムHTMLブロックで<table>タグを書いて表を作る方法もあります。
このやり方だと、次のようなことができます。
- 列幅をCSSで細かく指定する
- 複雑な行・列の結合レイアウトにチャレンジする
- 独自のクラス名を付けて、共通のデザインを当てる
自由度はとても高いのですが、コードの量も増えます。
HTMLやCSSにあまり触ったことがない場合は、無理にここから始めず、テーブルブロックやプラグインを先に試すのがおすすめです。
パターン5：画像として表を見せる方法
デザインをとことん作り込みたいときは、画像として表を作り、それをWordPressの記事に貼るという手もあります。
- デザインソフトやスプレッドシートで表を作る
- 画像として書き出す
- 画像ブロックとして記事に挿入する
この方法なら、フォントや配色、アイコンの配置などをかなり自由に決められます。
ただし、画像の中の文字はコピーできませんし、検索エンジンにも内容が伝わりにくいです。
重要な数字や結論は、本文側にもテキストで書いておくのがおすすめです。
5つのWordPressの表の作り方をまとめて比較
ここまでの5パターンを、ひと目で比べられるように表にまとめます。
| 作り方 | 難易度 | おすすめ度 | 主な用途 |
|---|---|---|---|
| テーブルブロック | やさしい | 高い | 料金表・簡単な比較表 |
| Excel・スプレッドシートからコピー | やさしい | 中〜高 | 既存の表をそのまま使いたいとき |
| プラグイン | ふつう | 高い | 大量データ・検索や並べ替えが必要な表 |
| HTMLで<table>を書く | ややむずかしい | 中 | 細かいデザインにこだわりたいとき |
| 画像として見せる | ふつう | 低〜中 | 見た目重視のデザイン表 |
自分のサイトの目的や、表の量をイメージしながら、どの方法が合いそうか考えてみてください。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
まずはWordPress標準機能で表を作ってみよう
ここでは、プラグインを入れなくても使える、WordPressのテーブルブロックの基本操作をまとめます。
テーブルブロックの追加手順
テーブルブロックで表を作る手順を、もう少し丁寧に書いておきます。
- 投稿・固定ページの編集画面を開く
- 本文の中で「＋」ボタンを押す
- 検索窓に「テーブル」と入力してブロックを追加する
- 最初に行数と列数を決めて「作成」をクリックする
- あとはセルごとに文字を入力していく
行数や列数は、あとから増やすことも減らすこともできます。
最初から完璧に決めようとせず、「とりあえず作ってから微調整する」くらいの気持ちでOKです。
行や列を増やしたり減らしたりするときの操作は、ざっくり次のとおりです。
| やりたいこと | どこを操作するか |
|---|---|
| 行を1つ増やしたい | 対象のセルを選んで、テーブル用ツールバーの「行を追加」 |
| 列を1つ増やしたい | 同じくセルを選んで「列を追加」 |
| 行や列を消したい | 対象のセルを選んで「行を削除」「列を削除」 |
| ヘッダー行を付けたい | 右側のブロック設定で「ヘッダー行」にチェック |
セルの結合もできますが、テーマとの相性やバージョンによって動きが変わることがあります。
最初のうちは、まずシンプルなレイアウトで慣れていくと安心です。
WordPressの表のデザインを整えるコツ
テーブルブロックには、簡単なデザイン変更の機能も用意されています。
- ストライプ（縞模様）のスタイルを選ぶ
- 行の背景色を変える
- 文字を太字にしたり中央寄せにしたりする
特に料金表や比較表では、次のような工夫が効きます。
- 一番おすすめの列だけ背景色を変える
- 重要な金額だけ太字にする
- 補足説明は小さめの文字にしてメリハリを付ける
こうして視線の「ゴール」をはっきりさせてあげると、WordPressの表がそのまま選びやすいナビゲーションになってくれます。
プラグインでWordPressの表をもっと便利にする
ここでは、プラグインを使ってWordPressの表をもう一段レベルアップさせる方法を紹介します。
TablePressで大きな表や一覧を管理する
TablePressのようなプラグインを入れると、専用の管理画面で表を作り、ショートコードで記事に挿入できるようになります。
たとえば次のような場面で役立ちます。
- 行や列がとても多い一覧表を載せたいとき
- 商品データベースのような表をいくつもの記事で使い回したいとき
- 読者に検索や並べ替えをしてもらいたいとき
作成の流れはイメージとしてはこのくらいです。
- プラグインをインストールして有効化する
- 管理画面の「TablePress」メニューから新しい表を作る
- セルにデータを入力する
- 表示用のショートコードをコピーする
- 記事の好きな場所にショートコードを貼り付ける
こうしておけば、あとから表の中身を編集しても、ショートコードを置いたすべての記事に変更が反映されます。
【稼げるキーワード教えます】
▼ ▼ ▼
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
ドラッグ＆ドロップ型プラグインでデザイン重視の表を作る
WP Table Builderのようなドラッグ＆ドロップ型のプラグインは、グリッド状の画面に要素をポンポン置いていく感覚で表を作れます。
セルの中にボタンや画像、アイコンなども入れられるので、料金プランの比較やランディングページの表と相性がいいです。
「見た目もちゃんとこだわりたい」「ノーコード寄りで表をデザインしたい」という人には、このタイプのプラグインが向いています。
WordPressの表用プラグインを選ぶときのチェックポイント
テーブル系のプラグインは数が多いので、選ぶときのチェックポイントを簡単にまとめておきます。
| チェック項目 | 見るポイント |
|---|---|
| 更新状況 | 長くメンテナンスされているか、最近も更新されているか |
| レスポンシブ対応 | スマホ表示に関する設定が用意されているか |
| 機能 | 並べ替え・検索・ページ送りなど、必要な機能があるか |
| 操作性 | 実際に触ってみて直感的に使えそうか |
| 日本語情報 | 使い方の記事や解説が日本語で見つかるか |
このあたりを見ながら候補を絞っていくと、「入れてみたけれどよく分からない」という失敗を減らせます。
スマホでも見やすいWordPressの表の作り方
ここでは、スマホ表示を意識したWordPressの表づくりのポイントをまとめます。
列を減らす・情報を分ける考え方
パソコンでちょうどよく見える表でも、スマホでは横幅が足りなくて窮屈に感じることが多いです。
そこで最初に見直したいのが、「本当に必要な項目だけに絞れているかどうか」です。
- 絶対に伝えたい項目だけ残す
- 補足的な説明は本文側でフォローする
- どうしても項目が多い場合は、表を2つに分ける
「せっかく作ったから全部載せたい」という気持ちは分かりますが、見る側にとっては情報が多すぎると逆に選びにくくなります。
横スクロールで見せるときのコツ
列を減らしてもまだ横に長い表は、横スクロールで見せる方法もあります。
テーマやプラグインの設定で用意されていることが多いので、機能一覧を一度チェックしてみてください。
設定のイメージを、よくあるパターンごとにまとめると次のようになります。
| やりたいこと | よくある設定例 |
|---|---|
| 横スクロールを有効にしたい | 「レスポンシブ」「横スクロール」などの項目をオンにする |
| スマホだけスクロールにしたい | 「小さい画面のみ」など、対象デバイスを選べる設定を使う |
| 横スクロールに気付きにくい問題をケアしたい | 表の上に「横にスライドできます」と一言添える |
ちょっとした一文ですが、「横にスライドできます」と書いてあるだけで、読者の戸惑いはかなり減ります。
行間・文字サイズ・配色で読みやすくする
WordPressの表は、内容だけでなく見た目も読みやすさに大きく関わります。
- 1セルに詰め込みすぎない
- 行間を少し広めにとる
- 背景色は薄め、文字色は濃い色にする
- 1つの表で使う色は2〜3色に抑える
特に料金表や比較表では、「強調したい列だけ色を付けて、他はシンプルにする」と視線の流れが自然になります。
目的別のWordPressの表デザイン例
ここからは、実際にどんなWordPressの表を作ればいいか、目的別にイメージできるようにしていきます。
料金表でプラン比較を分かりやすくする
料金表は、WordPressの表の中でも出番がとても多いパターンです。
シンプルな例を1つ出しておきます。
| プラン | 料金 | こんな人におすすめ |
|---|---|---|
| ライト | 1,000円 | まずはお試しで始めたい人 |
| スタンダード（おすすめ） | 3,000円 | しっかり使いたい個人や小さなチーム |
| プレミアム | 5,000円 | 高機能をフルで活用したい人 |
この表をベースにして、次のような工夫を加えるとさらに見やすくなります。
- 「おすすめ」プランの列だけ背景色を変える
- 各プランの下にボタンブロックで「申し込みはこちら」を置く
- 補足説明は表のすぐ下に簡単にまとめる
こうすることで、WordPressの表がそのまま申し込みへの導線として働いてくれます。
スペック比較表で商品の違いを伝える
ガジェットやツールのレビュー記事では、スペック比較の表がよく登場します。
作り方のイメージはシンプルで、行に「項目」、列に「商品名」を入れていきます。
- 数字の差が大きいところは太字にする
- 得意・不得意が分かれる項目にはひと言コメントを添える
- 細かな注意点は本文側でフォローする
読み手は「どれを選べば失敗しないか」を知りたいので、ただ数字を並べるだけでなく、「この商品はここが強い」といったニュアンスも一緒に伝えてあげると親切です。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
スケジュール表・チェックリストとして使う
WordPressの表は、スケジュール管理やチェックリストにも向いています。
たとえば、左の列に「やること」、右の列に「期限」や「チェック欄」を入れるだけでも、立派なタスク管理表になります。
勉強法の記事や、ブログ運営の手順記事などで、自分が実際に使っている表に近い形を載せると、読者も真似しやすくなります。
WordPressの表をSEOとアクセシビリティの味方にする
ここでは、検索エンジンと読みやすさの両方の観点から、WordPressの表で意識しておきたいポイントをまとめます。
見出し・キャプション・本文とのバランスを取る
表にすべての情報を詰め込みすぎると、検索エンジンにも読者にも意図が伝わりにくくなります。
- H2やH3の見出しで「この表は何の表か」を一言で示す
- 表のすぐ前後で、ざっくり内容を文章でも説明する
- 必要なら「この表の見方」を1〜2行で書いておく
こうして役割分担をはっきりさせることで、WordPressの表が記事全体の流れの中で、何をしているのかが分かりやすくなります。
画像の表を使うときの注意点
画像として作った表をWordPressの記事に貼るときは、次の点に気を付けましょう。
- 代替テキストに、表の内容をかんたんに書いておく
- 本文中に、重要な数字や結論をテキストでも書いておく
- 画像の表だけに頼らず、必要に応じてテーブルブロックも併用する
画像だけでは読み上げソフトなどに内容が伝わらず、アクセシビリティの面で弱くなります。
SEOの観点からも、テキストとして残したい情報はできるだけ文章で補っておくと安心です。
運用を楽にするちょっとした習慣
WordPressで表をたくさん使うようになると、あとからの修正や更新の回数も増えていきます。
運用を少しでも楽にするために、次のような習慣を付けておくと便利です。
- 同じ種類の表は、できるだけ同じ並び・同じ項目で作る
- よく使う表は、下書きやテンプレートとして保存しておく
- プラグインで作った表は、どの記事に埋め込んだかメモしておく
こうしておくと、表のデザインを少し変えたくなったときや、料金改定などのタイミングでも、落ち着いて対応できます。
よくある質問
最後によくいただく質問を、Q&A形式でまとめておきます。
Q1. WordPressの表で列幅がうまく揃いません。どうしたらいいですか？
A. テーブルブロックの場合、テーマや画面幅によって列幅の挙動が変わることがあります。
そのため、きっちり同じ幅にそろえるのは難しいケースも少なくありません。
次のような工夫を組み合わせてみてください。
- 各列の中身（文字数や改行）をできるだけそろえる
- 長い文章は2行に分けて読みやすくする
- どうしても揃えたい表は、プラグインやHTMLで作る
完璧を目指すより、「大きく崩れていないか」を基準に調整していくと気が楽になります。
Q2. WordPressの表がスマホで横にはみ出してしまいます
A. 多くの場合、列が多すぎるか、1セルに入れている文字数が多すぎることが原因です。
まずは次の順番で見直してみてください。
- 列数を減らせないか、思い切って削る
- 不要な説明文を本文側に移す
- プラグインやテーマの「レスポンシブ」「横スクロール」設定を確認する
- 表の近くに「横にスライドできます」と書いておく
これだけでも、多くのWordPressの表はかなり見やすくなります。
Q3. 初心者におすすめのWordPressの表の作り方はどれですか？
A. 私のおすすめは、次のように段階を踏んでステップアップする方法です。
- まずはテーブルブロックで、シンプルな料金表や比較表を作る
- 次に、Excelやスプレッドシートからコピーする方法も試してみる
- 表の数が増えてきたら、管理しやすさを考えてプラグインを導入する
いきなり難しい方法に挑戦するより、「標準機能で慣れてから、必要に応じてプラグインを足す」という流れの方が、無理なくWordPressの表を使いこなせます。
まとめ
この記事のポイントをコンパクトにまとめます。
- WordPressの表は、料金表・比較表・一覧表などで読みやすさを一気に上げてくれる
- 作り方は「テーブルブロック」「Excel・スプレッドシートからコピー」「プラグイン」「HTML」「画像」の5パターンが基本
- まずは標準のテーブルブロックで慣れ、必要に応じてプラグインで機能やデザインを強化する
- スマホでの見やすさを意識して、列を減らす・横スクロールを使う・配色をシンプルにすると良い
- 表と本文の役割分担を意識すると、SEOやアクセシビリティの面でも安心できる
今日からできる最初の一歩としては、「自分のサイトで一番読まれている記事を1つ選び、その中にシンプルな料金表か比較表をテーブルブロックで1つ作ってみること」です。
大がかりな準備はいりません。小さなWordPressの表を1つ増やすところから、少しずつ自分なりの型を育てていきましょう。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
