シマの食事処マサイ

サイトの概要

「シマの食事処マサイ」は、飲食店・食事処＋カフェ業態を想定した制作サンプルです。海の青を基調にした配色で海辺の開放感を演出し、トップページのヒーローは写真のスライドショー、こだわり紹介は写真とテキストを左右交互に配置するレイアウトを採用しています。ランチとカフェタイムという2つの利用シーンがあるお店のため、メニューも営業時間もその2つに分けて書き分けました。

最大の特長は、Googleカレンダーと連携したオンライン予約システムです。日付→人数→時間帯→お客様情報→確認→完了という流れで、来店予約がその場で確定します。予約が入るとお店のGoogleカレンダーに書き込まれるため、スタッフはいつも見ているカレンダーを開くだけで当日の予約状況を把握できます。予約台帳のための新しい画面を覚え直す必要がありません。

デザイン・構成のポイント

予約機能で重視したのは「空いている時間だけを見せる」ことです。カレンダー上の予定と受付設定から空き状況を自動で判定し、埋まっている枠は選べないようにしています。予約が完了すると、店舗宛の通知メールとお客様宛の確認メールが自動で送られるため、電話のメモを取り違える心配もありません。迷惑予約対策としてreCAPTCHAにも対応しています。

予約の受付停止・受付人数の上限・利用規約の文言といった設定は、管理画面から変更できます。同じ管理画面からお知らせの投稿もでき、一覧ページと記事ページはデータベースの内容から自動でつくられるので、HTMLを触る必要はありません。台風で臨時休業する日は予約受付を止める、という飲食店で実際に起きる運用まで、お店側の操作で完結します。

トップページには「Web予約ができるようになりました」という告知バナーを置き、これまで電話で予約されていた既存のお客様にも新しい導線が伝わるようにしました。アクセスページには那覇空港からの所要時間や路線バスの最寄りバス停まで記載しています。観光のお客様が多い立地では、この一行があるだけで問い合わせの手間が減ります。「お店について」のページでは、朝獲れの魚介・島野菜・自家焙煎コーヒー・海を望むテラス席（ペット同伴可）という4つのこだわりを写真つきで並べ、なぜこの店に来る価値があるのかを説明しています。

ページ構成

• TOP
• メニュー（お食事・カフェタイム）
• アクセス・店舗情報
• お店について
• ご予約（オンライン予約）
• お問い合わせ
• お知らせ（一覧・記事）
• 管理画面

主な機能

• PHP
• レスポンシブ
• オンライン予約フォーム（Googleカレンダー連携・空き状況自動判定）
• 予約完了メール（店舗通知・お客様控え）
• reCAPTCHAによる迷惑予約対策
• 管理画面（お知らせ投稿・予約受付設定）
• お知らせ一覧・記事ページ（データベース連動）
• ヒーロースライドショー
• よくある質問（アコーディオン形式）
• Googleマップ埋め込み
• お持ちの画像差し込み8枚程度
• ロゴ作成

こんな業種におすすめの構成です

飲食店のほか、美容室・整体院・スクール・レンタルスペースなど「日時と人数で枠を押さえる」予約が発生する業種にそのまま応用できます。営業中に予約の電話対応まで手が回らない、営業時間外の予約を取りこぼしている、というお店ほど効果が分かりやすく出ます。予約は電話だけで十分という場合は、同じデザインのまま予約機能を外した静的サイトとしてお作りすることもできます。反対に、席ごとの管理や事前決済まで必要になる場合は、システム開発として個別にご相談ください。

その他対応可能な内容（一例）

• Googleアナリティクス（GA4）タグの設置
• OGPタグの設定
• 子ページの追加
• 検索エンジン用サイトマップの設置
• 予約受付条件のカスタマイズ（人数上限・利用規約文言など）
• WordPressの導入・構築