飲食店のメニューは、新商品を追加したり、価格を変更したり、期間限定メニューを削除したりと、何かと更新する機会がありますよね。
そのたびにホームページの担当者に依頼したり、ご自身でWordPressを編集したりするのは大変ではないでしょうか。
そこで今回は、そんな悩みを解決する方法のひとつとして、Googleスプレッドシートを使ってWordPressを操作せずにメニューを更新できるデモサイト「洋食喫茶 Mellow」を制作しました。
※「洋食喫茶 Mellow」はデモ用の架空店舗です。実在の店舗とは一切関係ありません。
もちろん、QRコードからもデモサイトを開くことができます。
各テーブルに設置しておけば、お客さんが自分のスマートフォンからアクセスできるイメージが湧きますよね。
このデモサイトの最大の特徴は、WordPressを操作することなく、Googleスプレッドシートからサイトに掲載するメニューを更新できることです。
その中でも、特に私が推したい機能はこちらです。
メニューに使用する画像は、Googleドライブにアップロードして、割り当てられた画像URLをスプレッドシートに入力するだけ。
WordPressにログインして画像をアップロードしたり、記事を編集したりする必要はありません。
完売してしまった商品をメニュー上ですぐにグレーアウトさせられます。
営業中であっても、手元のスマートフォンやパソコンからスプレッドシートの「販売状態」を「完売」に変更するだけです。
すると、該当するメニューがグレーアウトし、詳細ページにもアクセスできないようになります。
新しく追加したメニューを目立たせたいときは、スプレッドシートのプルダウンから「NEW」を選ぶだけで、メニュー上に「NEW」ラベルを表示できます。
購買意欲をかき立てるためにも必須の機能ですよね。
実際にどのような項目を設定しているのか、以下のリンクから確認できます。
ここまで紹介した機能は、すべて上記のGoogleスプレッドシートから操作できるようになっています。
※スプレッドシートは閲覧専用のため編集はできません
しかし、当然ですが、単純にスプレッドシートに表を作ればメニューを更新できるわけではありません。
では、どういう構造かというと、WordPress・Googleスプレッドシート・Google Apps Scriptの3つをうまく連携して作りました。
簡単に説明すると、Googleスプレッドシートに入力したメニュー情報をGoogle Apps Scriptで取得し、そのデータをWordPressに読み込んで表示しているという仕組みです。
といっても、わかりにくいと思うので、つまりこの3つを活用するだけでWordPressを操作することなく、スプレッドシートからメニューを更新できるサイトが作れるんだと思っておいてください笑
この記事は制作マニュアルではないので、細かい作り方は書きません。
ただ、スプレッドシートだけで更新できることに感動したので裏側も少し公開したいと思います。
「連携して作る」などと言いましたが、AIが大体のことはやってくれるので、やることといえば出されたものをコピペするくらいなものです。
AIはChatGPTの無料版で十分です。
最初に用意するのは、メニュー情報を管理するGoogleスプレッドシートです。
商品名や価格、画像URL、販売状態など、サイトに表示したい情報を項目ごとに入力していきます。
表すら自分で入力する必要はありません。
AIが出してくれます。
項目は後からでも変更したり追加したりできるのでざっくりでも大丈夫です。
ただし、AIの作る表はエクセルデータだったりするので、変換したりコピペしたりする手間は発生するかもしれません。
「スプレッドシートでくれ」と言えば出してくれることもあります。
言い忘れましたが、「スプレッドシートで更新できる飲食店のサイトを作りたい」と最初に明示しておけばChatGPTは順番にやるべきことを教えてくれるはずです。
スプレッドシート上の表ができたのならば、「できたよ」といえば次はGoogle Apps Scriptにこのコードを貼りつけてねと、勝手に出してくれるはずです。
※AIの回答は環境によって違うので、うまく会話して導いてあげてくださいね。
今さらですけど、ここで全体の手順も書いておきたいと思います。
設定するのは以上の6ヶ所だけなんです。
そして、今回のデモサイトのように写真を使用したい場合は、Googleドライブにアップロードする必要があります。
Googleには、15ギガという容量制限がありますが写真だけでしたらそれほど気にしなくてもよいかなと思います。
心配であれば、写真をWebPなどに変換して軽くしましょう。
デモサイトではめんどくさいのでやっていません。
アップロードした写真にはURL（共有リンク）が割り当てられるので、そのURLをスプレッドシートに記載することで読み取れるようにする仕組みを作るんです。
ちなみに私は、「デモサイト画像」というフォルダに今回使用したAI画像をまとめています。
なぜかと言うと、「デモサイト画像」フォルダ全体の権限を「リンクを知っている全員が閲覧可能」にしておかないと、URLをコピーするたびに許可を求められるからです。
毎回、共有設定をする手間を省けるので最初にやっておくとよいでしょう。
ただし、権限の設定を間違えると他のファイルまで見られてしまう可能性があるので注意しましょう。
では、実際に表が完成したら、上部メニューにある「拡張機能」から「Apps Script」を選択します。
ここから、先述したGoogle Apps Scriptをいじっていくパートです。
最初に表示されているコードは削除して、AIに作成してもらったコードをそのまま貼り付けます。
中身を読む必要はありません。
そのままコピペすれば大丈夫です。
コピペしたら保存して、次に右上の「デプロイ」から「新しいデプロイ」を選択します。
種類を「ウェブアプリ」に指定して、アクセスできるユーザーを「全員」に設定してデプロイしてください。
ここでGoogleアカウントへのアクセス許可を求められる可能性が高いので、画面の案内に従って許可しましょう。
（「安全なサイトに戻る」、ではなく「詳細」や「高度な設定」だと思います）
※環境によって表示が異なります
タイトルは「無題のプロジェクト」のままでも問題ありません。
結局私もそのままにしています。
デプロイが完了すると、ウェブアプリのURLが発行されます。
このURLは後ほどWordPressの設定で使用するので、コピーして控えておくとよいでしょう。
もし見失っても、「デプロイの管理」から見られるはずなので大丈夫です。
続いてWordPressの設定をしていきます。
もし、今この記事を見て、自分で作ってみようとなった場合は、ここが一番の難関かもしれません。
AIライティングをしていてWordPress入稿の経験がある方や、HTMLを少しでも書いた経験がある方なら、それほど難しくないと思います。
しかし、普段はネットサーフィンくらいしかしないという方には、少しハードルが高いかもしれません。
ここでやることは「Code Snippets」というプラグインを入れることです。
これが今回のデモサイトの心臓部とも言える部分です。
正しく設定できていないと、サイトが機能しません。
プラグインを追加して有効化できたら、「スニペットを追加」で新規のスニペットを作っていきましょう。
とは言っても、AIが出したコードをコピペして、「保存して有効化」するだけです。
正直に申し上げると、「洋食喫茶 Mellow」で使っているスニペットは空欄を含めると、700行を超えるコードになりました。
でも、AI頼みの汚いコードだと思うのでまあこんなもんかなと笑
自力で書くわけじゃないので大丈夫です。
長すぎて実際にお見せすることはできませんが、表示がおかしいときもAIに「ここがおかしい」と伝えればいいんです。
例えば、
とか質問して勝手に解決の道筋を示してくれます。
めんどうなのは、
とか言われたときですかね。
探すのが大変だったり、コピペするときに間違えたりするんですよね。
なので、AIの機能制限でできない場合もありますが、「コピペするから全部書き直して！」と言って全部出してもらうのもアリだと思います。
臨機応変にやってみてください。
スニペットの設定ができたら、いよいよサイトとして表示するための準備をしていきたいと思います。
これが終わったら、今まで苦労して設定してきた部分が正しかったのか、ついに実物を見て確認することができます。
今回のデモサイトでは、メニュー一覧を表示するページ用と、個別のメニュー詳細を表示するページ用の2つの固定ページを作りました。
（実は「固定ページ」ではなく「投稿」からでもできますが今回は割愛します）
そして、それぞれの固定ページにAIが指定したショートコードを貼り付けるだけです。
たった1行だけです。
これであのデモサイトが表示されているんです。
すごくないですか？
私はこのページを見るたびにびっくりして笑えてきます。
ちなみにこのショートコードは、先ほどのスニペットの中で指定したものなので、探さなくてもAIが把握しているはずです。
さらに、ここでスプレッドシートに入力した「アレルギー情報」や「料理のこだわりポイント」が生きてくるんです。
メニュー詳細のページもスプレッドシートに記載した内容をもとに自動で表示されるので、めちゃくちゃ楽じゃないですか？
最後は、実際に表示されたサイトを確認して、気になる部分をCSSで整えていきます。
デモサイトでは固定ページの「個別CSS」もしくは、スニペットの「<style>…</style>」の部分で書いています。
外観の「追加CSS」でもできますが、サイト全体に影響してしまうので上記のどちらかがオススメかなと思います。
※デモサイトはテーマ「Cocoon」を使用しているので環境によっては異なる場合があります
まあAIが書いてくれますから指示に従ってください。
ここでやることと言えば、背景色や文字の大きさ、メニューのカードやボタンのデザインなどを自分好みにしていくことです。
改行がおかしいとかそういうのもですね。
納得がいく形になったら完成です。
実はこういったサービス（スプレッドシートで更新できるウェブサイト）というのは、2025年から展開している企業さんもあるみたいですね。
私は売るわけじゃありませんが。
結局、解説マニュアル寄りになってしまいましたが、「中途半端でわかんないよ！」って怒らないでくださいね笑
余談ですが、私はブログで乃木坂46・櫻坂46・日向坂46が出演しているTVer配信中の番組をまとめた一覧を、デモサイトと似たような仕組みで運用しているんです。
それがきっかけで、「飲食店のメニューサイトも作れるじゃん！」と思って挑戦してみたわけです。
ただし、デモサイトにはまだまだ課題もあります。
注文機能や決済機能がないんですよね。
なので、実際にお店で使ってもらうには不十分かなと思っています。
また、スプレッドシートやGoogle Apps Scriptの処理能力には制限があるので、アクセス数やデータ量が大きいサイトには向いていないんですよね。
それでも、まずは注文機能の実装にトライしてみたいと思っています。
うまく実装できたら、また記事にしてみたいですね。
あなたの生活がちょっと楽しくなりますように。
▼ 当サイトのおすすめ記事はこちら
文責：納品に疲れたクリエイター
