ホームページ比較のガイド通常公式リンク

ホームページ比較 / 迷いを整理する実用ガイド

メニュー画像が読みにくい店舗サイト。文字で伝える情報と見た目を両立する

編集日：2026年11月2日｜公式資料の確認日・範囲は末尾に記載

メニューの写真を大きく載せたのに、料理名や料金が分かりにくいと言われる。そんなとき、写真を撮り直したりサイトを全面改装したりする前に、文字で取り出せる情報を増やす方法があります。対象は、紙のメニュー画像や画像付きPDFだけで商品を案内している小さなお店です。見た目を捨てるのではなく、写真が担う役割と、注文判断に必要な文字を分けます。この記事のゴールは、代表的なメニュー一つを使い、何が読めて何が操作できれば採用するかを決めることです。アクセシビリティへの完全適合を判定する監査ではありません。

最初に「誰がどこで読めないか」を一つに絞る

困りごとの記録は「文字を大きくしてほしい」だけで終わらせず、使った端末、開いたページ、探していた情報をそろえます。たとえば、スマートフォンでランチの価格を探すと、画像を拡大してから左右へ動かさないと料理名と値段を同時に読めない、という状態です。これなら改善後に同じ操作を繰り返せます。利用者の年齢や能力を勝手に推測する必要はありません。

まず確認する情報を三つ程度に限定します。料理名、税込の支払額、提供時間など、自店で来店前の判断に必要なものを選びます。全料理の説明を一度に増やすと、元の見づらさが長文の見づらさへ変わりかねません。店員が口頭で補足している質問を集め、重要度を付けると作業の優先順位が決まります。アレルギーや食事制限への対応は、写真から推測せず、店が実際に確認できる案内だけを扱ってください。

写真を残し、注文に必要な情報を文字でも置く

料理写真は見た目や量感を伝える役割を残し、料理名、価格、選択肢、提供条件をページの文字として並べる案を作ります。紙のデザインをそのまま再現することを完成条件にしないのがポイントです。写真の中にしかない小さな注意書きを、写真の下へ移すだけで試せる場合もあります。元画像と文字の二か所に価格があるなら、更新時には必ず両方を照合します。

W3Cの画像チュートリアルは、情報を伝える画像と飾りの画像、操作に使う画像で代替テキストの考え方を分けています。そこで、料理写真には必要な情報を簡潔に説明し、背景の飾りへ商品説明を詰め込まない設計を制作担当へ相談します。長いメニュー全文を一枚の画像の代替テキストへ入れるだけでは、項目ごとの比較や読み飛ばしはしづらいままです。本文の見出しやリストとして整理できるかを先に確認しましょう。

項目の順番をそろえると、価格の更新も点検しやすい

試作では、分類、料理名、短い説明、価格、注文条件の順序をそろえます。おすすめだけ別の順番にすると、読むたびに値段を探す場所が変わります。写真の有無が混ざっても、文字の並びは統一できます。セット料金と追加料金、通常価格と時間帯限定価格を一つの数字にまとめず、どの条件の金額かを近くへ書きます。比較しやすさは装飾の少なさではなく、必要な条件を対応させられることです。

更新用の原稿表には、商品名、掲載価格、適用日、確認者、対象ページを設けます。仮にランチ三品の価格が変わるなら、三つの文字欄と画像に残った金額を一件ずつ確認します。店内用PDF、トップのキャンペーン画像、別言語ページも同じ価格を使うなら対象欄へ追加します。公開した日だけでなく、実際に注文へ適用する日を分けると、先行告知と当日切替を混同しにくくなります。

拡大、順番、リンクをそれぞれ試す

見た目の確認は、制作者の大きな画面だけで終えません。普段使うスマートフォンで代表ページを開き、文字を拡大しても料理名と価格の対応を見失わないかを確かめます。横向きにしないと条件が読めない、ボタンが文字を覆う、価格だけ次の行へ離れるといった問題を、その画面幅と操作順と一緒に記録します。速く表示されたことと読みやすいことは別の合格条件です。

キーボードでも、リンクへ順に移動でき、今どこを選んでいるか分かるかを確認します。メニューを開くボタンが反応しても、閉じる操作や次の項目への移動が難しければ未完了です。W3Cの初期確認ガイドは、拡大やキーボード操作などの入口を示していますが、簡単なチェックだけで全ての問題を見つけられるわけではありません。読み上げや支援技術への対応を契約条件にする場合は、対象範囲と評価方法を別途合意してください。

テンプレート変更と部分修正を、同じ課題で比較する

現在の編集画面で文字メニューを追加できるなら、まず一分類だけ試します。追加できない場合も、すぐ乗り換えるのではなく、既存テンプレートの設定、部分改修、別ページへの整理を候補にします。制作会社への依頼文は「おしゃれにする」より、「スマートフォンで三品の料理名と価格を画像の拡大なしに確認できるようにしたい」の方が、提案の範囲を比較できます。

比較表には、文字編集ができる担当、写真の差し替え方、分類の追加、スマートフォンでの確認、既存URLへの影響を並べます。試作が一度は読めても、毎回制作者へ頼まなければ価格を直せない案は、頻繁に価格が変わる店には合わないことがあります。一方、変更が少なく社内で点検時間を取れない店なら、更新代行込みの案を検討する余地があります。見た目の好みだけでなく、翌月の更新を同じ操作で行えるかを残してください。

改修費と、原稿を維持する時間は別に見積もる

費用の欄は、初期改修、画像加工、原稿整理、月額保守、追加更新を分けます。時間の欄は、店舗側の情報整理、制作担当の修正、店長の確認、公開後の点検を分けます。無料テンプレートを使う案でも、商品名や価格を入力して確かめる仕事は残ります。反対に、有料改修だから店舗の確認が不要になるわけでもありません。費用と手間を一つの「お得」という言葉へ縮めないようにします。

たとえば、十品の価格確認に一品二分、画像との照合に10分かかると仮定すると、店舗側の確認は十品×二分＋十分＝三十分です。これは計算用の仮例で、実測や標準時間ではありません。自店で一分類を更新したときの時間を測って置き換えます。作業費を金額へ換算するなら、採用した時間単価も書き、外部へ支払う請求額とは別に表示してください。二つを合算した金額をそのままサービス料金と呼ばないことも大切です。

全面改装しない選択と、途中で止める条件

今のサイトで重要な文字を補えるなら、全ページのデザイン変更を先送りして構いません。商品数が多い店は、問い合わせの多い分類から順に整理する方法もあります。PDFを残す場合も、ファイルを開かない人が営業時間や主要価格を確認できる案内を併設できないか検討します。別のサービス契約を増やす前に、既存の文章欄と更新担当で解決できる範囲を確かめます。

反対に、価格の正しい原稿がない、確認する担当が決まらない、他媒体の古い情報を消せない状態なら、見た目の作業を進めすぎない方が安全です。現行ページの控えを保存し、何をどこまで変えるかを先に決めます。本番ページを突然削除して、準備中の一言だけにするのは、来店前の情報を失う原因になります。改善中も使える現行の連絡先を残し、切替後に不具合があれば元へ戻せる手順を制作担当と確認してください。

写真と文字が食い違った時の直し方も決める

運用を始めると、文字は新価格なのに写真は旧価格、売り切れ表示を消したのに別ページでは残っている、といった不一致が起こり得ます。見つけた人がすぐ直して終わりにすると、別の担当が古い原稿で上書きすることもあります。まず正しい情報の決定者を確認し、対象商品の掲載先を台帳で調べ、同じ版へ揃える順番にします。修正メモには、変更前後の値、適用日、確認したURLを残します。誤表示によって既に問い合わせや予約が発生している場合は、ページ修正だけで対応が済んだとせず、店内で個別対応の担当を決めます。

制作会社へ渡す確認画像は、ページ全体を大量に送るより、問題の箇所と期待する状態を一組にすると具体的です。「この画面幅で料理名の右にある価格が隠れる」「このリンクから戻ると別分類へ飛ぶ」のように再現手順を書きます。修正が戻ってきたら同じ操作で確認し、別の分類にも同じ部品を使っていないか点検します。一か所の見た目だけを直して他のメニューへ影響することを避けるためです。読めること、更新できること、元へ戻れることを別々に確かめれば、追加見積りが必要な問題も説明しやすくなります。

一分類の合格を、次の更新へつなげる

最初の合格は、店を知らない人が対象の料理と価格、提供条件を探せること、担当者が価格を一つ変更して確認できること、元の導線が壊れていないことの三組で判断します。試した人や端末の範囲も記録し、全ての利用者に問題がないと広げて表現しません。読みづらかった箇所が残る場合は、文字量を減らす、見出しを分ける、説明の順序を変えるなど、原因ごとに一つずつ直します。

この点検はアクセスや売上の増加を約束するものではありません。ただ、来店前の疑問に答えられるかという判断材料になります。表示が遅い問題も残るなら既存の画像軽量化記事へ、更新担当が続かないなら自作と外注の分担記事へ進みましょう。新しい契約の比較は、解決したい問題と合格条件が決まってからで十分です。本サイトには広告リンクを設定しておらず、掲載先は通常の公式情報です。

公式情報・確認範囲

公式情報の事実と、本サイトが提案する整理・比較の手順は別です。各資料の確認範囲は以下のとおりです。