
『BAYCOOK』様 ホームページリニューアル
京丹後・久美浜のカフェレストラン「BAYCOOK」様のホームページリニューアル。入店の待ち時間にスマホでメニューを見るお客様に合わせ、機能を絞ってメニューの見やすさに特化しました。WordPressをカスタマイズし、曜日や期間に応じて表示するメニューが切り替わります。
入店を待つ間、スマホでメニューを見ている人がいた
BAYCOOK(ベイクック)様は、京丹後・久美浜の海辺にあるカフェレストランです。いつもお客様が多く、入店までに待ち時間が出ることもしばしばあります。
その待ち時間に、スマホでメニューを見ている人がいました。ただ、当時のホームページはメニューが見やすい状態にはなっていませんでした。
今回のリニューアルは、この一点から考えはじめています。

スマートフォンで見たトップページ。画面下部にメニューへのボタンを常に表示している
載せないものを先に決めた
お店は忙しく、日々の発信はInstagramの更新で手一杯という状況でした。
更新されないまま古くなる情報が並んでいるより、更新できるものだけに絞ったほうがよい。そう考えて、不要な情報と機能を思い切って省きました。
ナビゲーションは「トップ」「メニュー」「店舗案内」の3つだけです。日々の発信はInstagramに任せ、サイトからはリンクでつないでいます。ご予約はお電話で承っています。
いま出せるメニューだけを表示する
メニューに特化すると決めた以上、「サイトで見たメニューが実際と違う」ことは避けたいところです。
そこでWordPressの機能を大きくカスタマイズし、状況に応じて表示するメニューが切り替わるようにしました。
- 平日と週末で、表示するメニューを切り替える
- 期間限定のメニューを、その期間だけ表示する
- 一定期間だけ料金が変わるメニューに対応する
- 営業状況のお知らせを、必要なときだけ表示する
下の画像にある「現在、短縮メニューで営業しております」という表示も、この仕組みによるものです。

メニューページ。カテゴリーごとのタブと、営業状況のお知らせを表示している
待ち時間に、片手で読めるように
メニューはカテゴリーごとのタブで切り替え、横に送って見られるようにしています。

スマートフォンでのメニュー表示。タブを切り替えながら横に送って見られる
気になるメニューをタップすると拡大表示され、そのまま読めます。紙のメニューと同じデザインをそのまま使っているため、店内で見るものと同じ感覚で確認できます。

メニューをタップすると拡大表示され、待ち時間にそのまま読める
公開中のサイトはこちらです: https://baycook.jp/
この構成は一例です
ここで紹介した構成は、BAYCOOK様の状況に合わせたものです。機能を減らすことや、メニュー表示に特化することが、どのお店にも当てはまるわけではありません。何を載せて何を載せないかは、お店の忙しさや、お客様がサイトを見る場面によって変わります。制作事例のひとつ、あくまで一例としてご覧ください。
関連する開発コラム

LINE公式アカウントのリッチメニューから表示させるページ作成に便利!『ChotPage』
シンプルなページを作るためだけの『ChotPage』はLINE公式アカウントのリッチメニューから表示させるシンプルなページ作成にちょうどいいツールです。

ブログ記事のURL(スラッグ)をAIが提案してくれるツール『おまかせスラッグ』
ブログ記事のURLの末尾(スラッグ)って毎回考えるのもAIにチャットでたずねるのもめんどくさいですよね。それを改善するためのツールです

『NAIL SALON R』様メニュー予約システム
ネイルサロンさんの予約システムです。LINE公式アカウントのリッチメニューから表示されて、希望予約内容もLINEで送ることができます。