# WordPressでレストランサイトを構築する URL: https://canvaswp.com/ja/guides/build-a-restaurant-website-with-wordpress/ Updated: 2026-11-03 ガイド レストランのウェブサイトには、4つの役割があります。料理を見せること、足を運ぶ価値のある店内の雰囲気を伝えること、予約を受け付けること、営業時間を知らせることです。本ガイドではこの4つすべてを扱い、空のWordPressインストールから始めて、顧客に引き渡せるサイトを完成させるまで解説します。 公開日：2026年9月5日 更新日：2026年11月3日 執筆：SemiColonWebのCanvasチーム ## ステップ1：WordPressの準備 レストランのサイトは、ほとんどのサイトより3つのWordPress設定に依存しています。デザインに手をつける前に、これらを設定してください。 - **サイトタイトルとキャッチフレーズ。** 「設定」から「一般」を開きます。店名はタイトルに、料理やエリアはキャッチフレーズに入力してください。ブラウザのタブ、検索結果、お客様が友人に共有するカードは、すべてこの2つの行から作られます。 - **パーマリンク。**設定、パーマリンク、投稿名の順に選択します。メニューページには、テーブルカードやチラシに印刷できるほど短いアドレスが設定されます。 - **タイムゾーン。** 一般設定画面に戻り、レストランの所在地の都市を選択します。予約リクエストはこの設定を基準に時刻が記録されます。誤った都市を選ぶと、今夜の予約が翌日分として登録されてしまいます。 WordPress の準備で、どの Canvas サイトにも共通する点は次のとおりです。WordPress と PHP のバージョン、実際にテストしたバックアップ、インポートで取得する写真に十分な PHP メモリです。インポートガイドでは、これらをすべてのプロジェクトについて一度にまとめています。 [インポート前の要件とバックアップ](https://canvaswp.com/ja/guides/import-a-wordpress-demo-website/#before) 予約リクエストは、厨房が営業前に確認して初めて価値があります。WordPressは、別途設定しない限りメールをサーバーに任せますが、多くのホスティング会社は何の通知もなくそのメールを破棄します。今すぐメール配信サービスかSMTPプラグインを設定し、ご自身宛てにテストメールを送信してください。 ## 手順2：Canvasをインストールし、セットアップウィザードを実行 テーマのzipファイルをダッシュボードの「外観」>「テーマ」>「新規追加」からアップロードし、有効化してください。セットアップウィザードは自動的に開きます。このプロジェクトであれば、作業はすぐに終わります。 - **まずライセンスを用意してください。**ダッシュボードのライセンスキーを貼り付けてください。次のステップでウィザードがレストラン向けパッケージをダウンロードするために必要になります。 - デモの手順で **「Italian Restaurant」を検索**してください。そのカードには、取り込む前に、ページ、投稿、料理の内容が一覧で表示されます。 - **プラグインの手順は自動的にスキップされます。** レストランデザインには、Canvasとウィザードがインストールするコンパニオンプラグイン以外は必要ありません。 セットアップウィザードを途中で閉じても、再開するまではCanvasメニューの下で待機します。 **デモの手順です。**名前で検索し、カードに記載されているデモの内容を確認してください。 [ウィザードの9ステップからなる各ステップの役割](https://canvaswp.com/ja/setup-wizard/) ## ステップ3：レストラン向けデモをインポート インポートする前に、[イタリアンレストランのデモのライブプレビュー](https://demos.canvaswp.com/restaurant/)を開き、メニューと予約ページを順に確認してください。プレビューはインストールするのと同じテーマで動作しているため、そこで動くものはお使いの環境でも動作します。 ### サイト全体（新規サイトの場合） 何もない新規インストール環境では、サイト全体をインポートします。レストランのフォント、カラー、テーマオプション、メニューがお使いのサイトのものになるため、次の冬に追加する個室ダイニングのページも、違和感なくサイトになじみます。稼働中のサイトにインポートするのがもう一つの選択肢で、適した場合についてはインポートガイドで説明しています。 ### 同梱内容 - ホームページから、メニュー、ストーリー、お問い合わせページまで、全6ページ - カテゴリー付きの6件のブログ記事を収録し、公開初日からニュースセクションが空にならないようにします。 - 50品の料理、それぞれが独自のMenu Itemレコード - スライダー、動作する予約フォーム、そして2個のナビゲーションメニューが、それぞれの表示位置に割り当てられています。 - ヘッダー、フッター、ページタイトルのデザインはそれぞれ、編集可能なレコードです。 - お使いのメディアライブラリにコピーされたフード写真 **インポート後のホームページです。** 実際のコンテンツが入っており、お客様のコンテンツに差し替えられます。 写真のダイニングルームがお店と全く違う場合は、Canvasの「Demo Import」からインポートを元に戻し、ほかのレストランデモを1つ試してください。以前の設定も一緒に戻ります。 [スコープ、インポートの各段階、ロールバックについて一括で説明します。](https://canvaswp.com/ja/guides/import-a-wordpress-demo-website/) ## 手順4：デモの文章と画像を差し替え 「固定ページ」からホームページを開きます。エディターでは、ヘッダー、スライダー、ページタイトル、フッターが、来店されるお客様の目に映る形で本文の周囲に表示されます。そのため、実際のページを見ながらウェルカムメッセージを書けます。 ### クリック、入力、置換 ページ上のすべての見出し、段落、画像はブロックです。クリックするとその上に入力でき、画像では「置き換え」を選んで手持ちの写真を選択できます。右側のパネルには、色からリンクまで、そのブロックが対応するその他の設定が表示されます。 ### 具体的な内容をはっきり伝える デモのテキストはあえて汎用的に作られているため、見分けやすく、差をつけやすくなっています。「Authentic Italian cuisine」を、あなたにしか言えない内容に置き換えてください。たとえば、レシピの出身地域、厨房を仕切る人の名前、オーブンで使う木材、パンが焼き上がる時刻などです。2軒のレストランのどちらにするか迷う客は、形容詞ではなく具体的な情報を読んで判断します。 セクションがレストランに合わない場合は、削除して別のパターンに置き換えてください。選べるパターンは183個あり、それぞれ通常のブロックとして追加されるため、自由に並べ替えられます。 **ホームページの編集。** 入力中に見えている状態が、そのままゲストに表示されます。 ## ステップ5：フードメニューを作成 メニューは訪問者がお目当てにしているページなので、文章一段落では扱いきれません。デモには「Menu Items」コンテンツタイプが含まれ、料理ごとに1件ずつレコードが登録されます。管理画面では投稿と同じように一覧表示されます。 ### ページではなく、料理を編集する メニュー項目を開いて、1件のデータを編集します。料理名、説明、写真、価格、メニューカテゴリーを設定できます。栄養成分の値は別フィールドとして用意されているので、公開したい場合は入力してください。保存するとメニューページが更新されます。ページにはデータを一覧表示するブロックが配置されており、表示のたびに最新のデータを読み込むためです。 この分離があるからこそ、メニューを管理しやすくなります。ある火曜日に料理の価格が変わったとき、レコードを1件変更するだけで、その料理を表示するすべてのページに反映されます。 ### 厨房と同じ区分でメニューをまとめる 前菜、パスタ、メイン、デザート、ドリンクのメニューカテゴリーを使いましょう。Menu Itemsブロックでは、これらのカテゴリーをタブ付きパネル、シンプルなカード形式、またはカルーセルとして表示できるため、項目が多くてもスマートフォンで見やすく保てます。表示する項目数、使用するカテゴリー、並び順を設定できます。 レコードを一通り確認し、提供していない料理は削除して、自分の料理を追加してください。思ったより早く終わり、レイアウトについて考えるのはこれが最後になります。 価格は、一定期間厨房で対応できる数字で掲載しましょう。3か月も前の情報のままのメニューページは、思ったより地味なメニューページよりも大きな害になります。 ## ステップ6：フォームで予約を受け付ける このデモには動作するフォームが含まれています。Canvasのフォームはブロックでつくられたレコードです。Formブロックがフィールドをまとめ、Form Fieldブロックが各フィールドを定義し、Form Submit Buttonブロックが送信を行い、Form Embedブロックが完成したフォームを任意のページに配置します。 ### 予約に必要な入力項目 - **日付**と **時刻**のフィールドで、受付可能な最も早い時刻と最も遅い時刻を設定します。最も早い時刻は開店時刻、最も遅い時刻は最終入店時刻に設定し、間隔は15分または30分にして、19:07のような中途半端な時刻の予約が入らないようにします。 - 人数を入力する **Number**フィールド。最小値と最大値は、最も大きいテーブルに合わせて設定します。 - 名前と電話番号用の **テキスト**および **電話**フィールドと、確認用の **メール**フィールドです。 - アレルギーやハイチェア、うっかり忘れがちな記念日を書き込むための **テキストエリア**。 - 後からゲストにメールを送る予定があれば **同意**チェックボックス、そして **ハニーポット**フィールド。ハニーポットは、人間を煩わせることなく大半のスパムを静かに捕らえる、目に見えない罠です。 ### リクエストの送信先 デモの予約フォームには、名前、電話番号、メールアドレスの入力欄、過去の日付をグレーアウトする日付選択、時間メニュー、人数メニューが含まれています。すべてのリクエストは、お使いのサイト内のテーブルに保存され、WordPress管理画面の「Submissions」に一覧表示されます。ただし、まだメール通知は送信されません。フォームを開き、その「Actions」タブで「Send Email Notification」をオンにし、営業中に実際に確認しているアドレスを設定してください。その後、ご自身で席を予約して、メッセージが届くか確認してください。 各予約は、確定が必要なリクエストとして扱ってください。フォームは予約内容を記録するだけで、席数の管理やテーブルの確保は行いません。リアルタイムの空き状況が必要な場合は、専用の予約システムを使ってください。フォームのWebhookアクションで、各リクエストをその予約システムに渡すこともできます。また、フォームにも保存期間を設定し、お客様の電話番号が任意のスケジュールで削除されるようにしてください。 88個のデモのうち83個には、少なくとも1つの動作するフォームが含まれているため、多くの場合はフォームの内容を編集するだけで、接続の設定は済んでいます。 ## ステップ7：ヘッダー、営業時間、連絡先を設定 お腹を空かせた訪問者が電話番号を探すのはヘッダー、住所を探すのはフッターです。どちらもCanvasではブロックで組み立てるパーツで、ページと同じように編集できます。 ### ヘッダー ヘッダーのレコードにはゾーンが含まれ、ゾーンはヘッダーの行にあるセルです。1つ目のゾーンにロゴ、中央にナビゲーション、最後のゾーンには電話番号を添えたHeader Icon Linkと、「席を予約」というテキストのHeader Buttonを配置します。スペースに余裕がある場合は、住所や営業時間をHeader Infoブロックで表示できます。 ヘッダーの上にトップバーを追加して、本日の営業時間や休業日をお知らせできます。トップバーは独立したレコードのため、ヘッダーを開かずにメッセージを変更できます。 ### フッターの営業時間 フッターには住所と電話番号のための Footer Contacts ブロックを配置し、その横に営業時間を並べた列を設けます。営業時間は人が読める文章で書き、常に正確に保ってください。訪問者にとって、閉まったドアの前に着くほど不快なことはないからです。 ヘッダーとフッターはどちらも、サイト全体のデフォルト設定とページごとの上書き設定に対応しています。そのため、プライベートダイニングのランディングページでは、写真の上に透明のヘッダーを重ねつつ、サイトの他の部分は独自の設定を維持できます。 [ヘッダー・フッタービルダーの全機能](https://canvaswp.com/ja/header-builder/) [レストラン向けデモ4種の比較](https://canvaswp.com/ja/wordpress-themes/restaurant/) ## ステップ 8：確認してから開く サイトを誰かに案内する前に、このリストを確認してください。短いリストですが、どの項目も誰かが恥ずかしい思いをした経験があるものばかりです。 - **実際のテスト予約を送信**し、スマートフォンからレストランのWi-Fiをオフにした状態で、通知が届くことを確認してください。 - **すべてのページをスマートフォンで確認してください。**今夜の夕食を探している人の多くは、立ったままスマートフォンで見ています。 - フッターを含め、これらの情報を掲載するすべてのページで **住所、電話番号、営業時間を確認**してください。 - 写真には **代替テキストを入力**しましょう。代替テキストは、スクリーンリーダーを使う人の助けになるほか、検索エンジンがページとあわせて読み取り、店内の雰囲気を理解する手がかりにもなります。 - **SEO画面を確認してください。**Canvasは公開中のコンテンツからタイトル、説明文、共有カード、構造化データを自動生成します。そのため、ここで必要なのは、もう一組の入力欄を埋めることではなく、コンテンツを具体的にすることです。 - 必要なパフォーマンススイッチを **オンにしてください**。最適化は35件あり、それぞれ元に戻せます。いずれもページで使われない部分の読み込みを減らします。 次に公開し、住所を人が検索する場所に掲載したら、レストランの運営に戻りましょう。サイトはもはやプロジェクトではなく、メニューが変わったら編集する情報の集まりです。 ## 出典 このガイドでCanvas以外の内容に触れる場合は、その内容を説明している公式ページを以下に掲載しています。 - [一般設定画面](https://wordpress.org/documentation/article/settings-general-screen/) wordpress.org · WordPressでサイトタイトルとキャッチフレーズを設定する画面。タイムゾーンも同じ画面にあります - [「設定」の「パーマリンク」画面](https://wordpress.org/documentation/article/settings-permalinks-screen/) wordpress.org · 投稿名構造：各ページに短く読みやすいアドレスを付けます - [wp_mail()](https://developer.wordpress.org/reference/functions/wp_mail/) developer.wordpress.org · WordPressは初期設定でメール送信をPHPのmail()関数に委ねており、送信が成功しても配信された証拠にはなりません - [画像チュートリアル](https://www.w3.org/WAI/tutorials/images/) w3.org · スクリーンリーダーは、画像の代替テキストを読み上げます - [構造化データに関する一般ガイドライン](https://developers.google.com/search/docs/appearance/structured-data/sd-policies) developers.google.com · 正しいマークアップがあればリッチリザルトの表示は可能になりますが、表示するかどうかはGoogleが判断します 次のステップ ## 次のステップ 公開後の作業に役立つガイド2本と、このガイドの元になったデモです。 [ガイド **WooCommerceストアを始める** インポートするデモが稼働中のショップの場合、何が変わるのでしょうか。](https://canvaswp.com/ja/guides/start-a-woocommerce-store-with-wordpress/) [ガイド **AIでサイトの文章を作成** 事業の説明を一度設定したら、編集中のフィールドで生成できます。](https://canvaswp.com/ja/guides/write-website-copy-with-ai-in-wordpress/) [製品 **レストラン向けテーマ** このガイドの出発点となるデモを、ページごとにプレビューできます。](https://canvaswp.com/ja/wordpress-themes/restaurant/) よくある質問 ## よくある質問 [FAQ全体](https://canvaswp.com/ja/faq/)で残りの疑問にお答えし、[ドキュメント](https://docs.canvaswp.com/)ですべての設定を詳しく解説しています。 **予約を受け付けるにはプラグインが必要ですか？** いいえ、Canvasのレストランサイトでの予約は、Canvasブロックで作成したフォームから届きます。送信内容はお使いのサイト内のテーブルに保存され、WordPress管理画面に一覧表示されます。テーブルや席数を管理するサードパーティの予約システムに予約を送りたい場合のみ、プラグインを追加してください。 **自分で撮影した写真を使えますか？** はい、レストランデモが読み込む写真はすべて、ご自身の写真に差し替えることをおすすめします。デモの画像はすべて通常のアタッチメントとしてメディアライブラリに追加されるため、差し替え方法はWordPressの他の画像と同じです。レイアウトがずれないよう、元の画像に近い縦横比の画像を使用してください。その際、代替テキストの欄に短い説明も入力してください。 **レストランのデモが気に入らない場合はどうすればよいですか？** 元に戻してから、88個あるCanvasデモの別のデモをインポートしてください。すべてのプランにすべてのデモが含まれ、各インポートは個別に追跡されます。2つ目のデモは、ページだけを取り込むこともできます。その場合、現在のデザインはそのまま残ります。 **メニュー価格はGoogleに表示されますか？** Canvasは描画時にページ上の内容から構造化データを生成します。営業時間、オファー、レビューを含む16種類のスキーマタイプに対応しています。検索エンジンがどの情報を表示するかは検索エンジン自身が決めることですが、マークアップは追加のSEOプラグインなしで用意されています。