初心者お店のHPを作りたい…
WordPressが良いって聞いたけど、何から始めたらいいの？
予算が厳しいので自作したい…
その疑問解決します。
WordPressを使ってレストランやカフェといった飲食店のホームページを作成する方法を初心者向けに解説します。
【デモサイト】WordPressで作る飲食店のホームページデザイン
まずはサンプルです。WordPressを使うと以下のようなデザインのホームページを作ることができます。
飲食系のサイト
ドメイン・レンタルサーバーの準備をする
ホームページをインターネットに公開するには以下の要素が必要です。
必須
- ドメイン（1年間：約1,500円）
- レンタルサーバー（月額：約900円）
ドメインは屋号、レンタルサーバーは土地のようなイメージです。
ちなみにレンタルサーバーとドメインは、一括で申し込みできます。
かんた色んなサービスがありますが、ボクはエックスサーバーを利用しています。
この記事ではWordPressでホームページが作成できるプランで、一番低価格なスタンダードプランを利用した場合を例に解説します。
レンタルサーバーの提供しているサービスの中にはWordPressに対応していないプランがあります。WordPressでホームページを自作するなら、WordPressに対応しているプランを選びましょう。
ドメイン・レンタルサーバーの一括申し込み
エックスサーバーでドメインとレンタルサーバーへ申し込む方法を紹介します。
エックスサーバーの公式サイトにアクセスし、「お申込み」をクリック。
「10日間無料お試し 新規お申込み」をクリック。
WordPressクイックスタートで「利用する」にチェックを入れる。
表示内容を確認し、「確認しました」をクリック。
ドメイン契約内容を入力。
WordPress情報を入力。
かんたブログ名、パスワード、メールアドレスは後日変更することもできます。
「Xserverアカウントの登録へ進む」をクリック。
WordPressテーマの購入
WordPressテーマとはデザインテンプレートのことです。
テンプレートは色んな種類がありますが、初心者向けに扱いやすくサポートの付いているSWELLをおすすめします。
かんた他のテーマでも全然OKです。
テーマによって出来ることと、出来ないことがあります。サポートがなかったりするテーマもあるので、しっかり選びましょう。
本記事ではSWELLを使ったサイトの作り方を紹介していますので、不安な方はSWELLでお試しください。
トップページを作る
サイトのトップページを作るステップです。
ページを作る
「固定ページ」→「新規作成」をクリック。
「タイトルを追加」→「トップページ」と入力。
「SWELL設定」→「サイドバー」で「非表示」を選択。
「設定」→「コンテンツ下の余白をなくす」にチェックを入れる。
「公開」をクリックし設定保存。
トップページを指定する
作成したページをサイトのトップに表示する設定を行います。
「設定」→「表示設定」でページを移動。
「ホームページの表示」で「固定ページ」にチェックを入れる。
「ホームページ」に先程作成した「トップページ」を選択。
「変更を保存」して設定を有効化。
以後、固定ページで作成したトップページが、サイトのトップに表示されます。
メインビジュアルを設定する
メインビジュアルはサイトにあクセスしたときに最初に表示される部分です。
SWELLでは画像の他、動画ファイルをメインビジュアルに指定できます。
メインビジュアルのオプション
- 画像
- スライドショー
- 動画
メインビジュアルを設定していきます。
「外観」→「カスタマイズ」をクリック。
「トップページ」→「メインビジュアル」をクリック。
メインビジュアルの表示内容から好きなオプションを選択。
メインビジュアル上のメインテキストとサブテキストの設定です。
メインテキストとサブテキストは、いわゆるキャッチコピー。設定するとメインビジュアルの上に表示されます。
【任意】ロゴ画像の設置
店舗のロゴマークがある場合の設定です。サイト上部に表示されます。
「外観」→「カスタマイズ」をクリック。
「ヘッダー」をクリック。
「ロゴ画像の設定」をクリックし、任意の画像をアップロード。
サイトに表示する画像のサイズはこの設定画面から指定できます。
ロゴ画像の位置の調整
カスタマイザー内「ヘッダー」での作業です。
パソコンサイト
「レイアウト・デザイン設定」の→「ヘッダーレイアウト（PC）」の任意のオプションを選択しましょう。
スマホサイトサイト
「レイアウト・デザイン設定」の→「ヘッダーレイアウト（SP）」の任意のオプションを選択しましょう。
「」→「」をクリック。
「」→「」をクリック。
【任意】記事スライダーを非表示にする
記事スライダーはメインビジュアルとコンテンツエリアの間に表示されるパーツです。ブログだとよく使う機能ですが、飲食店サイトには不要なため非表示にします。
「外観」→「カスタマイズ」をクリック。
「トップページ」→「記事スライダー」をクリック。
「設置しない」を選択。
【任意】下層ページを作る
トップページ以外のページを作る方法です。
ページを作る
「固定ページ」→「新規作成」をクリック。
「タイトル」に任意の名称を入力。
ページの中身を作る。
サイドバー無しの1カラムにしたい場合は、SWELLL設定でレイアウトを指定しましょう。
「SWELL設定」→「サイドバー」で「非表示」を選択。
「パーマリンク」にページURLを入力。
SEOを考慮する場合、ページの名称を英単語にしたもの入力するのがおすすめです。
例：アクセス→access
不必要なページ・投稿を削除する
WordPressをインストールすると自動で作成されるページがあります。
不要なので削除しましょう。
不要な固定ページを削除する
まずは固定ページ上にある不要なページを削除します。
WordPress初期状態では「サンプル」「プライバシーポリシー」ページが作成されています。この2つのページを削除します。
「固定ページ」→「固定ページ一覧」をクリック。
「サンプル」「プライバシーポリシー」にチェックを入れる。
「一括操作」から「ゴミ箱へ移動」を選択。
不要な投稿を削除する
固定ページと同様に投稿一覧にある不要な投稿を削除します。
「投稿」→「投稿一覧」をクリック。
「Hello world!」にカーソルをあわせる。
「ゴミ箱へ移動」を選択。
スマホメニューの設置
飲食店サイトに訪問するユーザーはスマホで閲覧しているケースのほうが多いです。
スマホでアクセスした時に、スマホ専用のメニューが表示される設定をしましょう。
【ヘッダー】スマホメニュー設置
「ヘッダー」はページの先頭部分のことです。開閉式のメニューを設置します。
「外観」→「メニュー」をクリック。
「メニュー名」→に任意の名称を入力。
「メニューを作成」をクリック。
作成したメニューをスマホの開閉メニューの位置に指定します。
「スマホ開閉メニュー内」にチェック。
「メニューを保存」をクリック。
メニューの中身を作ります。
左手の「メニュー項目を追加」から任意のページを選択します。
「トップページ」にチェックを入れて、「メニューに追加」をクリック。
この操作でメニューにトップページが追加されました。同じ操作で自由にメニューに好きなページを追加しましょう。
【フッター】スマホ固定メニュー設置
「フッター」とはページの最後尾のパーツです。SWELLでは固定で表示するメニューを設置できます。
ユーザーが即問い合わせできるよう、スマホでタップするだけで電話がかかるメニューを作りましょう。
基本的な操作方法は、ヘッダーにメニューを設置した作業と同じです。
「外観」→「メニュー」をクリック。
「新しいメニューを作成しましょう。」をクリック。
「メニュー名」に任意の名称を入力。
例：スマホフッター
「メニューを保存」をクリック。
作成したメニューをスマホのフッターに表示する設定です。
「固定フッター（SP）」にチェックを入れる。
「メニューを保存」をクリック。
メニューの中身を作ります。
トップページヘのリンクと、タップ時に電話をかけるリンクを作る作業です。
メニュー項目を追加から「全て表示」をクリック、
「トップページ」にチェックを入れて「メニューに追加」をクリック。
「表示オプション」をクリック。
「説明」チェックを入れる
トップページの「説明」に以下を入力。
「icon-home」。
次に電話をかけるリンクを設置します。
「カスタムリンク」をクリック。
URLに以下の形式電話番号を入力
tel:000000000
リンク文字列に「電話」と入力。
「電話」の部分は任意のテキストでOKです。この部分がスマホメニューに表示されます。
「メニューに追加」をクリック。
説明に「icon-phone」と入力。
スマホ固定フッターの色をアレンジする方法です。
「外観」→「カスタマイズ」をクリック。
「サイト全体設定」→「下部固定ボタン・メニュー」をクリック。
「固定フッターメニューの背景色」で任意の色を選択。
「固定フッターメニューの文字色」で任意の色を選択。
「固定フッターメニューの背景不透明度」で背景の透明具合を指定できます。数値が0に近いほど透明度が増します。
「公開」をクリックし設定を保存。
サイト名を設定する
検索エンジンに認知される「サイト名」を設定します。
サイト名の設定
「設定」→「一般」をクリック。
「サイトのタイトル」にサイト名を入力。
飲食店向けプラグイン
「プラグイン」とはWordPress用語で拡張プログラムのことです。
例えば問い合わせフォームを簡単に設置できるプラグインやアニメーション効果のあるプラグインがあります。WordPressのプラグインは無料で公開されているものが多いのが特徴です。
プラグインの導入は必須ではありません。用途に合わせて自由にプラグインを追加しましょう。
飲食店サイト向けおすすめプラグイン
- アニメーション効果プラグイン
- 問い合わせフォームプラグイン
- SEO系プラグイン
- バックアッププラグイン
- 高速化プラグイン
アニメーション効果プラグイン
画像やテキストをふんわり表示したり、横からスライド表示させるアニメーション機能。
無料のプラグインで簡単に設定できます。
おすすめなのはBlocks Animationプラグイン。
ページの編集画面から設定したいエフェクトを選ぶだけというシンプルな仕組みです。プログラムコードを一切編集せずにオシャレなエフェクトを設定できます。
かんた「ちょっと高級感を出したい！」なんて時に使えます。
問い合わせフォームプラグイン
ホームページ定番の問い合わせフォーム。
WordPressなら無料のプラグインで簡単に作成できます。
無料でおすすめなのはWPForms Liteプラグイン。
直感的な操作でフォームを作ることができます。
SEO系プラグイン
バックアッププラグイン
サイト運営中、うっかり作業ミスでサイトのデータが消えてしまった時に備えてバックアップを用意しましょう。
バックアップを定期的に行うのがおすすめですが、いちいち手動でやっていたら煩雑になりますよね？
WordPressには自動でバックアップを定期的に作成する無料プラグインがあります。
運営しているサーバー内にバックアップファイルを生成するプラグインの他、バックアップデータを外部に自動的にアップロードするものがあります。1つじゃ不安だ！という場合は、複数併用しても構いません。
バックアップファイルからサイトを復元するのが簡単なタイプを選ぶのが初心者にはおすすめです。
データベースのバックアップがあっても、どうやって復元していいか分かりませんよね？
WordPressの管理画面から簡単にバックアップを使ってサイトを復元できるタイプを選びましょう。
高速化プラグイン
まとめ
WordPressテーマSWELLを使った飲食店ホームページの作り方を紹介しました。
Webサイト制作の専門知識がなくても、立派なサイトを作ることができますん。ぜひ挑戦してみてください。