お店のメニューがスマホで読めない。PDFだけのホームページを見直す4手順

自分の店のホームページをスマホで開く。「メニュー」を押すと、A4の紙をそのまま写したPDF。料理名を読むために拡大し、今度は右へ動かして値段を探す。

以下は飲食店を想定した仮想例です。実際の店舗の計測結果ではありません。紙では読みやすい一枚でも、スマホでは「料理と値段を行き来する」操作が増えることがあります。

僕なら、写真やPDFをすぐ全部なくすのではなく、来店前に知りたい情報を、普通のWebの文章としても読める形にします。店の雰囲気を伝える画像と、比較するための文字には、それぞれ役割があるからです。

小さい文字を、大きくするだけで終わらせない

W3Cの解説では、文字などを拡大したときにも、文章を読むために縦と横の両方へ繰り返しスクロールしなくてよいようにする考え方が示されています。

https://www.w3.org/WAI/WCAG21/Understanding/reflow

また、文字の拡大を扱う別の達成基準もあります。

https://www.w3.org/WAI/WCAG21/Understanding/resize-text

ここで紹介するのは、店主が困る箇所を見つけるための簡易点検です。これだけでWCAG全項目への適合を判定したり、PDFが一律に不適合だと判断したりするものではありません。二次元の配置が必要な内容などには例外もあります。

1．お客さんが知りたい三つを、自分のスマホで探す

ホームページを普段使うブラウザーで開き、「代表的な料理名」「価格」「提供する時間帯」を探します。自分が内容を覚えていると飛ばしやすいので、店を初めて見るつもりで、押したリンクと止まった場所をメモします。

「メニューPDFを開くまで迷う」のか、「開いた後の字が小さい」のか、「価格の条件が分からない」のか。この三つは直す場所が違います。ダウンロードできたことだけを、読めたことにしません。

2．まず一品を、文章として書き出す

写真やPDFの中だけにある情報を、メモに一品分だけ移します。品名・税込価格・含まれるもの・提供時間・変更の可能性を、店で確認した事実に合わせて埋めます。

【仮想の掲載文・完成見本】

野菜たっぷりチキンプレート　税込1,200円

チキン・サラダ・ライス・スープ付き。

ランチ11:30〜14:00に提供します。

写真は盛り付け例です。内容が変わる場合は、ご注文前に店頭でお知らせします。

これは架空の料理と価格です。neneが販売する飲食商品や、実在店のメニューではありません。「税込」の表示、付属品、時間帯は、自分の店の確認済みの内容へ置き換えてください。

3．制作担当へ、置く場所と表示を指定する

次の文をコピーし、自分の点検結果に書き換えて、ホームページの制作・更新担当へ相談できます。

【仮想の依頼メモ】

対象：ホームページのメニューページ。

困る場面：スマホでPDFを拡大すると、料理名と価格を左右へ動かして読む必要がある。

変更案：代表的な3品は、ページ本文にも品名・税込価格・内容・提供時間を載せる。

残すもの：店頭と同じ全メニューPDFは、補足としてリンクを残す。

確認：スマホの縦画面で一品の情報が続けて読める。文字を大きくしても、品名や価格が欠けない。

更新担当：店主が月初にメニューを確認。変更があれば担当者へ依頼。

3品という数は整理例です。商品の種類や更新の頻度を見て、掲載範囲・方法・費用を相談します。最初から全品を入力し直すことが必要とは限りません。

4．変更後、PDFとページ本文の内容を見比べる

PCだけでなく、手元のスマホを縦にして表示します。ブラウザーの文字サイズや拡大設定を大きくしたときも、料理名と価格が欠けず、次の行へ自然に続くかを確かめます。設定名は機種とブラウザーで異なります。

PDFと本文で価格が食い違えば、どちらが正しいかを店の担当者へ確認して修正。古いPDFを残すなら、対象期間や更新日も分かるようにします。「二か所に載せたから安心」ではなく、更新時に両方を確認する担当を決めます。

次に何を直すかは、止まった場所で決める

PDFへ進む前に迷うなら、リンク名と置き場所を直す。開いた後に読めないなら、本文掲載や表示を見直す。価格の条件が曖昧なら、付属品・時間帯・税の扱いを店で確かめる。原因に合わせれば、全部作り直す前にもできることがあります。

成功の目安は、初めて見る人が代表的な一品の内容と価格、提供時間を、スマホで説明できること。今日の一歩は、一品だけ自分のスマホで探し、どこで読みにくくなったかを書くことです。

neneでは、お店のWeb制作・更新の範囲から購入前に相談できます。

https://coconala.com/services/4426958

小さなお店のホームページを使いやすくする手順を続けます。次の記事も読みたい方は、合同会社neneをフォローしてください。