WordPressでオンラインレストランメニューを作成する方法(ステップバイステップ)

かつて、レストランのウェブサイトが、携帯電話で読めないスキャンされたPDFメニューに過ぎなかった時代を覚えています。何十ものレストランのウェブサイトを近代化するのを支援してきた経験から、効果的なオンラインメニューを作成することは、複雑でも高価でもないことを学びました。

最近では、メニューをオンライン化することは選択肢ではなく、成功に不可欠です。考えてみてください。誰かがあなたの店で食事をすることに決める前に、ほぼ間違いなくオンラインであなたをチェックするでしょう。時代遅れで読みにくいメニューは、競合他社にクリックして移動させる確実な方法です。

そのため、WordPressでレストランのメニューを作成する方法について、私たちが学んだすべてを共有するためのステップバイステップガイドを作成しました。このガイドでは、見た目が美味しそうなだけでなく、WordPress初心者でも簡単に更新できるメニューを作成するために推奨する具体的なツールとテクニックをご紹介します。

WordPressでオンラインレストランメニューを作成する方法(ステップバイステップ)

レストランのウェブサイトを開始するために必要なものは何ですか?

オンラインレストランメニューを作成する前に、ウェブサイトを設定する必要があります。まだウェブサイトをお持ちでない場合でも、心配いりません。

WordPressを使えば簡単にウェブサイトを開始できます。WordPressは、何百万もの中小企業、レストラン、バー、カフェで利用されている、世界で最高のウェブサイトビルダーです。インターネット上の全ウェブサイトの43%以上がWordPressを使用しています。

何よりも、多額の初期投資なしでウェブサイトの構築を開始できます。

まず必要なのは、ドメイン名とウェブホスティングです。WordPress推奨ホスティングプロバイダーの1つであるBluehostと提携し、読者の皆様に素晴らしいディールを提供しています。

無料のドメイン名、無料のSSL証明書、そしてウェブホスティングの大幅な割引が受けられます。

代替案: Hostingerも推奨しています。彼らのプランには、無料のドメイン名とSSL、および大幅な割引が含まれています。

ホスティングとドメイン名に加えて、WordPressテーマも必要になります。テーマはウェブサイトのテンプレートのようなものです。

お客様に注文を促すプロフェッショナルなウェブサイトを作成するのに役立つ、素晴らしい WordPress レストランテーマ がたくさんあります。

ヘルプが必要な場合は、WordPressで簡単にレストランのウェブサイトを作成する方法に関するステップバイステップガイドをご覧ください。 WordPressで簡単にレストランのウェブサイトを作成する方法

WordPressでオンラインメニューを作成する理由

レストランのウェブサイトを訪問者にとってさらに魅力的なものにしたいですか? そのための最良の方法の1つは、WordPressサイトに美しく使いやすいオンラインメニューを追加することです。

考えてみてください。誰かがあなたのレストランのウェブサイトにアクセスしたとき、通常最初に探しているものは何でしょうか?メニューです!

さて、「すでにメニューがある、PDFだ!」と思っているかもしれません。それは始まりとしては良いですが、お腹を空かせたお客様にとって最良の体験ではありません。その理由は以下の通りです。

  • PDFは面倒なこともあります:PDFのダウンロードは、特にテクノロジーに詳しくない人や、インターネット接続が遅い人、データ通信量が限られている人にとっては、難しい場合があります。お客様がメニューを見やすくするために、できるだけ簡単にすることが重要です。
  • モバイルフレンドリーではない:当社のインターネット利用統計によると、モバイルトラフィックは全ウェブトラフィックの約55%を占めています。問題は、PDFメニューは小さな画面で読むのが大変で、ユーザーは常に拡大・縮小を繰り返さなければならないことです。見た目が良くありません!
読みにくいPDFメニュー

しかし、良いニュースがあります。WordPress サイトでオンラインメニューを作成することで、これらの問題はすべて解決します。その理由は次のとおりです。

  • ダウンロード不要:訪問者は、ページ上で直接、美味しそうな料理をすぐに確認できます。
  • あらゆるデバイスで見栄えが良い:オンラインメニューは、あらゆる画面サイズに合わせて自動的に調整されるようにデザインできるため、スマートフォン、タブレット、コンピューターで非常に読みやすくなります。
  • 更新が簡単:価格を変更したり、新しいスペシャルを追加したりする必要がありますか?オンラインメニューがあれば、それらの変更をすばやく簡単に行えます。PDFをいじって再アップロードするのを忘れてください。後でオンライン注文を追加することもできます。

これを踏まえ、WordPressにオンラインレストランメニューを追加するのに役立つ2つの異なるWordPressプラグインを紹介します。使用したいプラグインを選択するには、以下のクイックリンクを使用できます。

準備はいいですか?始めましょう。

方法1:SeedProdでWordPressにレストランメニューを追加する

WordPressで素晴らしいオンラインメニューを簡単に作成する方法についてお話ししましょう:SeedProdです。これは、100万以上のサイト(多くのレストランサイトを含む)で使用されている人気のドラッグ&ドロップWordPressページビルダーです。

SeedProdのホームページ

SeedProdを使えば、特別なコーディングスキルがなくても、食欲をそそるレストランのメニューを作成できます。要素をページにドラッグ&ドロップするだけで、美しいメニューが完成します。さらに、メニューを微調整する必要がある場合(新しい料理を追加したり、価格を調整したりする場合など)、SeedProdを使えば非常に簡単に変更できます。

私たちは長年SeedProdを使用しています。実際、パートナーのためにSeedProdを使用して多くのウェブサイトを構築しました。例えば、WPForms、Duplicator、WP Charitableのような素晴らしいサイトを考えてみてください。それほど信頼しています。

この素晴らしいプラグインには非常に多くの経験があるため、完全なSeedProdレビューも作成しました。それはすべての詳細に踏み込み、私たちの正直な考えを共有します。したがって、SeedProdができること、そしてなぜ私たちがそれを愛しているのかについてさらに詳しく知りたい場合は、私たちの完全なSeedProdレビューを必ず確認してください。

このチュートリアルでは、メニューの作成にSeedProdの無料版を使用できます。ただし、320以上のテンプレート、カラーテーマ、メールマーケティング連携、画像カルーセル、ソーシャルメディアブロックなどを備えたSeedProdのプロ版も利用可能です。

まず、SeedProdプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、SeedProd » Pages に移動し、「新しいランディングページを追加」ボタンをクリックします。

新しいSeedProdランディングページを追加

これでテンプレート画面が表示され、ページテンプレートを選択できます。

さまざまなニッチや目的に合わせた数十種類のテンプレートがあり、レストランのウェブサイト用も含まれます。

テンプレートを選択するには、テンプレートにカーソルを合わせ、「チェックマーク」アイコンをクリックします。好きなテンプレートを選択できますが、このチュートリアルでは「ディナー販売ページ」テンプレートを使用します。

ランディングページテンプレートを選択

これによりポップアップが表示され、新しいメニューページの名前を付け、URLを編集できます。たとえば、私たちのページは単に「メニュー」と呼んでいます。

次に、「保存してページの編集を開始」ボタンをクリックできます。

ランディングページの名前

これが完了すると、ページ編集画面に移動します。

ページの右側はプレビューで、完全にカスタマイズできます。ページの左側には、ページに追加できるさまざまなブロックやセクションがあります。

SeedProdランディングページテンプレートの例

ロゴのカスタマイズから始めましょう。ページロゴをクリックします。左側のパネルにカスタマイズオプションが表示され、レストランのロゴをアップロードできます。

新しいロゴを追加するには、WordPressに画像を挿入するのと同じプロセスに従うことができます。

メニューロゴの変更

次に、ナビゲーションメニューボタンを変更してホームページに戻れるようにします。これにより、訪問者はメニューの表示を終えたら、ウェブサイトに戻ることができます。

ナビゲーションメニューボタンをクリックするだけで、左側のメニューのテキストとリンクを変更できます。

メニューナビゲーションボタンを変更

その後、メインコンテンツセクションを削除できます。

ページの見出しにカーソルを合わせ、「ブロックを削除」アイコンをクリックするだけです。

既存のセクションを削除する

次に、画像、テキスト、ボタン要素についても同様に行うことができます。

次に、「見出し」ブロックをページにドラッグして、メニュータイトルの見出しを追加できます。他の要素と同様に、左側のメニューにカスタマイズオプションが表示されます。

メニューの見出しを追加

その後、既存の食品アイテムを編集し、独自のテキストと画像に置き換えることができます。

これを行うには、まず画像をクリックし、左側のメニューを使用して独自の画像をアップロードできます。

メニューアイテムの画像を追加

次に、現在の見出しをクリックして、メニューの説明を記述しましょう。

テキストをクリックすると変更できます。

メニュー項目のテキストを変更

見出しとテキストを変更したら、アイテムの価格を追加できます。

単に「テキスト」要素をページにドラッグし、左側のメニューでテキストをカスタマイズします。

メニュー項目の価格を追加

次に、レストランのメニューの残りのアイテムについても、上記と同じ手順に従ってください。

同じスタイルで別のメニューセクションを追加したい場合は、要素にカーソルを合わせて「行を複製」をクリックします。

これにより、同じ行のコピーが作成され、その直下に配置されます。

セクションの複製

レストランのメニューのカスタマイズを自由に進めてください。色、サイズ、フォントなど、ページのあらゆる部分を完全にカスタマイズできます。

すべてのアイテムに写真を載せる必要がない場合は、リストブロックを使って簡単にメニューアイテムを追加できます。

または、SeedProd にはレストランのメニューをわずか数秒で作成できる AI ビルダーがあります。その使用方法の詳細については、AI を使用して WordPress ウェブサイトを作成する方法 に関するガイドを参照してください。

オンラインレストランメニューの作成が完了したら、「保存」ボタンの横にあるドロップダウン矢印をクリックして「公開」を選択できます。

メニューをライブ公開

新しいレストランメニューが訪問者に見てもらえるようになりました。

これで、レストランのメニューをナビゲーションメニューやウェブサイトの他のエリアに追加できます。

WordPress レストランメニュー

方法2:Food MenuでWordPressにレストランメニューを追加する

この方法では、Food Menu – Restaurant Menu & Online Ordering プラグインを使用します。このプラグインを使用すると、WordPressでオンラインメニューをすばやく作成できます。

WooCommerceとも統合されているため、訪問者にオンライン注文を行うオプションを提供できます。

WordPressプラグインディレクトリ内のフードメニューのバナー

まず、Food Menu – Restaurant Menu & Online Orderingプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法の初心者向けガイドをご覧ください。

有効化したら、フードメニュー » フードを追加に移動します。

新しいメニュー項目を追加

この画面では、メニュー項目の名前、説明、画像を入力できます。

その後、「更新」または「公開」ボタンをクリックしてメニュー項目を保存します。

新しいメニューアイテムを公開

メニューにさらに項目を追加するには、上記のステップに従ってください。

食品メニューにアイテムを追加し終えたら、サイトに追加する時期です。

まず、フードメニュー » ショートコードジェネレーターに移動し、「新規追加」ボタンをクリックします。

ショートコードジェネレーターに移動

次に、追加したメニュー項目の種類を覚えておくのに役立つように、ショートコードにタイトルを付けます。

次に、メニューの表示方法をカスタマイズできます。

メニューショートコードに名前を付ける

デフォルトオプションはそのままにしますが、メニューの表示方法は「レイアウト」セクションの設定でカスタマイズできます。

ここで、1行あたりの表示項目数を選択できます。

ショートコードレイアウトを変更

「フィルタリング」タブでは、シンプルなメニューを表示するか、オンライン注文を有効にするかを選択できます。

オンライン注文を有効にするには、「WooCommerce」ラジオボタンを選択するだけです。表示したいアイテムを制御することもできます。

ショートコードフィルタリング

お客様が食品をカートに追加してチェックアウトできるようにする場合は、WooCommerceストアにメニュー項目を製品として追加する必要があります。

商品の追加の詳細については、オンラインストアの開始方法 に関するステップバイステップガイドを参照してください。

次に、「フィールド選択」タブをクリックして、各アイテムに表示される情報をカスタマイズできます。

フィールド選択ショートコード

ボックスをチェックまたはチェック解除すると、変更のリアルタイムプレビューを確認できます。

メニューアイテムの外観を変更したい場合は、「スタイル」タブに切り替えることができます。

ショートコードのスタイリング

完了したら、「公開」ボタンをクリックしてください。

これでメニューがサイトに公開されるわけではありませんが、後で追加するショートコードが保存されます。

メニューのショートコードを公開

次に、メニューを表示するページを作成する必要があります。

これを行うには、まずページ » 全ページに移動し、「新規追加」をクリックします。

メニュー用のページを追加

その後、ページにタイトルを付けることができます。これは訪問者に表示されるため、「メニュー」のようなわかりやすい名前を付けたいでしょう。

次に、「+」アイコンをクリックして新しいブロックを追加します。

メニューページブロックを追加

検索バーに「メニュー」と入力して、「フードメニュー」ブロックをすばやく見つけましょう。

その後、表示されたら「フードメニュー」ブロックを選択できます。

フードメニューブロックを選択

次のステップは、ドロップダウンメニューから作成したショートコードを選択することです。

これにより、メニューがページに挿入されます。

メニューのショートコードを選択

次に、「公開」または「更新」ボタンをクリックするだけで、メニューが公開されます。

このページには、テキスト、お問い合わせフォームInstagramフィードなどの他の要素を追加することもできます。

新しいメニューを公開

これで、訪問者がメニューを表示する際に、アイテムを表示したり、WooCommerce機能を追加した場合は注文したりすることもできます。

メニューが表示される画面サイズに関係なく、メニュー項目は完璧に表示されます。

WordPressメニューの例

ボーナスのヒント:レストランのウェブサイトを宣伝するためのツール

レストランのウェブサイトをメニューページで設定したら、ビジネスを成長させるために宣伝したくなるかもしれません。

あなたのレストランビジネスを宣伝し成長させるのに役立つ、最高のツールをいくつかご紹介します。

  • WordPress用All in One SEO - ウェブサイトのSEOを最適化して検索トラフィックを増やすのに役立つ、最高のWordPress SEOプラグインです。「ローカルSEO」機能は、人々がGoogleマップやローカル検索結果であなたのレストランを見つけるのに役立ちます。
  • WPForms – WordPress用の最高のフォームビルダープラグインで、ウェブサイト用のあらゆるフォームを作成できます。これには、お問い合わせフォーム、フィードバックフォーム、顧客アンケートフォームなどが含まれます。
  • OptinMonster – ウェブサイト訪問者を購読者や顧客に転換するのに役立ちます。これを使用して、メールリストやソーシャルメディアのフォロワーを増やしたり、顧客にターゲットを絞ったメッセージを表示したりできます。
  • PushEngage – これは、デバイスの種類に関係なく、ウェブサイト訪問者にプッシュ通知を送信するのに役立ちます。また、顧客にターゲットメッセージを送信し、ウェブサイトに戻ってもらうのにも役立ちます。PushEngageでは、WhatsAppチャットボックスを追加することで、リアルタイムで顧客とコミュニケーションをとることもできます。
  • MonsterInsights – WordPress向けの最高のGoogleアナリティクスプラグイン。ウェブサイトの訪問者がどこから来て、ウェブサイトで何をしているかを追跡できます。

その他のプラグインの推奨事項については、ビジネスWebサイト向けの必須WordPressプラグインの専門家によるピックをご覧ください。

この投稿で、WordPressでオンラインレストランメニューを作成する方法を学べたことを願っています。次に、フードブログの始め方レシピカードの作成方法に関するガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

1 CommentLeave a Reply

  1. ウェブサイトのセットアップを手伝った経験から、デザイン性の高いオンラインメニューがいかに重要か、いくら強調してもしすぎることはありません。SeedProdを使った方法は、信じられないほど役立ち、わかりやすいです。特に、メニューをモバイルフレンドリーにすることに関するヒントは非常に価値があると思いました。今日のスマートフォン時代には不可欠です。

    追加の提案として、最も人気のある料理の高品質な写真を追加することを検討することをお勧めします。私の経験では、食欲をそそる画像は顧客の関心と注文を大幅に高めることができます。

    素晴らしいリソースをもう一つ提供してくれたWPBeginnerに感謝します。

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。