開発コラム一覧に戻る
BAYCOOK様のホームページ。トップページのファーストビュー

『BAYCOOK』様 ホームページリニューアル

岡村 直昭
---
ホームページ制作WordPressカフェ・レストランメニュー

京丹後・久美浜のカフェレストラン「BAYCOOK」様のホームページリニューアル。入店の待ち時間にスマホでメニューを見るお客様に合わせ、機能を絞ってメニューの見やすさに特化しました。WordPressをカスタマイズし、曜日や期間に応じて表示するメニューが切り替わります。

入店を待つ間、スマホでメニューを見ている人がいた

BAYCOOK(ベイクック)様は、京丹後・久美浜の海辺にあるカフェレストランです。いつもお客様が多く、入店までに待ち時間が出ることもしばしばあります。

その待ち時間に、スマホでメニューを見ている人がいました。ただ、当時のホームページはメニューが見やすい状態にはなっていませんでした。

今回のリニューアルは、この一点から考えはじめています。

スマートフォンで見たトップページ。画面下部にメニューへのボタンを常に表示している

スマートフォンで見たトップページ。画面下部にメニューへのボタンを常に表示している

載せないものを先に決めた

お店は忙しく、日々の発信はInstagramの更新で手一杯という状況でした。

更新されないまま古くなる情報が並んでいるより、更新できるものだけに絞ったほうがよい。そう考えて、不要な情報と機能を思い切って省きました。

ナビゲーションは「トップ」「メニュー」「店舗案内」の3つだけです。日々の発信はInstagramに任せ、サイトからはリンクでつないでいます。ご予約はお電話で承っています。

いま出せるメニューだけを表示する

メニューに特化すると決めた以上、「サイトで見たメニューが実際と違う」ことは避けたいところです。

そこでWordPressの機能を大きくカスタマイズし、状況に応じて表示するメニューが切り替わるようにしました。

  • 平日と週末で、表示するメニューを切り替える
  • 期間限定のメニューを、その期間だけ表示する
  • 一定期間だけ料金が変わるメニューに対応する
  • 営業状況のお知らせを、必要なときだけ表示する

下の画像にある「現在、短縮メニューで営業しております」という表示も、この仕組みによるものです。

メニューページ。カテゴリーごとのタブと、営業状況のお知らせを表示している

メニューページ。カテゴリーごとのタブと、営業状況のお知らせを表示している

待ち時間に、片手で読めるように

メニューはカテゴリーごとのタブで切り替え、横に送って見られるようにしています。

スマートフォンでのメニュー表示。タブを切り替えながら横に送って見られる

スマートフォンでのメニュー表示。タブを切り替えながら横に送って見られる

気になるメニューをタップすると拡大表示され、そのまま読めます。紙のメニューと同じデザインをそのまま使っているため、店内で見るものと同じ感覚で確認できます。

メニューをタップすると拡大表示され、待ち時間にそのまま読める

メニューをタップすると拡大表示され、待ち時間にそのまま読める

公開中のサイトはこちらです: https://baycook.jp/

この構成は一例です

ここで紹介した構成は、BAYCOOK様の状況に合わせたものです。機能を減らすことや、メニュー表示に特化することが、どのお店にも当てはまるわけではありません。何を載せて何を載せないかは、お店の忙しさや、お客様がサイトを見る場面によって変わります。制作事例のひとつ、あくまで一例としてご覧ください。

この記事を書いた人

岡村 直昭

ONE Point. 代表。AIとウェブ開発を活用したビジネス支援を行っています。

関連する開発コラム