メインコンテンツへ移動
基礎知識

飲食店のサイトはスマホで見られます。スマホ対応とは何か

著者: VOLT編集部(株式会社Mycat。飲食店のホームページだけを作っています)

見られているのは、移動中と、店の前と、会社の机の上です。

飲食店のホームページは、パソコンの前でじっくり読まれるものではありません。開かれる場面は、だいたい三つに分かれます。

一つ、移動中。電車の中や、歩きながら。二つ、店の前。看板を見て、入るかどうかを決めるところ。三つ、会社の机の上。宴会の幹事が、仕事の合間に候補を並べているところです。

この三つは、見ている画面も、知りたいことも、使える指の数も違います。スマホ対応というのは、この違いに一つのサイトで応えるための作り方です。

スマホ対応は、画面の幅で並びが変わる作り方です。

昔は、パソコン用のサイトとスマホ用のサイトを別々に作ることがありました。二つあると、メニューの値段を変えたときに二か所直すことになります。片方だけ直して、片方が古いまま。そういう店がよくありました。

スマホ対応は、中身を一つに保ったまま、画面の幅に合わせて並びのほうを変える作り方です。パソコンで横に三列だったものが、スマホでは縦に一列になります。写真の大きさも、文字の大きさも、幅に合わせて変わります。

直す場所が一か所で済むので、営業時間を変えたときも、季節のメニューを差し替えたときも、一回で終わります。いま新しく作るサイトは、ほぼこの形です。

いま持っているサイトが作り分けの形かどうかは、パソコンで開いたときのアドレスと、スマホで開いたときのアドレスが違うかどうかで見当がつきます。違っていれば、二つ持っている可能性があります。

移動中の人は、片手で、歩きながら読んでいます。

スマホで見ている人の多くは、片手です。親指しか使えません。ここで効いてくるのが、文字の大きさと、押す場所の広さです。

いちばん多い失敗は、紙のメニューをそのまま写真に撮って貼ることです。画像はスマホの幅に縮むと文字が読めません。指で広げないと値段が分からない料金表は、そこで閉じられます。品名と価格は、画像ではなく文字で組みます。文字で組んでおくと、探している側からも中身が読めます。

常連さんの年齢も考えます。長く続けている店ほど、五十代六十代のお客さんが増えます。小さい文字は読まれません。文字を大きくして、行と行の間を空けるだけで、読み通される量が変わります。

押す場所の広さも同じです。文字のリンクを細かく並べると、隣を押してしまいます。予約と電話だけは、指の腹くらいの大きさの面にしておきます。

店の前の人は、営業しているかだけを見ています。

店の前でスマホを開いている人が知りたいのは、一つだけです。いまやっているか。

だから、営業時間はスクロールせずに読める位置に置きます。ラストオーダーも一緒です。スープが無くなり次第終了の店や、日曜だけ夜営業が無い店は、そこも同じ場所に書きます。

そして、電話ボタンです。画面の下に常に出しておいて、タップ一回で発信できるようにします。番号を長押ししてコピーし、電話アプリに貼り直す。この二手間で、かなりの人が止まります。バーのように22時に片手で探される業態では、ここが入店の差になります。バー・専門店の組み立ては別のページに書きました。

地図も同じです。住所の文字だけを置くのではなく、タップで地図アプリが開くようにします。二階以上の店なら、入口の写真を一枚入れます。

幹事は、会社のパソコンで見ています。

宴会の候補を探しているとき、幹事は仕事の合間に見ています。使っているのは会社のパソコンで、画面は横に長いです。

スマホだけを考えて作ったサイトをパソコンで開くと、文字が横に間延びして読みにくくなることがあります。写真が引き伸ばされて粗く見えることもあります。幹事はその画面のURLを上司に送るので、そこで粗く見えると候補から外れます。

幹事がパソコンで確かめるのは、コースの品数、時間、飲み放題の有無、税込の総額です。この四つが表で並んでいると、そのまま社内の説明に使えます。予約の窓口の組み方は予約の記事に書きました。

紙に印刷して会議に持っていく幹事もいます。印刷したときにコースの表が途中で切れないかも、一度見ておきます。

業態ごとに、スマホで最初に出す一行が違います。

画面のいちばん上に何を置くかは、業態で変わります。スマホでは、そこから下は指で動かさないと見えないからです。

  • 居酒屋は、人数の幅と一人あたりの総額。幹事はここだけで候補に残すかを決めます。
  • 焼肉は、肉の写真を一枚だけ大きく。何枚も並べると一枚が小さくなり、サシが潰れます。
  • 寿司・和食は、文字を減らします。情報量が多いほど格が下がって見える業態です。
  • カフェ・ベーカリーは、営業時間より焼き上がりの時間です。
  • ラーメン・定食は、看板の一杯と、いまやっているかどうか。
  • イタリアン・フレンチは、何のために使う店か。記念日か、接待か、家族の食事か。
  • バーは、チャージと一杯の価格帯です。

写真をどう撮るかは写真の記事に分けて書いています。

うちの店のサイトを、いま自分のスマホで開くとどうか。

確かめ方は簡単です。自分のスマホで店名を検索して、サイトを開きます。片手で持って、親指だけで動かしてみてください。

料金表を広げずに読めるか。電話ボタンがすぐ押せるか。営業時間が最初の画面にあるか。地図がタップで開くか。この四つのどれかで止まったら、そこが直すところです。

30分いただければ、いまのサイトを一緒に開いて、どこで止まっているかをその場でお伝えします。作り直す結論にならなくても構いません。制作費は、トップページ1枚だけなら10万円(税込)から、7ページくらいの構成で25万円(税込)から。何を作るかで決まります。

オンラインで30分、無料です。その場で契約は求めませんし、後日の営業電話もしません。30分の無料相談で、いまの画面を見せてください。

よくある質問

スマホ用のサイトを別に作ったほうがいいですか。

別に作ると、値段を変えたときに二か所直すことになります。片方だけ直して片方が古いまま、という状態になりがちです。いまは一つのサイトが画面の幅に合わせて並びを変える作り方が普通で、直す場所も一か所で済みます。パソコンとスマホでアドレスが違う場合は、二つ持っている可能性があります。

紙のメニューを写真に撮って載せてもいいですか。

写真だけにするのは避けます。スマホの幅に縮むと文字が読めず、指で広げないと値段が分からないからです。品名と価格は文字で組みます。写真は、料理そのものを見せるために使います。文字で組んでおくと、探している側からも中身が読めるので、地域名と料理名の検索にも効きます。

文字は、どのくらいの大きさにすればいいですか。

数字で決めるより、確かめ方で決めます。自分のスマホを片手で持ち、腕を伸ばした距離で料金表が読めるかを見ます。長く続けている店ほど五十代六十代のお客さんが多いので、そこで読めない大きさは小さすぎます。行と行の間も空けます。押す場所も、指の腹くらいの大きさにします。

料金・納期・進め方など、記事に関係なくよく聞かれることは よくある質問 にまとめてあります。

次に読むもの

ホームページ制作をお考えですか?

トップページ1枚だけなら10万円(税込)から、7ページくらいの構成で25万円(税込)から。何を入れるかで決まります。

30分・無料で相談する