BLOGブログ

参考にしたい飲食店のスマホサイトホームページデザイン5選

takefushi / 2021.07.28

Web制作・ホームページ制作

スマートフォンが日常的に使われる様になり、お店の情報を調べるためにスマホが多く利用されています。
そのため、スマホ画面でも見やすいホームページすることが大事になります。

飲食店のホームページは、料理やお店などの写真を多く使われ、スマホになったときでも、写真を見やすくする必要があります。

今回紹介するサイトは、料理をしっかり見せることや、お店の雰囲気を存分に伝えることできているスマホサイトホームページデザインを厳選して紹介します。

瓢喜

瓢喜

東京都をメインに5店舗ある飲食店のスマホサイトホームページデザインです。

予約ボタンが常に表示されており、写真やテキストを邪魔しないように配置されています。

トップページでは、ほとんどのコンテンツがクリックすることができます。
クリックができる箇所が多いと、気になったコンテンツを見つけたときにすぐにページ遷移をすることができ、ユーザーの利便性が高まります。

100本のスプーン

100本のスプーン

東京都に複数店舗あるレストランのスマホサイズホームページデザインです。

動画・画像を使用して各店舗へのアクセスがしやすくなっています。

トップページのハンバーガーメニュー内は、各店舗のリンクに写真を使って見やすく配置されています。

一方、下層ページのハンバーガーメニュー内は、「メニュー」「店舗情報」「予約」「他の店舗のリンク」のみでユーザーは迷子にならず、目的の場所へのページ遷移が簡単になります。

メニューは、画像で表示されているのでユーザーは料理のイメージしやすく、使いやすいコンテンツになります。

奏樹

奏樹

山梨県にあるカフェ・レストランのスマホサイトホームページデザインです。

トップページでは、表示画面上の下部に常に「電話」「カレンダー」「Google MAP」のボタンを設置されているので、お店を利用する人に向けてアクションを促すことができます。

テキストが比較的少なく、画像を多く使って「料理」「素材」「お店」の雰囲気がよく伝わります。
写真の配置が見やすい配置になっています。

東京ラーメンストリート

東京ラーメンストリー

東京駅内に全国のラーメンが味わえる場所のスマホサイトホームページデザインです。

アクセスしてすぐの画像・テキストが、スマホサイトになってもすべて見えていて、インパクトがあります。
ファーストビューでサイトに興味を持ってもらう事ができると、サイト最後まで見てもらうことができ、来店や予約のコンバージョンに繋がります。

トップページにあるラーメンの紹介では、画像が大きすぎずに配置されていて「ラーメンの画像」「店舗名」「小見出し」がスマホ画面内におさまっていて、見やすくなっています。

島原 乙文

島原 乙文

京都府にある飲食店のスマホサイトホームページデザインです。

飲食店のサイトでは、料理やお店の雰囲気を伝えるために写真が多く使われます。
画像を多く使用すると、サイトが重たくなり読み込みに時間がかかってしまいます。

スマホでサイトにアクセスする人は、ページが開くのに3秒以上待たされると、直帰率が32%増加します。
(参考: googleの調査結果サイト

しかし、こちらのサイトでは、画像に読み込み遅延機能をつけ、アクセスした時にすぐにサイトを見ることができます。

まとめ

飲食店のスマホサイズホームページでは、料理やお店の雰囲気を伝えることが大切になっていきます。

雰囲気を伝えるのは写真だけでなく、「メニュー」「こだわり」「強み」などを充実させることで、雰囲気を伝えることができます。

写真を多く使う場合は、サイトが重くならないような工夫をする必要があります。

今回紹介しているスマホサイトホームページデザインは、雰囲気を伝えるために工夫されていて、見やすく使いやすいサイトになっています。
ぜひ、参考にしてみて下さい。