料金表を画像で載せていませんか？あとから困る4つの理由

開業するときに作った料金表。教室の雰囲気に合わせてデザインし、そのまま画像でホームページに載せた方もいると思います。

でも、レッスンを増やしたり、料金を少し見直したりすると、「数字を一つ変えたいだけなのに」と手が止まりませんか。

お知らせの文章や写真をご自分で更新できているなら、WordPressの「テーブル」ブロックで、小さな料金表を作れます。今日は公開中の画像を残したまま、別の下書きに2列の表を作るところまで。画像を急いで消す必要はありません。

画像の料金表で、あとから困りやすい4つのこと

1．値段一つの変更でも、画像を作り直す

「体験レッスンだけ500円変更したい」というとき、元のデザインデータを探して、画像を書き出して、アップロードし直すことになります。文字の表なら、該当する料金の欄を直接直せます。

2．スマホで、文字まで小さくなる

横に長い画像が画面に収まると、中の文字も小さくなりがちです。ただし、文字の表にすれば自動的に見やすくなるわけではありません。列を少なくし、短い言葉でまとめる工夫が必要です。

3．料金を文字として扱いにくい

画像の中の数字は、通常の本文と同じように選択・コピーできるとは限りません。スマホの読み上げ機能などでも、見出しと料金の関係が伝わりにくいことがあります。文字と見出し行で作る表は、その関係を伝える助けになります。

4．古い金額が残っても気づきにくい

画像の中の金額は、ページ内の文字検索では見つからないことがあります。料金を改定したとき、古い画像が残っていないか目で確かめる手間がかかります。文字の表でも、別ページの金額までは自動で変わりません。「どこに金額を載せているか」をメモしておきましょう。

説明図：画像の料金表と、文字の表の違い

最初に決めるのは、見た目より載せる情報

表に入れるのは、まず「コース名」と「料金」の2列だけにします。所要時間や持ち物、キャンセルの説明まで一つの表に詰め込まないのが、15分で進めるコツです。

以下は練習用の架空の写真教室です。実際のサービス内容や相場を示すものではありません。

見出し：コース｜料金（税込）

1行目：体験レッスン｜3,000円

2行目：基本レッスン｜6,000円

3行目：個別レッスン｜8,000円

表の下には「各コース1回分の料金です」と添えます。実際の教室では、税込・税別、1回・月額などを自分の料金に合わせてください。

説明図：練習用の写真教室の料金表

実画面：検証用下書きのフロントプレビュー。料金は架空例で、税込・各コース1回分です。

公開中のページを触らず、下書きで試す

管理画面で「投稿」から新しい記事を作り、タイトルを「料金表の練習・公開しない」にします。文章や画像を一つずつ追加する、いつもの編集画面（ブロックエディター）で進めます。

新しく練習用の記事を作れば、お客様が見る料金ページを変えずに作業できます。公開済みのページを「下書きに戻す」操作は使いません。

見慣れない専用編集画面や、文章とコードが混ざった画面になった場合は、変換や切り替えをせず止めましょう。

2列、3行の表を作る

本文のブロック追加「＋」から「テーブル」を検索し、WordPress標準のテーブルブロックを選びます。「カラム数」を「2」、「行数」を「3」にして「表を作成」を押し、3つのコースと料金を入力します。

次に表を選択し、右側のブロック設定で、表の先頭に見出しを付ける「ヘッダーセクション」をオンにします。追加された一番上の行に「コース」「料金（税込）」と入力してください。本文3行に見出し1行が加わった形になります。

画面の日本語や設定の位置は、WordPressのバージョンなどによって異なります。設定が見えないときは、表が選択されているか、右側が投稿全体ではなくブロックの設定かを確認します。

ここでいう見出しは、表の一番上の行です。文章の「見出し」ブロックとは別で、先頭の文字を太くするだけでなく、見出し行の機能を使います。今回は色や飾りはそのままで構いません。

実画面：標準のテーブルブロックで列数と行数を指定する欄。 検証用下書きでの例。画面のタイトルは説明用です。

実画面：見出し行の設定と、各コース1回分の注記を確認した最新版。

実画面を参考にした拡大説明図：「ヘッダーセクション」をオンにする位置を示します。原始スクリーンショットではありません。

幅を変える前に、スマホの読みやすさを確認

下書きで保存し、上部の「表示」から「新しいタブでプレビュー」を開いて確認します。編集画面へ戻ったら、同じ「表示」で「モバイル」を選びましょう。

見たいのは、コース名が細切れにならないか、料金の数字と「円」が離れて読みづらくないか、表の右端が隠れていないか。この3点です。

長いコース名は、意味が変わらない範囲で短くし、詳しい説明を表の外に移します。文字を小さくして押し込む前に、情報を減らしてみてください。見え方はテーマにも左右されます。

実際のスマホでも、同じ管理者としてログインできる環境なら、下書きのプレビューを確認します。編集画面のモバイル表示は目安です。確認のためだけにページを公開する必要はありません。

確認後は、編集画面の「表示」を「デスクトップ」に戻しておきましょう。

実画面：上部の「表示」メニュー。プレビューとモバイル表示をここから選びます。 検証用下書きでの例。画面のタイトルは説明用です。

実画面：ブラウザーの表示幅を狭くしたフロントプレビュー。スマートフォン実機での撮影ではありません。

うまくいかなければ、下書きのままで終えてOK

この段階では、公開中の料金画像はそのままです。入力を間違えたら該当する文字だけ直し、表の形を崩した直後なら編集画面の「元に戻す」で確認しながら戻します。戻し過ぎたら、隣の「やり直し」で一つずつ進めます。

表が画面からはみ出す、設定が見つからない、ブロックの修復を求められる。そんなときは修復などのボタンを押さず、画面とテーマ名を控えましょう。サイトを作った方がいなければ、テーマ提供元の案内で相談できる範囲を調べます。コードの追加や、新しいプラグインを入れる必要はありません。

画像からの差し替えは、内容と表示を確認してから別の時間に。差し替える前に元のページの内容を残し、元画像も削除せず保管しておきます。

同じテーブルは固定ページでも使えます。今日は「自分で金額を書き換えられる料金表の下書き」が一つできれば十分です。次の料金改定を楽にする準備を、15分から始めてみませんか。