MENU
有限会社クリーブランド
飲食店をトータルサポート!業務用厨房機器・各種工事・飲食店運営サポート情報を発信。業務用厨房機器の販売を始め、クリーブランドの事業案内や取扱製品、Q&Aなどについてご紹介していきます。日々の活動内容や商品情報についてSNSでも情報を発信中!
半導体不足の為、納期に影響が生じております。

飲食店のホームページ事例をご紹介。ロリポップ!レンタルサーバーを借りてWordPressでお店のホームページを作成しよう!

  • URLをコピーしました!

飲食店を経営されていて、グルメサイトやポータルサイト・Googleビジネスプロフィールなどにお店情報を登録しているけどお店専用の公式ホームページはまだ持っていない方へ、レンタルサーバーを借りてWordPressでホームページをつくる方法をご紹介します。

また、WordPressには無数の無料・有料テーマが存在します。公開されている飲食系のデモサイトや実際のホームページを WordPress のテーマ・お店の業態ごとにご紹介致します。

実際に弊社でも無料テーマを使用したことがありますが、覚えることが多すぎてホームページや記事の作成に当てる時間が取れなくなるので、初めての方には有料テーマをおすすめします!

この記事でわかること
  • おすすめのレンタルサーバー
  • ホームページ制作の流れ
  • 飲食店におすすめのWordPressテーマ
  • 業態別のWordPressで作成した実際のホームページやデモサイト
  • ロリポップレンタルサーバーの新規利用方法
弊社はロリポップを利用中です。
目次

おすすめのレンタルサーバー

まずはじめに...

ホームページ制作の流れをご紹介する前に、制作時に必要なレンタルサーバーをご紹介致します。弊社では、「ロリポップ!」レンタルサーバーを利用しています。

「WordPressで作成した実際のホームページやデモサイト」の項目でご紹介しますが、おしゃれなサイトや凝ったサイト・メニューなどの写真をたくさん載せるサイトを作ろうとした場合、画像や動画、アニメーションなどを多様していきます。

すると、Googleが推奨しているサイトの表示速度を図るツール「 PageSpeed Insights」でサイトの表示速度のスコアを計測した時に、SEO(検索エンジン最適化)に悪影響を及ぼすような悪いスコアが出てしまうことになります。

※メニューにアニメーションをつけたイメージ

実際に、弊社のサイトでは多数の取扱い製品情報を表示する為に画像を多く利用しますので、ページが重くなって悪いスコアが出てしまいました。

弊社では、「ロリポップ!」レンタルサーバーの「ハイスピード」プランを採用することで、劇的なスコア改善が可能になりました。

おしゃれなサイト・デザインに凝ったサイト・メニューをたくさん載せたいサイト・動画なども入れたいサイト・ツイッターのタイムラインやインスタグラムのフィードなどもページに連携させたいサイトなどは、後々ページの表示速度が問題になってきますので、「ロリポップ!」レンタルサーバーの「ハイスピードプラン」が特におすすめです。

サイトの表示速度の重要性がますます高まる中、ロリポップでは「ハイスピードプラン」「エンタープライズプラン」に第4世代のWebサーバーともいわれる LiteSpeed Cache を採用しています。高速化だけでなく、高負荷時の安定性に優れています。

ロリポップ爆速宣言公式サイト

実際に弊社のモバイルサイトでも劇的な速度改善がみられました!

LiteSpeed Cache 有効時のPageSpeed Insights 計測画面

実際に本記事のページを PageSpeed Insights で計測すると、LiteSpeed Cache プラグインを有効にした時は、無効時にくらべて「35」→「98」と劇的なスコア改善がみられました。

LiteSpeedとは

WordPressなど、様々なCMSとの相性を重視し、第4世代のWebサーバーともいわれるLiteSpeedを採用。高速化だけでなく、高負荷時の安定性に優れています。

引用元:https://lolipop.jp/service/specs/lite-speed/

難しい話は割愛させて頂きますが、今まで一般的によく使われていた「Apache(アパッチ)」というサーバーの機能を残しつつ、数十倍高速化されたものでサイトの表示速度に良い影響があります。

ホームページ制作の流れ

レンタルサーバーを借りてWordPressでホームページを作るおおまかな流れをご紹介します。

STEP
ドメインを購入する

ホームページのURLに使用するドメインを購入する

STEP
レンタルサーバーを借りる

ロリポップ!」などのレンタルサーバーと契約する

STEP
サーバーに WordPress をインストールする

ロリポップ!なら初心者でも安心!大人気のWordpress簡単インストールやショッピングカートなど
誰でもカンタンに使える機能が満載!


STEP
WordPress の利用テーマを決める
STEP
ホームページの制作・公開

WordPressの利用テーマを決めたら、ホームページを制作し公開します。

\もっと詳しく/

飲食店におすすめの WordPress テーマ

WordPressテーマ「SWELL」

弊社でも利用しているテーマです。とても使いやすく初めての方にもおすすめのテーマです。

テーマ名
SWELL
価格
¥17,600(税込)
 お支払いは一度限りです。月額や年額ではありません
おすすめ度
販売元
株式会社LOOS
SWELL公式サイト

飲食店以外でも、多くのブログやコーポレートサイトで利用されています。SWELLユーザーの「さとしん」さんという方がSWELLサイト集を作っていらっしゃるので、そちらをご参考にしてイメージに近いホームページを見つけるのもおすすめです。

SWELLサイト集

WordPressテーマ「AMORE」

TCDの中でも飲食店に特化したテーマをピックアップしてご紹介していきます。TCDでは業種にあわせた豊富なテーマがラインナップされているのが特徴です。

テーマ名
AMORE
価格
¥12,980(税込)
おすすめ度
販売元
株式会社デザインプラス(TCD)

国内シェアNo.1、累計100,000ユーザーを超えるトップブランド「TCD」

https://tcd-theme.com/about
デモサイト・イタリアン
  • イタリアン
  • 焼肉店
  • バル
  • お好み焼き  etc..

WordPressテーマ「Tree」

テーマ名
Tree
価格
¥25,800(税込)
おすすめ度
販売元
株式会社デザインプラス(TCD)

国内シェアNo.1、累計100,000ユーザーを超えるトップブランド「TCD」

https://tcd-theme.com/about
デモサイト・カフェ

WordPressテーマ「SWEETY」

テーマ名
SWEETY
価格
¥11,980(税込)
おすすめ度
販売元
株式会社デザインプラス(TCD)

国内シェアNo.1、累計100,000ユーザーを超えるトップブランド「TCD」

https://tcd-theme.com/about
デモサイト・スイーツ専門店
  • スイーツショップ・和菓子・洋菓子
  • パン屋
  • カフェ etc..

WordPressテーマ「KADAN」

テーマ名
KADAN
価格
¥22,800(税込)
おすすめ度
販売元
株式会社デザインプラス(TCD)

国内シェアNo.1、累計100,000ユーザーを超えるトップブランド「TCD」

https://tcd-theme.com/about
デモサイト・旅館

WordPressテーマ「Avalon」

テーマ名
AVALON
価格
¥11,980(税込)
おすすめ度
販売元
株式会社デザインプラス(TCD)

国内シェアNo.1、累計100,000ユーザーを超えるトップブランド「TCD」

https://tcd-theme.com/about
デモサイト・CLUB
  • バー・CLUB
  • レストラン
  • そばや etc..

WordPressテーマ「STORY」

テーマ名
STORY
価格
¥12,980(税込)
おすすめ度
販売元
株式会社デザインプラス(TCD)

国内シェアNo.1、累計100,000ユーザーを超えるトップブランド「TCD」

https://tcd-theme.com/about
デモサイト・結婚式場
  • 結婚式場
  • CLUBU・バー
  • 土産店 etc..

WordPressテーマ「TENJIKU」

テーマ名
TENJIKU
価格
¥33,800(税込)
おすすめ度
販売元
株式会社デザインプラス(TCD)
デモサイト・高級中華
  • 高級料理
  • 高級中華・フランス料理・コース料理
  • 会員制CLUB etc..

WordPressテーマ「ICONIC」

テーマ名
ICONIC
価格
¥39,800(税込)
おすすめ度
販売元
株式会社デザインプラス(TCD)
デモサイト・ECショップ
  • EC(ネットショッピング)向き
  • ケーキ・スイーツ専門店
  • 農園
  • ワイン販売 etc..

WordPressテーマ「Minimal Cafe」

テーマ名
Minimal Cafe
価格
¥9,999(税込)
おすすめ度
販売元
Minimal WP
デモサイト・スイーツカフェ
  1. カフェ
  2. レストラン
  3. パン屋
  4. スイーツショップ etc..

WordPressテーマ「Luminous

テーマ名
Luminous
価格
¥8,999~(税込)
おすすめ度
販売元
DigiPress
デモサイト

WordPressテーマ「isotype

Isotype(アイソタイプ)はユーザーの印象に残る高いデザイン性と、 ビジネスにとって重要なSEOや表示速度といった収益性を兼ね備えた 国産のWordPressテーマです。

テーマ名
MOMENTUM
価格
¥27,000(税込)
おすすめ度
販売元
isotype
※Frontline_Marketing_Japan株式会社

ロリポップレンタルサーバーの新規利用方法

料金プランの選択・申し込み~契約まで

STEP
公式サイトにアクセス

ロリポップ!公式サイトにアクセスし、「まずは無料で体験する」または「お申込みにすすむ」ボタンをクリック

STEP
料金プランを選択する

WordPress の「簡単インストール」機能をご利用になる場合は、必ずライトプラン以上を選択してください。エコノミープランではこの機能 が使えませんのでご注意下さい。

エコノミープランを選択した場合は、FTPソフトを使って自分で WordPress のインストールやファイルのアップロードをする必要があります。詳しい方以外は、ライトプラン以上をおすすめします。

おすすめのプラン

弊社では現在「ハイスピード」プランを選択していますが、最初のうちは「スタンダードプラン」でも大丈夫だと思います。

現在のMEO対策において、サイトの表示速度も重要視されています。

ロリポップ爆速宣言公式サイト

「Google Search Console」とサイトを連携することで、しばらくたつと表示速度に問題がある場合は警告がきますので、その時に「ハイスピードプラン」への変更を検討してみてもいいかもしれません。

Google Search Console 管理画面
STEP
アカウント情報入力

必要事項を入力して「同意して本人確認へ」をクリック

入力事項
  • ロリポップの初期ドメイン
  • パスワード
  • 連絡先メールアドレス
  • 独自ドメインを取得する場合はここで必要事項を入力
短く覚えやすいURLがおすすめです!
STEP
SMS認証

携帯電話での電話番号認証を行います。携帯電話にSMSメッセージが届きますので、そちらに記載されている番号を入力して認証が完了します。

STEP
申し込み内容を確認して完了

申し込み内容を入力して確認画面に進みます。確認ができたら完了です。

独自ドメインをロリポップに追加する方法

すでに独自ドメインをお持ちの場合は、ロリポップにドメインを追加します。

取得したドメインサービスにログインし、ネームサーバー設定

STEP
ネームサーバー(DNS)設定

取得したドメインサービスへログインし、ネームサーバー設定を行います。

ムームードメインでドメインを取得された方。

ロリポップ公式サイトで設定方法をご案内していますので、詳細は下記ボタンからご確認ください。

ムームードメイン以外でドメインを取得された方

独自ドメインを取得されたサービスにて、ネームサーバー設定を下記の情報に変更してください。

プライマリネームサーバーuns01.lolipop.jp
セカンダリネームサーバーuns02.lolipop.jp

ネームサーバーの設定方法に関するご質問は、独自ドメインを取得したサービスのマニュアルなどでご確認ください。

例えば、弊社は「お名前ドットコム」でドメインを取得しています。「お名前ドットコム」にログインし、「ネームサーバーの変更」で「他のネームサーバーを利用」を選択。そこから上記のネームサーバーを設定します。

STEP
独自ドメイン設定画面の表示
ユーザー専用ページ

ユーザー専用ページにログインし、「独自ドメイン設定」を開きます。

STEP
独自ドメインと公開(アップロード)フォルダの入力

設定するドメイン名を入力して、そのドメインで使うフォルダ名を入力します。フォルダ名は自由ですので、弊社の場合はドメイン名と同じフォルダ名にしています。設定後、「独自ドメインをチェックする」をクリックします。

STEP
独自ドメインの設定

確認の後、「設定」をクリックします。

下記のように表示された場合は、取得されているドメインのDNSが設定されていないか、反映されていません。

DNSを下記のように設定してください。

プライマリネームサーバーuns01.lolipop.jp
セカンダリネームサーバーuns02.lolipop.jp
STEP
独自ドメインの設定完了

「独自ドメイン設定」でドメインの一覧から「設定変更」ボタンをクリックできるようになればOKです。

独自ドメインの設定が反映されるまで1時間程度、ネームサーバーの情報が反映されるまで最大72時間程度かかる場合があります。

WordPress簡単インストール方法 

ロリポップレンタルサーバーの WordPress簡単インストール 機能のご紹介です。ドメインの取得から設定までが完了したら、WordPress簡単インストールに進みます。インストールの流れをご案内します。

STEP
ユーザー専用ページへログイン

ユーザー専用ページにログインし、左側メニューの「サイト作成ツール」をクリックして「WordPress簡単インストール」を開きます。

ロリポップ管理画面
STEP
インストール先とWordPress設定

必要事項を入力して、入力内容の確認後、インストールに進みます。

STEP
インストール先とWordPress設定の確認

説明内容を確認し「承諾する」にチェックを入れ「インストール」をクリックします。

STEP
インストール完了

インストール完了画面の「管理者ページURL」をクリックすると、WordPressのログイン画面にアクセスできます。設定した「ユーザー名」、「パスワード」を入力し、ログインします。

WordPressのログイン画面
WordPress の管理画面

WordPress 同時インストール機能が使えるようになりました!

2022年7月追記

サーバーをお申込みいただく際、登録に必要な情報を入力するだけで、お申込み完了後すぐWordPressがつかえます。
ご自身でWordPressのインストール、上記のような設定等を行って頂く必要はありません。

「ライトプラン」以上のプランで申し込み可能です。

最初に設定するテーマとしてWordPressのデフォルトテーマのほか、人気の無料テーマ「Cocoon」と提携しています。

またこの機能は、WordPressを使えるライトプラン以上のすべてのプランでご利用いただけます。

まとめ

本記事のまとめ

いかがでしたでしょうか。本記事では飲食店に特化したWordPressテーマや弊社のおすすめテーマをご紹介しました。

レンタルサーバーを借りてお店のホームページを作成する際の、WordPressテーマ選定にお役立て下さい。

弊社ではロリポップ!レンタルサーバーと「WordPressテーマ「SWELL」」を利用しています。

無料のテーマを利用したこともありますが、機能が限られていてプログラミングのスキルがないと理想のサイトに近づけていくのは困難です。ちょっとしたことでも、HTMLやCSSのコードを都度調べたり、初心者では手に負えないようなPHPファイルをいじったりしなければならないからです。

有料のテーマにはサイト構築に必要な機能が初めから揃っています。ご自身のお店の業態にあったテーマを見つけたら、詳しい料金形態(月額制や更新などがあるか)や、サポート体制などをよくチェックしてから購入を決めることをおすすめします。

人気テーマの場合は多くのブロガーさんが使い方やトラブル対応について記事を書いています。困った時に検索すればWEB上に情報が多く出ているテーマだと、より使い勝手が向上します。

WordPressテーマを決める際に抑えたいポイント
  • 料金価格・形態(月額制or更新料などがかかるかどうか...)
  • お店の業態にあったテーマかどうか
  • 使いたい機能を購入前に公式サイトでチェック
  • 情報がたくさん出でいるかどうか(人気テーマの場合は多くのブロガーさんが使い方などを記事にしています。)

最後に... ホームページの表示速度に注意。ロリポップ!「ハイスピードプラン」で劇的に表示速度が改善!

ここまで、ドメイン購入からレンタルサーバーの契約、WordPressのインストールとおすすめテーマをご紹介しましたが、せっかく内容の充実したサイトをつくっても

表示速度が遅いと、検索表示上にも悪影響が出たりサイトに訪れたお客様が離脱してしまう確率が高くなります。

画像や動画、コンテンツを詰め込んだ方が魅力的なサイトになりますが、それと比例するようにページの表示速度は遅くなります。弊社では、サイト運営を始めて3カ月後くらいに「Google Search Console」からページ速度の警告がきました。

Google Search Console 管理画面

Search Console の概要

Google Search Console は、Google 検索結果でのサイトの掲載順位を監視、管理、改善するのに役立つ Google の無料サービスです。Search Console に登録しなくても Google 検索結果にサイトが表示されるようにすることはできますが、Search Console に登録することで、Google のサイトに対する認識を理解し、改善できるようになります。

引用元:https://support.google.com/webmasters/answer/9128668?hl=ja

警告がきてから、WordPressの利用テーマの高速化の設定を調整したり、JavaScriptを遅延ロードする設定をしたり画像を圧縮したり、いろいろ試しましたが最も効果があったのは 「ロリポップ!」のプランを「スタンダードプラン」から「ハイスピードプラン」に変更したことでした。

プラン変更のアップグレードはできるが、ダウングレードはできないので要注意!

例えば、一度「ライトプラン」から「スタンダードプラン」に変更すると、以降は「ハイスピードプラン」へのプラン変更は可能ですが、「ライトプラン」へ戻すことはできませんのでご注意ください。

あわせて読みたい

実際に弊社のモバイルサイトでも劇的な速度改善がみられました!

LiteSpeed Cache 有効時のPageSpeed Insights 計測画面

実際に本記事のページを PageSpeed Insights で計測すると、LiteSpeed Cache プラグインを有効にした時は、無効時にくらべて「35」→「98」と劇的なスコア改善がみられました。

LiteSpeedとは

WordPressなど、様々なCMSとの相性を重視し、第4世代のWebサーバーともいわれるLiteSpeedを採用。高速化だけでなく、高負荷時の安定性に優れています。

引用元:https://lolipop.jp/service/specs/lite-speed/

難しい話は割愛させて頂きますが、今まで一般的によく使われていた「Apache(アパッチ)」というサーバーの機能を残しつつ、数十倍高速化されたものでサイトの表示速度に良い影響があります。

後日、Google Search Consoleで検証期間後(2週間程度経過)の結果を確認すると...

改善が必要なURLが0になった一方で、今まではモバイルではひとつもなかった良好URLが急増しました。サイトの速度改善にロリポップのハイスピードプランは、本当におすすめです!

WordPress簡単インストール機能がついた、「ハイスピードプラン」が特におすすめです!

WordPress 同時インストール機能が使えるようになりました!

2022年7月追記

サーバーをお申込みいただく際、登録に必要な情報を入力するだけで、お申込み完了後すぐWordPressがつかえます。
ご自身でWordPressのインストール、上記のような設定等を行って頂く必要はありません。

「ライトプラン」以上のプランで申し込み可能です。

最初に設定するテーマとしてWordPressのデフォルトテーマのほか、人気の無料テーマ「Cocoon」と提携しています。

またこの機能は、WordPressを使えるライトプラン以上のすべてのプランでご利用いただけます。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次