飲食店サイトのスマホ最適化｜来店前に9割が見る画面の設計

「近くのランチ」「今開いている店」検索はほぼスマホからです。PC 向けに作ったサイトを縮小表示しているだけでは、電話ボタンが押しにくく、地図が見づらく、離脱します。

モバイルファーストで設計し、375px 幅で来店判断が完結するかを最初に確認してください。

移動中・店舗近くで検索するユーザーは、3 秒以内に「営業中か」「電話できるか」が分からないと離脱します。

店名・一言キャッチ・代表料理写真。営業中／定休の目安（「本日 11:30 開店」など）。

電話ボタン（tel: リンク）と Google マップボタン。

この 4 点が画面 1 枚に収まると、移動中のユーザーが即判断できます。

電話番号は画像ではなくテキスト＋タップ可能なボタンに。

地図は Google Maps への外部リンクまたは埋め込み。駐車場入口の写真 1 枚があると初来店の不安が減ります。

DesignLayer スタジオで CTA ボタンのリンク先を tel: と maps URL に差し替えられます。

ヒーロー画像は 200KB 以下を目安に圧縮。WebP 形式が理想です。

不要な動画 autoplay はモバイル回線を圧迫し、離脱の原因になります。

DesignLayer 公開 LP は軽量 HTML のため、画像最適化だけで十分な速度が出やすいです。

本文 16px 以上、行間 1.6 以上。薄いグレー文字 on 白背景は屋外の明るい画面で読めません。

メニュー価格は bold で強調し、スキャン読みに対応します。

営業時間・定休日は本文より大きめのフォントで、視認性を優先してください。

長いメニューページでは、フッター固定の「電話・予約」バーが有効です。

DesignLayer 生成 LP では、スタジオでフッター付近の CTA ブロックの有無を確認してください。

メニューセクションの途中に「予約はこちら」を 1 回挟むと、読了率が高いページほど CV につながります。

ボタン・リンクのタップ領域は 44px 以上を確保します。隣接するリンク同士の間隔も 8px 以上空けましょう。

予約フォームの入力欄は 16px 以上のフォントにし、iOS の自動ズームを防ぎます。

スタジオプレビューで幅を狭め、ヒーロー→メニュー→アクセスの 3 スクロール以内に来店情報が揃うか確認。

実機 iPhone / Android で公開 URL を開き、電話・地図タップをテスト。

問題があればセクション順を入れ替え、再公開——外注の再依頼より数分で済みます。

失敗例：PDF メニューだけ掲載し、スマホで拡大読みさせる。→ HTML で概要を載せ、PDF は補助に。

失敗例：電話番号が画像化されておりタップできない。→ tel: リンク付きボタンに変更する。

失敗例：PC 向けに作ったサイトをそのまま公開し、文字が小さすぎて読めない。→ 375px 幅で最初から設計する。

ラーメン店は営業時間と待ち時間、居酒屋は宴会 CTA、カフェはモーニング時間——業態ごとにファーストビューの優先情報が変わります。

Brief に業態と主要来店シーンを書くと、DesignLayer が生成する LP のセクション順が近い形になります。

公開後、スマホからの離脱率（Google Analytics）と電話タップ数を 2 週間確認します。ファーストビューで離脱が多い場合は、営業時間と CTA の配置を見直しましょう。

DesignLayer スタジオでセクション順を入れ替え、再公開するだけなら数分で済むため、A/B テストより手軽に改善できます。

スマホ LP では、ヒーロー→営業時間・CTA→看板メニュー→アクセス→FAQ の順が来店判断に効きやすいです。

「About ストーリー」はメニューの後でも問題ありません。移動中の客はまず「今開いているか」「何があるか」を知りたいからです。

DesignLayer スタジオでセクション順を入れ替え、375px プレビューで 3 スクロール以内に CTA が 2 回以上現れるか確認しましょう。

コントラスト比 4.5:1 以上、フォーカス可能なリンク、画像の alt テキスト——これらは高齢の客や視覚に配慮した来店者にも効きます。

DesignLayer 生成 LP では、スタジオで画像に alt を設定し、ボタン文言を「電話する」「地図を開く」など動詞で統一してください。

既存サイトが PC 向けの場合、DesignLayer でモバイル前提の 1 ページ LP を新設し、GBP の Web サイト欄を差し替える方法もあります。

HTML エクスポートしてサブドメインに載せるより、DesignLayer 公開 URL を正とする方が運用が軽いです。

常連向けにホーム画面追加を促すより、まず tel: と maps のタップ体験を最適化する方が来店 CV に直結します。

将来的に PWA 化する場合も、DesignLayer で固めた 1 ページ LP の情報設計がそのまま活かせます。

観光地の飲食店は、スマホ LP の英語概要（営業時間・代表メニュー・地図）を 1 セクション設けるだけで、インバウンド客の離脱が減ります。

DesignLayer Brief に「インバウンド客 30%」などと書くと、英語見出し混じりの LP が生成されやすくなります。

LINE で店 URL をシェアした際の OGP（タイトル・画像・説明）が、店名・代表料理・営業時間を伝えるよう設定します。

DesignLayer 公開 LP は OGP 対応のため、シェア経由の来店導線もスマホで自然に機能します。

飲食店サイトは 375px 幅で来店判断が完結するかが基準です。電話・地図・営業時間・代表メニューをファーストビューに集約し、DesignLayer スタジオで実機確認しましょう。

飲食店 LP の主戦場は縦持ちスマホですが、タブレットで検索する家族連れも一定数います。375px と 768px の両方でレイアウト崩れがないか確認しましょう。

DesignLayer スタジオのプレビュー幅を変えながら、メニュー表の折り返しと CTA の位置をチェックしてください。

卓上 QR から LP のメニュー・アレルギー情報へ誘導する店舗も増えています。QR のリンク先はモバイル最適化済み LP を正とし、PDF 直リンクは避けましょう。

ダッシュボードで Brief を開始し、業態・ターゲット・必須情報を対話整理してからスタジオで生成すると、手戻りが減ります。

公開後もスタジオで文言・写真・リンクを 5 分単位で更新できるため、外注リニューアルより現場の PDCA が回しやすくなります。

スマホ実機で公開 URL を開き、電話・地図・メニュー・問い合わせ導線が 3 スクロール以内に揃っているか確認してから、GBP と SNS に URL を設定しましょう。