料金表やメニュー表を一枚の画像で掲載していると、「見た目は整っているが、スマートフォンでは文字が小さい」「価格変更のたびに画像を作り直す」といった問題が起こります。見直す際は、金額・プラン名・対象範囲・注意条件など、利用者の判断に欠かせない情報をHTMLの文字、つまりWebページ上で選択・検索できる通常のテキストへ戻し、更新の基準となる正本にします。画像は雰囲気づくりや補助説明へ役割を絞るのが基本です。
すべてを一度に作り直す必要はありません。スマートフォンで読めない箇所を先に直し、更新頻度の高い情報ほど画像から分離すると、費用と更新負担を抑えながら改善できます。この記事では、HTML、画像、PDFの使い分けと、制作会社へ依頼する前の確認事項まで順に整理します。
料金表を画像だけで載せると起きる困りごと
パソコン向けに作られた横長の料金表画像は、スマートフォンでは画面幅に合わせて縮小されます。画像全体は収まっていても、文字まで小さくなるため、利用者は指で拡大し、左右へ動かしながら金額や条件を探さなければなりません。見出しと注記を同時に見られず、どのプランに対する条件なのか分からなくなることもあります。
画像内の文字は、通常の本文のように選択やコピーができません。ブラウザのページ内検索でプラン名を探したり、金額をメモへ貼り付けたりする使い方にも向きません。画像の中に電話番号や問い合わせボタンを描いても、その部分自体はリンクにならないため、別の場所に操作できる導線が必要です。
運用する側にも負担が残ります。価格を一か所変更するだけでも、元データを開き、文字を直し、画像を書き出し、WordPressへ再登録して差し替える作業が発生します。元データや使用フォントが見つからなければ、見た目を再現するところからやり直さなければなりません。更新担当者が画像編集ソフトを使えない場合は、軽微な変更のたびに制作会社への依頼が必要になります。
料金表画像が複数ページに使われていると、差し替え漏れも起こりやすくなります。トップページでは新料金、サービスページでは旧料金という状態になれば、利用者はどちらを信じればよいか判断できません。HTMLの文字を正本にしておけば、更新箇所をCMS（WordPressなど、ページ内容を編集する管理システム）上で管理しやすくなり、公開前の確認範囲も明確になります。
代替テキストを入れれば解決するわけではない
画像に設定する代替テキストは、その画像を見られない状況で内容や目的を伝えるためのものです。しかし、料金表の全項目を代替テキストへ詰め込んでも、行と列の関係、プランごとの比較、注記との対応、申込リンクまでは通常の表と同じように扱えません。文字の大きさや行間を利用者が調整することも難しいままです。
W3CのWCAG 2.2達成基準1.4.5（レベルAA）の解説では、使っている技術で同じ視覚表現を実現できる場合、情報は画像化した文字ではなくテキストで伝えることを基本としています。特定の見た目そのものが情報に不可欠な場合などは例外ですが、一般的な料金表はHTMLとCSS（表示やレイアウトを整える仕組み）で表現できることが多いでしょう。出典
料金表をきっかけに、画像、見出し、フォームなどサイト全体の確認へ広げたい場合は、ホームページ全体のアクセシビリティ改善順序も判断材料になります。
残す情報とHTMLの文字へ戻す情報を分ける
見直しの中心は、「画像を残すか消すか」ではなく、「どの情報を正本として管理するか」です。利用者が契約、予約、購入、問い合わせを判断するために読む内容は、HTMLの文字としてページ上に置きます。具体的には、プラン名、金額、税込・税別の別、対象範囲、回数や期間、追加料金が発生する条件、注記、問い合わせ先です。
HTMLに戻すといっても、すべてを表にする必要はありません。料金が一つだけなら、見出しと数行の文章のほうが読みやすい場合があります。複数プランを同じ項目で比べるなら表が適しています。スマートフォンで横に広がりすぎるときは、項目を減らすのではなく、プランごとの縦並びや、重要項目を先に示す構成も検討します。
画像に残しやすいのは、サービスの雰囲気、利用場面、完成イメージ、プラン同士の関係を直感的に示す図などです。ただし、その画像を見なくても金額と条件が分かる状態にしておきます。画像内に短いコピーを入れる場合も、判断に必要な内容を画像だけへ閉じ込めないことが境界になります。
PDFは、印刷して持ち歩く資料、社内で回覧する正式な料金表、ページ数のある詳細資料に向いています。一方、スマートフォンでその場で比較する入口としては負担が大きいため、ページ本文に要点を置き、PDFは持ち帰り用の補助資料として案内する使い方が現実的です。PDFとページ本文で価格が分かれないよう、更新元と確認担当も決めます。
| 形式 | 向いている内容 | 注意点 | 更新方法 |
|---|---|---|---|
| HTMLの表 | 複数プランを同じ項目で比較する料金表 | 横幅と読み順をスマートフォンで確認する | CMSの表や専用入力欄を編集する |
| 通常の文章 | 単一料金、短い条件、補足説明 | 比較項目が増えると探しにくくなる | 本文ブロックを編集する |
| 画像 | 雰囲気、利用場面、補助図、装飾 | 重要情報を画像内だけに置かない | 必要時のみ画像を差し替える |
| 印刷、保存、回覧に使う詳細資料 | 本文にも判断に必要な要点を載せる | 元データから再出力し版を管理する |
この表では、利用者がその場で判断する情報か、保存して後から読む資料かを分けてください。判断情報はHTML、視覚的な補助は画像、持ち帰り資料はPDFという役割にすると、掲載形式を選びやすくなります。
デジタル庁の「ウェブアクセシビリティ導入ガイドブック」は、アクセシビリティに初めて取り組む行政官や事業者を主な対象とし、スマートフォン対応や発注・受託時のコミュニケーションも扱っています。専門的な達成基準の確認だけでなく、誰がどの工程で確かめるかを依頼条件へ落とす視点が参考になります。出典
掲載形式を変える前に、プランの違いや注記そのものを整理したい場合は、料金表に載せる内容と伝え方の整理で項目の過不足を確認しておくと、HTML化した後の構成を決めやすくなります。
全部を一度に直せないときの改善順序
予算やCMSの制約がある場合は、画像内の情報を三つの視点で並べます。優先するのは、スマートフォンで読めない重要情報、変更頻度が高い情報、問い合わせの判断に強く影響する情報の順です。装飾や補助説明は後に回しても、利用者の判断を妨げにくいためです。
拡大しないと読めない重要情報から文字へ戻す
最初の対象は、金額、プラン名、対象範囲、追加費用の条件、契約期間、申込・問い合わせ先です。これらが読めないと、利用者は自分が対象か、いくらかかるか、次に何をすればよいかを決められません。
現行画像を残しながら、その直下へ同じ内容をHTMLで掲載する方法でも改善は始められます。この段階では画像と本文の二重管理になるため、「以後はHTMLを正本とし、画像内の価格は更新対象にしない」など、運用上の基準を決めてください。可能であれば画像から金額を外し、雰囲気やプランの特徴だけを示すものへ差し替えます。
変更頻度の高い項目を画像から分離する
キャンペーン価格、追加料金、受付時間、提供条件など、変更のたびに問い合わせや差し替えが発生する項目は、CMSで編集できる文字へ移します。反対に、長期間変わらない写真やイメージ図は画像のままでも支障が出にくい部分です。
更新頻度が高い箇所だけ専用入力欄にすると、担当者はデザインを崩さずに数字を変更できます。誰でも自由にレイアウトを触れる状態より、プラン名、価格、注記など編集項目を限定したほうが、公開後の運用は安定します。
問い合わせ前の迷いを減らす情報を整える
料金だけを大きくしても、「どこまで含まれるか」「自社はどのプランか」が分からなければ、判断は進みません。対象者、含まれる作業、含まれないもの、追加料金が発生する条件を、金額の近くへHTMLで配置します。問い合わせボタンには、電話、フォーム、予約など実際に操作できるリンクを設定します。
改善方法は、現状に応じて選びます。画像の見た目を当面残したい、またはCMSで表を作れないなら「画像と本文の併用」が着手しやすい方法です。比較項目が整理できており、更新も多いなら「HTML化」が向いています。プラン構成そのものが分かりにくい、元データがなく文字も小さい場合は「全面作り直し」を検討します。「PDF補助」は、印刷や社内共有の需要があるときに加え、ページ本文の代わりにはしません。
制作会社へ依頼する前に確認すること
「料金表をスマホ対応にしてください」だけでは、画像の縮小調整なのか、HTMLへの作り直しなのか、CMSの更新機能まで含むのかが伝わりません。見積依頼の前に、現在ある素材と、公開後に誰が何を更新するかを整理しておくと、作業範囲を比較しやすくなります。
- 料金表の元データがあるか。Excel、PowerPoint、デザインデータ、編集可能なPDFなど、文字を取り出せる形式も確認する
- HTMLへ戻す項目を決めたか。プラン名、金額、対象範囲、回数・期間、追加条件、注記、問い合わせ先を書き出す
- 公開後の更新担当と変更頻度を決めたか。自社更新か、制作会社への依頼か、確認者は誰かを明確にする
- WordPressで編集したい範囲を決めたか。価格だけか、項目の追加・並べ替えまで必要かを伝える
- 表の構造を決めたか。利用者が横に比較するのか、プランごとに縦に読むのかを実際の項目で確認する
- PDFを残す目的を決めたか。印刷、保存、社内回覧など用途を限定し、ページ本文との更新元をそろえる
- スマートフォン表示と公開後の更新テストを見積範囲に含めたか。確認端末、確認項目、修正回数を合わせる
- 更新手順の引き継ぎ方法を決めたか。マニュアル、操作説明、テスト更新のどこまで必要かを確認する
チェックが付かない項目は、そのまま制作会社への確認事項になります。とくに元データがない場合は、画像からの文字起こしだけでなく、金額や条件の校正、現行ページとの照合が作業に含まれるかを確認してください。自動で文字を読み取れても、桁、記号、税込表記、注記の対応まで正しいとは限らないため、最終確認者を決めておきましょう。
見積では、内容整理、デザイン調整、HTML・CSS実装、WordPressの編集機能、PDF更新、表示テスト、操作説明を分けてもらうと比較しやすくなります。初回だけ制作会社が構造を整え、以後は自社で価格を変更する運用にするのか、更新も保守範囲へ含めるのかによって、必要な実装は変わります。
依頼時には、「現行の料金表画像は残してもよいが、金額・プラン名・条件・問い合わせ導線はHTMLを正本にしたい。スマートフォンで拡大せず読める構成とし、WordPressで価格と注記を更新できる範囲を見積もってほしい」と伝えると、目的と作業範囲のずれを減らせます。
料金表を直した後の確認方法
完成画面は、見た目だけでなく、読む、比べる、問い合わせる、更新するという一連の動作で確かめます。制作会社の確認に任せきりにせず、実際に料金を変更する担当者と、サービス内容を説明できる担当者の双方が見ると、表示と内容のずれを見つけやすくなります。
- 画面幅390px相当で開き、金額、対象範囲、注意条件、問い合わせ先が拡大なしで読めるか確認する
- ブラウザ表示を200パーセントにし、文字の欠け、重なり、横にはみ出して読めない箇所がないかを見る
- プラン名や金額をドラッグして選択し、コピーやページ内検索ができることを確かめる
- 見出し、プラン名、金額、条件、注記、問い合わせ導線の順に読んで意味が通るか確認する
- 電話番号、フォーム、予約ボタン、PDFへのリンクを押し、想定した画面へ移動するか試す
- WordPressでテスト用の金額や注記を変更し、プレビュー、公開、元へ戻す操作まで担当者が行う
横長の比較表を採用した場合は、左右スクロールの存在が分かるか、見出しを見失わないかも確認します。縦並びへ変更した場合は、同じ項目が各プランで同じ順序になっているかを見ると、比較しやすさを保てます。
読み上げ環境を利用できる場合は、画像の代替テキストだけで済ませず、表の見出しとデータの関係、注記の位置、リンク名が順に理解できるかも試してください。すべてを専門的に検証できなくても、文字として選べるか、自然な順序で読めるかを確かめるだけで、画像だけの状態に残る問題を見つけやすくなります。
公開後は、一度だけ価格変更を実施して運用を確かめます。編集画面で変更する場所が分からない、PDFだけ旧価格になる、確認者が決まっていないといった問題は、実際の更新時に表面化します。公開直後に手順まで通しておけば、次回の変更を画像制作から始めずに済みます。
まとめ
料金表画像を見直すときは、画像を一律に廃止するのではなく、利用者の判断に必要な情報をHTMLの文字へ戻し、画像とPDFの役割を補助へ整理します。全面改修が難しい場合も、スマートフォンで読めない金額・対象範囲・注意条件・問い合わせ先から着手し、変更頻度の高い箇所をCMSで更新できるようにすれば、段階的に改善できます。
自社サイトの料金表をスマートフォンで開き、四つの情報を拡大せず読めるか確認してください。そのうえで、画像内にしかない重要情報を一つずつ書き出すと、HTML化する範囲と制作会社へ尋ねる内容が見えてきます。
参考資料
Understanding Success Criterion 1.4.5: Images of Text｜W3C Web Accessibility Initiative（WAI）｜2026年6月28日更新
ウェブアクセシビリティ導入ガイドブック｜デジタル庁｜2025年10月16日策定・最終更新
