【事例つき】パン屋・ベーカリーのホームページ作成のコツ！自分で制作・運営できる作り方を解説

ホームページを作るには、プログラミングやウェブデザイン、サーバーといった専門知識が必要、と考えていませんか。
そんなことはありません。ホームページの作成手段は多様化していて、専門知識がなくても、かんたんに作成・更新することが可能になっています。

ホームページ作成サービス「グーペ」は、デザインテンプレートを選んで、フォーマットに文字を入力したり画像を挿入したりとブログ感覚で、メニュー、Google Mapを表示させた店舗案内、求人情報、お問い合わせ、予約受付などのあるホームページが作成できます。

今回は、ホームページ作成サービス「グーペ」を使って、パン屋・ベーカリーのホームページの作り方を紹介します。

ホームページ作成の目的を明確にしよう

あなたがパン屋・ベーカリーのホームページを作る目的は何ですか。
ホームページでは、多種多様な情報を盛り込むことが可能です。
目的を明確にしておくと、あれもこれも盛り込もうとなったとき、本当に必要なのか今必要なのか目的に沿って判断できます。
途中で挫折したり空中分解したりせず完成させるために必要なことなので、いま一度考えてみましょう。

例えば
・開店するので、ホームページにアクセスやパンのことを掲載し見てもらいたい。
・近隣の競合店がホームページを掲載していた。うちもホームページで集客したい。
・焼きたてを召し上がって欲しいので、焼き上がり時間を掲載して伝えたい。
・取材を受けた。総合飲食店サイトや口コミサイトよりも、お店のホームページに誘導したい。
・人気のあるパンをオンラインで予約を受け付けて販売したい。

今回は、商店街の小さなパン屋さんが2号店のオープンを機に、お店のパンをもっと広く召し上がっていただきたい（集客）という目的を想定して作っていきます。

パン屋・ベーカリーのホームページを見にくる人はどんな人？

ホームページを見にくる人はどんな人だと思いますか。
どのような人向けに作るのかを明確にすることで、ホームページに用意する情報、言葉の選び方が定まってきます。
分かりにくい場合は、普段お店にいらっしゃるお客様をイメージしてみましょう。
パン屋・ベーカリーは、どのようなパンを、どのような場所で、どのように販売されているのかでお客様が異なりそうです。

商店街の小さなパン屋さんなので、顧客層は、近くの学生や会社員、お買い物のついでに立ち寄る20代から60代の女性とそのご家族といった想定です。

パン屋・ベーカリーのホームページに必要な構成

パン屋・ベーカリーのホームページに関してグーペが調査した結果

すでに「グーペ」をご利用になっている、パン屋・ベーカリーのホームページを20件抽出して、作成しているページを調べた結果は以下のとおりです。

1.お知らせ（19件）
2.店舗情報（16件）
3.メニュー（15件）
4.カレンダー（14件）
5.お問い合わせ（12件）
6.フォトアルバム（10件）
7.求人ページ（7件）
8.スタッフ紹介（1件）
8.minne連携（1件）
8.イベント予約（1件）
8.旧予約（1件）

その他では、以下のようなページも作られていました。
・◯◯◯◯について（お店のこだわりや紹介）
・よくある質問
・お客様の声
・お取り寄せ、お取り置きの方法について
・メディア掲載情報
・駐車場のご案内

パン屋・ベーカリーのホームページの構成

商店街の小さなパン屋さんが、お店のパンをもっと広く召し上がっていただきたい（集客）という目的で、お店近くの学生や会社員、お買い物のついでに立ち寄る20代から60代の女性とそのご家族という顧客を想定した場合、どのような情報が必要で求められているかを考えました。

ナビゲーション	機能名	用途
お知らせ	お知らせ	新商品、キャンペーン、臨時休業などのお知らせを発信する。
パンへのこだわり	フリーページ	パンづくりへのこだわり、理念を掲載する。
メニュー	メニュー	製造・販売しているパンの紹介をする。
グーペ本店	店舗情報	本店の場所をGoogleマップで案内。最寄駅、営業時間等基本情報を掲載する。
グーペ2号店	フリーページ	2号店の場所をGoogleマップで案内。最寄駅、営業時間等基本情報を掲載する。
お取り置き予約	イベント予約	パンの予約販売を受け付ける。
よくある質問	フリーページ	よくある質問とその回答を案内する。
お問い合わせ	お問い合わせ	お問い合わせを受け付ける。
求人情報	求人ページ	求人情報を掲載する。

パン屋・ベーカリーのホームページを作ってみよう

実際にホームページを作り始める前に、ホームページの材料となる、写真や伝えたいことを用意しておくことをおすすめします。
ページを作るたびに必要なものを揃えるのでは、その都度作成が中断してしまいます。

パンの美味しそうな写真やお店の外観やパンを陳列した棚、パン作りの写真、パンの価格表や焼き上がりスケジュールなど、構成で盛り込みたい画像や情報の用意をしておきましょう。
準備ができたら、いよいよ作り始めます。

ナビゲーションメニュー

ホームページでは、見にきた人を迷わせることなく情報にたどり着けるようにメニューの一覧が表示されていて、ただ単に『メニュー』といったり、『ナビゲーション』や『ナビゲーションメニュー』ともいったりします。
ホームページを見にきた人を誘導する大事な名前です、分かりやすい表現に変更しましょう。
幅広い年代のお客様が想定され、かつ、子どもの将来就きたい職業ランキングで上位に入るパン屋です。分かりやすい表現を選びました。
使用しないメニューは、見にきた人が戸惑うことがないように非表示にしておきます。

▼ナビゲーションメニューとは
　

▼ナビゲーションメニュー表示名の変更方法（[設定]をクリック）

▼使用しないメニューをナビゲーションメニューから非表示にする（[▼]→[非表示の項目に移動]をクリック）

▼ナビゲーションを編集する：グーペ管理画面＞管理メニュー＞ナビゲーション
（管理画面にはログインが必要です）

トップページ

ホームページを見にきた人は、一般的には、ページを開いた数秒で自分にとって必要かどうか、読み進めるか否かを判断するといわれています。
よって、最初に目にすることの多いトップページは、お店の第一印象を左右するともいえる重要なページです。
まずトップページを整えましょう。

▼トップページ　各部の名称

スライドショー画像

トップページの画像を用意しておいた画像に差し替えます。
最大10枚まで登録できますが、複数登録される場合、スライドショーをきれいに表示させるために画像の大きさを同じにして登録することをおすすめします。
最初に表示される一枚目に、もっとも見てもらいたい画像を入れましょう。
各画像にコメントとURLを設定することができるので、ホームページを見にきた人への訴求や誘導にも利用できます。

ウェルカムメッセージ

お店から、ホームページを見にきた方へのご挨拶です。
どんなパンを提供できるお店なのか、パン作りへのこだわり、お店の特徴など伝えたいことを書きましょう。
リンクを挿入すれば、ホームページを見にきた方にまず見てもらいたいページを案内・誘導することができます。

▼ウェルカムメッセージ入力画面（HTMLを使うことなく、表、画像、動画を挿入できます）

タイトル、説明文

タイトル、説明文を入力します。
説明文は、どこにある何のお店か分かるように、強みも添えて、まとめましょう。
地域だけでみたら遠方の人は自分向けじゃないと判断しかねません、お取り寄せが可能なら、明記しておきましょう。

たとえば、以下のような説明文はどうでしょうか。
『宮之阪にあるベーグル専門店です。』

・商圏が広い場合「宮之阪」という町名で分からない可能性があるので、市区あるいは都道府県も含めるか検討する
・地方発送やお取り置きができる、などできることがあれば書く
・「天然酵母の」「国産小麦」「オーガニック」「米粉」など、強みや特徴を盛り込む
・配達や地方発送が可能な場合で、地域を絞っている場合は、対象地域を挙げるか検討する

上記を考慮して書くと、以下のようになります。
『大阪　枚方市宮之阪にある、天然酵母をつかったベーグル専門店です。地方発送も受け付けています。』

▼トップページの画像、ウェルカムメッセージを編集する：グーペ管理画面＞コンテンツ＞トップページ
（管理画面にはログインが必要です）

▼タイトル、説明文を編集する：グーペ管理画面＞各種設定＞基本設定
（管理画面にはログインが必要です）

デザインテンプレートの選び方

お試し申し込み時のジャンルを＜パン・サンドイッチ＞と選択するとデフォルトでは”Simple2“です。
汎用性が高く、文字通りシンプルで画像が活きるテンプレートです。
パン屋・ベーカリーのホームページでは、”Simple2“の他は、汎用性が高くTOPに情報がまとまった”Oneplate“、ポップアートのようなテイストが軽快な”Everyday“、スクロール時の写真の表現が印象的な”Smooth“、写真を大きく魅力的に表現できる”Hello“などがご利用されています。

グーペ管理画面では、デザインテンプレートをダウンロード（有料の場合は購入してダウンロード）する前に、色や表示サイズを変えたプレビューを確認することができます。
自分の作った内容が反映されたプレビューが確認できるので、トップページ、あるいはもっと作り込んでから、確認されると選びやすいでしょう。

▼デザインテンプレートや色を変えてみると（一つ目が”Simple2”、二つ目は”Everday”）

▼デザインテンプレートのプレビュー確認画面

▼デザインテンプレートを選ぶ：グーペ管理画面＞各種設定＞デザイン
（管理画面にはログインが必要です）

店舗情報

項目の追加、変更、並び替えおよび項目の表示・非表示の設定ができるので、お店にあった情報が表示できます。
複数店舗があるときの、2店舗目以降の作成方法、店舗一覧ページの作成方法は後述します。

▼店舗情報を編集する：グーペ管理画面＞管理メニュー＞コンテンツ：店舗情報
（管理画面にはログインが必要です）

メニュー、フォトアルバム

メニュー機能では、商品やサービスの価格や説明、写真を登録して、カテゴリー別に掲載できます。
自慢のパンメニューを掲載しましょう。
商品およびカテゴリーの表示順の並び替えは「十字アイコン」のドラッグで自在にできるので、新商品の追加も簡単です。
また、カテゴリー毎にURLがあることで、持ち帰り販売メニューとイートインメニューとでページの出し分けといったことも可能です。
（例えば、サンプルホームページで見ていただくと、食事パンとサンドイッチ）

写真がたくさん掲載できるフォトアルバム機能を、メニューとして活用する方法もあります。
フォトアルバム機能は、カテゴリーごとに写真をたくさん掲載できることに特化しています。メニューのような価格専用の入力箇所はありませんが、タイトル欄に商品名、本文欄に商品の説明や価格を入力することができます（サンプルホームページ内のフォトアルバム掲載例）。
お店のサービスにあった方法でご活用ください。

▼メニューの管理画面例（表示順並び替え画面）

▼メニューを登録する：グーペ管理画面＞管理メニュー＞コンテンツ：メニュー
▼フォトアルバムを登録する：グーペ管理画面＞管理メニュー＞コンテンツ：フォトアルバム
（管理画面にはログインが必要です）

予約でお取り置きを受け付ける

近所に、行列ができるほどの人気でパンがなくなり次第閉店となるお店があります。
予約販売していただけたらいいなというパン好きの気持ちで、ホームページでお取り置きの予約を受け付けるページを作りました。

「グーペ」では、ホームページ上で予約を受け付けるのに最適な機能が2つあります。
あらかじめ日時の枠を設定して受け付ける「イベント予約」機能、および、日付と設定した時間の範囲内で自由な予約を受け付ける「旧予約」機能です。
今回は、お受け取りにお越しいただく日時を指定したお取り置き予約なので、「イベント予約」機能を使って設定しました。

設定手順は3ステップ

(1)サービスの登録
サービス名、本文（サービスの内容説明）、価格を入力して、画像を登録して[次へ]。
価格は空欄にすることができます。

▼イベント予約　サービス登録画面

(2)日程・受付数の設定
カレンダーで日付を選んで、時間および受付数を指定して[追加]すると、下欄に表示されます。
受付数は【上限無し、0〜30】を選ぶことができます。
日程枠数は最大30件（スタンダードプランの場合90件）まで登録でき、設定が完了したら[登録]で、サービスおよび日程・受付数の作成が完了です。

▼イベント予約　日程・受付数の設定画面

(3)受付フォームの設定
電話番号と連絡事項欄は必須にするかを選べます。
注意事項は、受付フォームの下方に表示されます。予約をする際に疑問になりそうなこと（予約の確定、当日の段取り、キャンセル方法など）を記載しましょう。

▼受付フォームの設定画面

完成したお取り置き予約受付ページは、サンプルホームページのお取り置き予約でご確認ください。
お申し込みのあった予約は、連絡先メールアドレスに通知されるほか、管理画面の予約一覧で確認できます。

▼予約受付ページを作成する：グーペ管理画面＞管理メニュー＞運用管理：イベント予約
（管理画面にはログインが必要です）

求人情報を掲載する

ホームページに、Googleしごと検索に対応した「求人情報」を掲載できます。
Googleしごと検索とは、「求人」「バイト」「パート」など仕事に関連したキーワードを含めてGoogleで検索した際に、求人情報が検索結果に分かりやすくまとまって表示されるものです。
詳しくは、「グーペ」で作成した求人ページは対応済！『Googleしごと検索』を解説をご覧ください。

完成した求人ページは、サンプルホームページの求人情報でご確認ください。

▼求人ページを作成する：グーペ管理画面＞管理メニュー＞コンテンツ：求人ページ
（管理画面にはログインが必要です）

外部サービス連携でできること

SNS

ホームページに、運営しているSNSのアイコンや、ツイートボタン、LINEで送るボタンなどをつけることができます。
SNS連携しておくことで、ホームページのお知らせ作成時にはX（旧Twitter）とFacebookの同時投稿もできるため、SNS運用の工数削減になります。

▼SNSボタンの設定例

なお、[LINE友だち追加]ボタンは、外部パーツ機能で設定します。
（LINE公式アカウントであることが必要です）
設定方法はマニュアル：LINE「友だち追加ボタン」を設置するでご確認ください。

minne

ハンドメイド・手作り通販サイト「minne」に登録している作品の紹介ページ（minneギャラリー）が作成できます。
minneギャラリーをご利用になる場合は、デザインテンプレートは[minne連携対応]とあるものをお選びください。

PayPal

PayPalビジネスアカウントと連携することで、メニューページにショッピングカートを設置できます。
PayPalショッピングカートの表示例は、サンプルホームページのお取り寄せでご確認ください。

▼外部サービス連携を設定する：グーペ管理画面＞管理メニュー＞各種設定：外部サービス連携

▼[LINEの友だち追加]ボタンなどの外部パーツを設定する：グーペ管理画面＞管理メニュー＞各種設定：外部パーツ
（管理画面にはログインが必要です）

フリーページ機能

フリーページ機能なら、作りたい分だけ自由なレイアウトでページを作成できます。
「合言葉（パスワード）」を設定することで限定公開ページにすることも可能です。

今回フリーページ機能を使って作ったサンプルページを一覧にまとめました。
なお、フリーページは[下書き保存]を選択するとナビゲーションメニューに表示されず、URLから直接アクセスができます。URLを知っている人だけに公開したい場合や、導線を作っていてナビゲーションメニューに表示させる必要がない場合などに活用されます。

ページ	ナビゲーション	用途
感染予防対策について	非表示	お店で行っている感染予防対策を掲載する
よくあるご質問	表示	よくある質問とその回答を掲載する
パンへのこだわり	表示	お店およびパンへのこだわり、思いを掲載する
グーペ2号店	表示	2号店の店舗情報を掲載する

2店目以降の店舗情報ページの作り方

店舗が複数ある場合は、サンプルホームページのグーペ2号店のように店舗ごとにページを作成したり、サンプルホームページの店舗一覧のように複数の店舗を一覧にして紹介したりできます。

(1)Google Mapは、Google Mapをブラウザで開いて、お店の住所を入力して検索
(2)[地図を共有または埋め込む]＞[地図を埋め込む]を選択して、サイズを確認して、[HTMLをコピー]
▼Google Mapで地図情報のHTMLをコピーする

(3)グーペ管理画面のフリーページの内容欄にて、編集モードを[HTML入力]にして貼り付け、[「下書き」で更新]
(4)フリーページ内容欄の編集モードを[リッチエディタ]に戻して、お店の情報を入力して、[「下書き」で更新]

▼フリーページの編集例

▼フリーページ機能で新たなページを作成する：グーペ管理画面＞管理メニュー＞コンテンツ：フリーページ

グーペでつくられたパン屋・ベーカリーの事例紹介

「グーペ」をご利用のパン屋・ベーカリーのホームページを紹介します。

Natural Bakery 日々舎（にちにちしゃ）さん（栃木県）

テンプレートは”Simple2”をご利用です。
ウェルカムメッセージに画像を挿入して、ネットショップやFacebookへ誘導されています。
フリーページ機能の使い方の見本のように上手に活用されていらっしゃいます。
お店の理念やこだわりを表現するページや美味しい食べ方の紹介ページを拝見することで、読み手はお店（作り手）や商品への理解や信頼を深めてくれそうです。
なお、ネットショップはグーペの姉妹サービス「カラーミーショップ」をご利用です。

ぱんだよりノドカさん（京都府）

テンプレートは”Everyday”をご利用です。
パンダの柔らかいゆるっとした可愛さとロゴの文字が、ポップなテンプレートにぴったりです。
パンの予約販売に、イベント予約機能を活用してくださっています。
また外部サービス連携機能を使ってminneギャラリーページを作って、「minne」で販売されている商品をホームページに掲載していらしゃいます。
ご自身の世界観を表現したホームページ上で販売商品を紹介することで、こちらも読み手がお店（作り手）や商品への理解や信頼を深めるのに役立つと思います。

パン屋・ベーカリーのホームページをグーペスタッフが作ってみました

ウェブデザインやプログラミングに詳しくないスタッフが作成した、パン屋・ベーカリーのホームページはこちらです。

テンプレートは、「Clinic2」を使用しました。パンの香ばしいイメージに合うよう、テーマカラーはブラウンを選びました。シンプルでフラットなデザインは、幅広い年代から見やすいつくりで、みんなに愛されるパン屋・ベーカリーにもピッタリと考えました。

まとめ

パン屋・ベーカリーのホームページを作成する流れをご案内しました。
忙しい中で、じっくりと腰を据えてホームページを制作するといったことは難しいと感じる方も少なくないと思います。

たとえば最初は「トップページ」、「店舗情報」、「お知らせ」、「一番人気のパンの紹介」だけといったシンプルなつくりではじめ、店舗とホームページ運営の中でお客様の要望や店内からの必要性をもとにページを増やし作り重ねていくという、育てていく運用も可能なのがホームページの良さです。
そして、作り重ねたホームページは資産になります。

「グーペ」は作成だけでなく、日々の更新のしやすさにもこだわったサービス作りをしています。
よければ、この機会にホームページ作成をお試しください。