メインコンテンツへ移動
ノウハウ

飲食店のサイトが重い。原因は料理写真と埋め込みのことが多い。

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

「開かなかった」と言われたことはありませんか。

飲食店のサイトが開かれるのは、机の前ではありません。駅を出たところ、店へ向かって歩きながら、二軒目を探している22時の路上。電波が弱い場所で、片手で、急いで開かれます。

この条件で、写真が出るまでに数秒かかる画面は閉じられます。閉じた人は「重かった」とは言いません。さっきまで見ていた地図やグルメサイトに戻るだけです。店の側からは、何も起きていないように見えます。

重さの原因は、飲食店の場合ほとんど決まっています。順に見ていきます。

いちばん重いのは、料理写真の一枚あたりの大きさです。

枚数ではありません。一枚あたりのデータの大きさです。カメラやスマホで撮った元のデータを、そのまま画面に置いている店がとても多いです。一枚で数メガバイトになることがあります。それが五枚並べば、それだけで開くのに時間がかかります。

写真を減らせという話ではありません。飲食店のサイトで、写真は商品そのものです。やるのは、画面に出す大きさに合わせてデータを作り直すことです。見た目を落とさずに、重さだけを落とせます。

ここで気をつけるのが、圧縮のかけ方です。焼肉のサシは、強く縮めると溶けて見えます。寿司の一貫を大きく出す画面も同じです。どこを残してどこを削るかは、業態によって違います。全部を同じ設定で一括処理すると、いちばん見せたい一枚から先に壊れます。撮り方と見せ方は写真の記事にまとめました。

全品を並べたギャラリーは、読み込む前に閉じられます。

メニューの全品を写真で並べたページ。パンの全種類。ワインリストの全点。作る側は親切のつもりですが、開く側からすると、読み込みが終わるまで何も見えない画面になります。

そもそも、全部を並べなくていい業態があります。寿司や割烹は、料理を全品並べると品書きの写しになります。一貫だけを大きく出して余白を取るほうが伝わります。ワインは、グラスの最低価格とボトルの価格帯、それに代表銘柄が数本あれば足ります。全点載せると更新が止まり、古いリストが残ります。古いワインリストは、無いより悪いものです。

逆に、並べる必要がある業態もあります。ベーカリーは一点ずつ値段が違うので、写真と価格が対になっていないと予算が立ちません。この場合は、最初に見える範囲だけを先に出して、下へ動かした分だけ読み込む形にします。画面に出ていない写真を、先に全部取りに行かない作りにするということです。

埋め込みは、自分のサイトの速さを人任せにします。

グルメサイトの予約枠、SNSの投稿一覧、地図、口コミの表示。これらを画面に埋め込むと、開くたびに相手のサーバーへ取りに行きます。相手が遅い日は、自分のサイトも遅くなります。しかも、店の側では直せません。

全部やめる必要はありません。置き方を変えます。

  • ページのいちばん上に埋め込まない。最初に見える範囲は、自分の店の写真と文字だけで出せる形にします。
  • 下へ動かして見える位置まで来てから、読み込ませます。
  • SNSの一覧を全ページの下に入れない。載せるのは一ページだけにして、他はリンクにします。
  • 地図は、画像とリンクで足りることが多いです。画面の中で指で動かす人は、そう多くありません。

予約の埋め込みだけは、外せない場合があります。その場合も、予約のページにだけ置いて、トップには置きません。

もう一つ多いのが、口コミやランキングの表示を全ページの下に入れている作りです。これは重さだけの問題ではありません。自分のサイトの中に、よその店と並べて比べる場所を作ることになります。すでに自分の店を見に来ている人を、そこからよそへ戻してしまいます。

動く演出は、店内のモニターで見せるものとは違います。

トップページで自動再生される動画。何枚も切り替わるスライドショー。店内のモニターで流すなら効きますが、スマホで開いたときには、まず読み込みの重さとして届きます。

とくに、切り替わるたびに次の写真を取りに行くスライドショーは、枚数の分だけ重くなります。一枚に絞って、その一枚を良くするほうが速く、伝わります。焼肉なら、肉の写真を一枚だけ大きく置きます。複数並べると一枚あたりが小さくなって、サシが潰れます。

文字のために特別な書体を読み込む場合も、種類が増えると効いてきます。和食の店で明朝を使うのには意味がありますが、使う書体は絞ります。

自分の店の前で、自分のスマホで開いて確かめます。

速さを確かめるとき、店のWi-Fiにつないだパソコンで開いても意味がありません。実際に読まれている条件で開きます。

  1. Wi-Fiを切って、携帯の回線にする。
  2. 店の外に出て、お客様が実際に歩いてくる道で開く。
  3. 店名で検索して、そこからサイトを開く。トップだけでなく、メニューのページも開く。
  4. 指で数えて、写真が出るまでに何秒かかるかを見る。

時間帯も変えて試してください。開店前の静かな時間と、金曜の20時では回線の混み方が違います。遅いほうが、実際に読まれている条件です。バーのように22時前後に探される業態なら、その時刻に自分で開いてみるのがいちばん確かです。

身内以外の目でも確かめてください。店主は自分のサイトを何度も開いているので、手元の端末に前の読み込みが残っていて、実際より速く見えます。家族や常連のお客様に一度開いてもらうと、初めて開く人が見ている速さが分かります。

うちの店のサイトは、どこが重いか。

重さの原因は店によって違います。写真だけの店もあれば、埋め込みが四つ入っている店もあります。ラーメン・定食のように歩きながら片手で読まれる業態では、ここが来店に直に効きます。文字の大きさと、指で押す場所の大きさも、同じ理由でパソコンでの見え方より先に考えます。

30分の無料相談では、その場でお店のサイトを開いて、何が重さになっているかを確かめます。オンラインで、費用はかかりません。その場で契約を求めることも、後日お電話することもありません。直す順番だけ持って帰っていただく形でも構いません。

作り替える場合、制作費は、トップページ1枚だけなら10万円(税込)から、7ページくらいの構成で25万円(税込)から。何を入れるかで決まり、構成を決めた時点で総額が決まります。写真と原稿がそろっていれば2週間ほどで公開できます。

よくある質問

写真を軽くすると、料理が安っぽく見えませんか。

作り方によります。画面に出す大きさに合わせてデータを作り直すだけなら、見た目はほとんど変わりません。問題になるのは、全部の写真に同じ強さで圧縮をかけたときです。焼肉のサシや、寿司の一貫を大きく出す写真は、そこから先に崩れます。看板になる数点だけ設定を分ける、という組み方にします。

サイトの速さは、検索の順位に関係ありますか。

順位を約束することはできません。並び順は、こちらで動かせるものではないからです。ただ、速さは順位より前のところで効きます。開くのに時間がかかる画面は、順位に関係なく閉じられるからです。歩きながら片手で開かれる業態ほど、この差がそのまま来店の差になります。

いま使っているサイトのままで、軽くできますか。

できることが多いです。写真のデータを作り直す、埋め込みの位置を下げる、SNSの一覧を一ページだけにする。この三つで、作り替えずに変わる場合があります。作りそのものがスマホで読む前提になっていない場合は、直す手間のほうが大きくなることもあります。どちらになるかは、実際の画面を見てからお伝えします。

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

次に読むもの

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

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

30分・無料で相談する