飲食店の「スマートフォンで見ると読みづらい」
をWebサイトで解決する方法

パソコン向けの並びをそのまま縮めると、全部が小さくなります。文字も、写真も、押す場所も。指で広げないと読めない状態です。

組み直すというのは、小さい画面のために順番と大きさを決め直すことです。横に3つ並んでいたものを縦に積む、表を折り返す、余白を詰める。同じ中身でも、置き方が変わります。

とくに効くのは、順番です。パソコンでは右にあった予約の入り口が、縮めると下のほうへ落ちることがあります。スクロールしないと出てこない場所に、いちばん押してほしいものが行きます。

だから小さい画面では、上から何が見えるかを決め直します。店の名前、何の店か、押す場所。この3つが最初に見えるかを確かめます。

画面上のリンクやボタンは、指の腹で押せる大きさが要ります。文字だけのリンクが行間に詰まっていると、隣を押してしまいます。

電話番号は、押して掛けられる形にします。数字が文字として置いてあるだけだと、控えてから掛け直すことになり、そこで止まります。

予約の入り口は、指の届く場所に置きます。片手で持ったとき、親指が届くのは画面の下側です。上端に小さく置くと、持ち替えないと押せません。

アクセシビリティの基準（WCAG 2.5.8）は、押せる場所を最低24×24ピクセルと定めています。当社では44ピクセル以上を目安にしています。

料理の写真は、そのまま載せると1枚で数メガバイトになります。店の外にいる人は、電波の弱い場所で開くことがあります。

写真の枚数を減らすのではなく、同じ見た目のまま軽い形式に変換します。見え方は変えずに、届くまでの時間だけを短くします。

最初の画面に出る写真だけを先に読み込み、下のほうの写真はスクロールしてから読み込む形にもできます。開いた瞬間に見える部分が、いちばん早く出ます。

小さい画面では、同じ中身でも縦に長くなります。パソコンで2画面ぶんだったものが、10画面を超えることがあります。下まで行く前に閉じられます。

だから、決めるのに要らないものを下げます。店の理念やこだわりの長い文は、読みたい人だけが開く形にします。畳んでおけば、そこを飛ばして先へ進めます。

見出しだけで中身が分かるようにもします。読まずに目で追う人が、自分に関係のある場所を見つけられます。

当社では、公開の前に実機で上から下まで通します。何画面あるか、どこで止まるかを見てから決めます。

店を探している人は、家の中にいるとは限りません。駅の地下、ビルの谷間、混んだ電車の中。電波が弱い場所で開かれることがよくあります。

そこで重い画面を出すと、表示される前に閉じられます。速さは、見た目の良さより先に効きます。

だから最初に出る部分だけを先に読ませます。店の名前、何の店か、押す場所。ここが出れば、残りは後から追いついても構いません。

動きのある演出も、最初の画面では抑えます。読み込みを待たせるものは、下のほうに置きます。

小さい画面ではみ出すのは、たいてい決まったものです。表、料金の一覧、長い品名、そして写真の並び。どれも横に伸びる形をしています。

表は、横に流して見られるようにするか、縦に積み直します。積み直すほうが読みやすいことが多いのですが、比べる目的の表は横に流すほうが分かります。

長い品名や英語の混じった文字列は、途中で折り返す指定をしておきます。指定が無いと、その1語のせいで画面全体が横に広がります。

公開の前に、いちばん狭い画面幅でも確かめます。当社では320ピクセルまで見て、はみ出しが出ないところまで詰めます。

スマートフォンは片手で持たれます。親指が届くのは画面の下半分で、上端は持ち替えないと押せません。押してほしいものを上端だけに置くと、そこで一手増えます。

スクロールも親指でします。長い一覧を延々と送らせると、途中で止まります。区切りを入れて、どこまで来たかが分かるようにします。

文字を選んでコピーする場面もあります。住所や電話番号は、選びやすい形にしておきます。画像の中に書いてあると、選べません。

公開の前に、実際に片手で持って上から下まで通します。押しづらい場所は、そこで見つかります。

直す前に、いまどう見えているかを店の側で確かめられます。使うのは、手元の端末と、ふだん使っていない古い端末の2つだけです。

1つめ。自分の端末で開いて、指で広げずに値段が読めるかを見ます。広げたくなった場所が、そのまま直す場所になります。品名より先に、値段の行で確かめます。

2つめ。通信の速度を落とす設定にするか、電波の弱い場所で開きます。最初の画面が出るまで待たされるなら、写真が重い場合が多くあります。

3つめは、GoogleのPageSpeed Insightsに自店のURLを入れて測ります。4つめは、家族の古い端末で開きます。新しい端末では出ない崩れが、ここで見つかります。

読みづらさの多くは、文字の大きさではなく、文字が画像になっていることから起きます。紙のメニューを撮って1枚の画像で載せると、小さい画面では読み取れません。

画像の中の文字は、指で広げると粗くなります。選んで控えることもできません。住所や電話番号を書き留めたい方が、そこで手を止めます。

PDFで置く形も同じです。開くのに別の画面へ移り、紙の幅のまま出るので、横へ送りながら読むことになります。そのまま戻ってこない方が出ます。

品名と値段は、文字として置きます。読み上げの機能にも乗り、検索でも拾われます。写真は料理のほうに使い、文字は文字として並べます。