Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

WordPressでオンラインレストランメニューを作成することは、より多くのカスタマーを惹きつけるスマートな方法です。

メニューがウェブサイトに掲載されていれば、来店を決めたり、オンラインで注文したりするのが簡単になります。デザイン性の高いメニューは、あなたのビジネスを際立たせます。

しかし、多くのレストランオーナーはオンラインメニューをうまく作るのに苦労しています。WordPressの技術的な側面は、特に初めての方にはわかりにくいものです。さらに、メニューが使いにくかったり、古く見えたりすると、カスタマーの不満が募って離れていってしまうかもしれません。

良いニュースは、適切なツールと少しのガイダンスがあれば、あなたの顧客を感動させるオンラインレストランメニューを作成することができるということです。

この記事では、WordPressでオンラインレストランメニューを作成する方法をステップバイステップでご紹介します。この記事では、WordPressでオンラインメニューを作成する方法をステップバイステップでご紹介します。

How to create an online restaurant menu in WordPress (step by step)

レストランサイトを立ち上げるには何が必要か?

オンラインレストランメニューを作成する前に、サイトを立ち上げる必要があります。まだサイトをお持ちでない方もご安心ください。

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

そして何より、多額の先行投資をすることなく、サイト構築を始めることができる。

まず必要なのはドメイン名とホスティングサービスです。私たちは、WordPressが推奨するホスティングサービスプロバイダーのひとつであるBluehostと契約を結び、読者にお得なサービスを提供しています。

無料のドメイン名、無料のSSL証明書、ホスティングサービスの大幅な割引が受けられます。

代替: Hostingerもお勧めです。Hostingerのプランには、無料のドメイン名とSSLが含まれており、割引も充実しています。

ホスティングサービスやドメイン名だけでなく、WordPressテーマも必要です。テーマはサイトのテンプレートのようなものです。

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

WordPressでレストランのウェブサイトを簡単に作成する方法については、こちらのステップバイステップガイドをご覧ください。

なぜWordPressでオンラインメニューを作るのか?

WordPressサイトにオンラインレストランメニューページを作成することで、訪問者や潜在顧客により良い体験を提供することができます。

あなたのレストランのウェブサイトに訪問者が来たとき、通常最初に見るのはメニューです。

来店客にPDFのメニューしか提供しないのであれば、来店客に料理の選択肢を見てもらうことが難しくなります。また、PDFのダウンロードは、カスタマーの技術力やデータプラン、接続環境によっては難しい場合もある。

A hard to read PDF menu

ウェブサイトにオンラインメニューを作成することで、ユーザーはメニューをダウンロードする必要がなくなります。

さらに、ウェブサイトのメニューページはモバイルデバイスに対応し、見栄えも良いので、訪問者はズームインやズームアウトすることなく簡単に読むことができます。

何より、メニューページがあれば、メニューの編集やオンライン注文の追加も簡単にできます。一方、PDFを使用すると、メニューや価格を変更する必要がある場合に、編集やアップロードが非常に難しくなります。

そこで今回は、WordPressにオンライン・レストランのメニューを追加するのに役立つ2種類のWordPressプラグインをご紹介します。下記のクイックリンクからお好きなプラグインをお選びください:

準備はいいかい?始めよう

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

WordPressでオンラインレストランのメニューを作成するには、SeedProdを使用することをお勧めします。100万以上のサイトで使用されているドラッグ&ドロップ式のWordPressページビルダーです。

SeedProd's homepage

SeedProdでは、ドラッグ&ドロップのビルダーを使って、魅力的なレストランメニューを作成することができます。さらに、メニューの変更や新しいメニューオプションの追加も簡単に編集できます。

このチュートリアルでは、SeedProdの無料版を使用してメニューを作成することができます。しかし、SeedProdのプロバージョンは320以上のテンプレート、配色、メールマーケティング統合、イメージカルーセル、ソーシャルメディアブロック、その他多くの機能を備えています。

最初に行う必要があるのは、SeedProdプラグインをインストールして有効化することです。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、SeedProd ” Pagesに移動し、’Add New Landing Page’ボタンをクリックしましょう。

Add new SeedProd landing page

ページ・テンプレートを選択することができます。

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

テンプレートを選択するには、マウスオーバーして「チェックマーク」アイコンをクリックします。お好きなテンプレートをお選びいただけますが、チュートリアルでは「ディナーセールスページ」テンプレートを使用します。

Select landing page template

新しいメニューページに名前を付け、URLを編集するポップアップが開きます。例えば、私たちは単純にページを’Menu’と呼びます。

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

Name landing page

そうすると、ページエディター画面になります。

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

SeedProd landing page template example

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

新規ロゴを追加するには、WordPressに画像を追加するのと同じ手順で行うことができます。

Change menu logo

次に、ナビゲーションメニューのボタンをホームページに戻るように変更します。そうすれば、訪問者がメニューを見終わった後、あなたのウェブサイトに戻ることができます。

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

Change menu navigation button

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

ページの見出しにマウスオーバーし、「ブロック削除」アイコンをクリックするだけです。

Delete existing sections

次に、画像、テキスト、ボタンの各要素に同じ操作を行います。

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

Add menu headline

その後、既存の食品項目を編集し、独自のテキストや画像に置き換えることができる。

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

Add menu item image

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

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

Change menu item text

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

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

Add menu item price

あとは、上記と同じ手順で、レストランのメニューの残りの項目を作るだけです。

同じスタイルで別のメニューセクションを追加したい場合は、要素の上にマウスオーバーして「Duplicator Row」をクリックします。

これで同じ行のコピーが作成され、真下に追加される。

Duplicate section

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

すべての項目に写真を追加したくない場合は、リストブロックを使って簡単にメニュー項目を追加できます。

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

Publish menu live

新しいレストランメニューが完成しました。

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

WordPress restaurant menu

方法2:WordPressにフードメニューを追加する

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

また、WooCommerceと統合しているので、訪問者にオンライン注文のオプションを与えることができます。

Food Menu's banner in the WordPress plugin directory

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

アクティベーションが完了したら、フードメニューの「フードの追加」をクリックしてください。

Add new menu item

この画面で、メニューの名前、説明、画像を入力することができます。

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

Publish new menu item

メニューを増やすには、上記の手順に従ってください。

フードメニューの追加が完了したら、今度はそれをサイトに追加します。

まず、Food Menu ” ShortCode Generatorにアクセスして、「新規追加」ボタンをクリックしてください。

Go to shortcode generator

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

そして、メニューの表示方法をカスタマイズすることができます。

Name your menu shortcode

初期設定のオプションのままにしておきますが、’Layout’セクションの設定でメニューの表示方法をカスタマイズすることができます。

ここでは、行ごとに表示する項目の数を選択できます。

Change shortcode layout

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

オンライン注文を有効にするには、「WooCommerce」ラジオボタンを選択するだけです。どの項目を表示するかコントロールすることもできます。

Shortcode filtering

もしお客様が食品をカートに追加してチェックアウトできるようにする予定であれば、WooCommerceストアに商品としてメニューを追加する必要があります。

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

次に、「フィールド選択」タブをクリックして、各項目に表示される情報をカスタマイザーすることができます。

Field selection shortcode

チェックを入れたり外したりすると、リアルタイムでプレビューが表示されます。

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

Shortcode styling

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

これはまだあなたのサイトにメニューを表示しませんが、以下に追加するショートコードを保存します。

Publish menu shortcode

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

これを行うには、まず「ページ」 ” 「すべてのページ」を開き、「新規追加」をクリックします。

Add page for menu

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

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

Add menu page block

検索バーに「Menu」と入力して、「Food Menu」ブロックを素早く見つけよう。

フードメニュー」ブロックが表示されたら、それを選択する。

Select food menu block

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

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

Select menu shortcode

そして、’Publish’または’Update’ボタンをクリックするだけで、メニューがライブになります。

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

Publish new menu

WooCommerce機能を追加すれば、訪問者がメニューを表示したときに、項目を表示し、注文することもできます。

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

WordPress menu example

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

せっかくレストランのサイトにメニューページを設けたのだから、それを宣伝してビジネスを発展させたいところだ。

以下は、あなたのレストランビジネスを促進し、成長させるのに最適なツールです:

  • All In One SEO for WordPress-より多くの検索トラフィックを得るためにあなたのウェブサイトのSEOを最適化するのに役立ちます最高のWordPress SEOプラグイン。その’ローカルSEO’機能は、人々がGoogleマップやローカル検索結果であなたのレストランを見つけるのに役立ちます。
  • WPForms– WordPressのための最高のフォーム作成プラグインです。お問い合わせフォーム、フィードバックフォーム、カスタムアンケートフォームなどがあります。
  • OptinMonster– ウェブサイトの訪問者を購読者やカスタマに変換するのに役立ちます。メールリストやソーシャルメディアのフォロワーを増やしたり、ターゲットを絞ったメッセージをカスタマに表示したりするのに使えます。
  • PushEngage– デバイスの種類に関係なく、サイト訪問者にプッシュ通知を送信できます。また、カスタマイザーにターゲットを絞ったメッセージを送信し、サイトを再訪問してもらうこともできます。
  • MonsterInsights– WordPressのための最高のGoogleアナリティクスプラグイン。ウェブサイトの訪問者がどこから来て、彼らはあなたのサイトで何をするかを追跡することができます。

その他のおすすめプラグインについては、専門家が選んだビジネスウェブサイトに必須のWordPressプラグインをご覧ください。

WordPressでオンラインレストランメニューを作る方法をご紹介しました。次は、料理ブログの始め方やレシピカードの作り方についてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

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