お店のホームページを作りたいけどなにから始めたらよいか分からない方、専門業者に相談してみたけど数十万円必要と言われてあきらめてしまった店長さん、この記事を最後までお読みいただくと新たな道が開けるかもしれません。
本記事では、必要最低限のホームページを作るための準備から完成まで一通りの流れをご紹介してます。
説明には、GMOペパボのホームページ作成サービス「グーペ」を利用しています。
グーペは初心者でも簡単に店舗向けのホームページが作れると評判のサービスです。
ぜひお読みになって、念願のお店のホームページ完成への道しるべにして頂ければ幸いです。
「グーペ」はお店のホームページ作り専門のサービス
それではいよいよお店のホームページの作り方の説明に入らせていただきます。グーペの使い方が分からない方でも大丈夫です。
以下の流れですすめていきます。
1. ホームページのデザイン案を考える
ホームページをどのような構成で作成するか大まかな内容を決めます
2. グーペの15日間無料お試し版の登録
グーペに登録してホームページを作成する環境を提供してもらいます。
3. ホームページの初期設定
基本的な設定を行います。
4. 設定したメールアドレスによる本人確認
設定したメールアドレスで本人確認を行います。
5. デザイン（テンプレート）の設定
ホームページのデザイン設定を行います。
6. 個別ページの作成
店舗情報、商品メニューなど、個別のページを作成します。
7. 完成したホームページの表示確認
出来上がったホームページを表示して確認します。パソコンとスマホの両方で確認します。
それでは個別に説明していきます。
1. ホームページのデザイン案を考える
まずは、どんな雰囲気のホームページにするかを決めましょう。
あなたのお店と同じ業界や同じジャンルの人気店のホームページを参考にしたり、グーペの公式サイト内にあるテンプレート（ホームページのひな型）をご覧になるのも宜しいかと思います。
本サイトの別記事も参考にされてください。
本記事では、以下のような喫茶店のホームページを作成することにします。
トップページ
商品メニュー
トップページの上部にお店の名前、左側に各種ページのメニューを置きまして、中央にお店のイメージが伝わる写真を数枚用意して、スライドショーにします。
その下にはウェルカムメッセージとインフォメーションの一覧を表示させます。
左側の各種ページのメニューから商品メニューや店舗案内などのページに移動する感じですね。
2. グーペの15日間無料お試し版の登録
大まかにどんな感じのホームページを作るか決まりましたら、グーペの15日間無料お試し版の申込みを行いましょう。
申込みには以下が必要になります。申込み時によくありますクレジットカードの登録は必要ありませんのでお気軽にどうぞ。
・メールアドレス
Gmailなどのフリーメールも使用可能。携帯・スマホのメールアドレスは不可。
・ログインID
ホームページ管理画面にログインする際に使用する。3～15文字の半角小文字英数字。
・パスワード
英字・数字・記号いずれかが2種類以上混在する文字列で8文字以上。
準備ができましたら、グーペの公式サイトに行きます。
そこで「ホームページを作ってみる」ボタンを押してお申し込み画面を表示します。
お申し込み画面で「メールアドレス」と「ログインID」、「パスワード」を入力しまして、グーペ利用規約を確認し「利用規約に同意して申し込む」ボタンを押します。
申し込みが完了しますと、下のページが表示されます。これでホームページを作成する準備はととのいました。
「初期設定へ」ボタンを押しますと、ホームページの初期設定ページが表示されます。
3. ホームページの初期設定
ホームページの初期設定では以下のことを行います。
・「お客様情報」の登録
店舗のオーナーさん・責任者さんのお名前や住所などを登録します。ホームページ作成サービスの契約に関わる情報ですので、正式な情報を入力します。
・「ホームページ情報」の登録
ホームページURL（ホームページを表示するためにブラウザで指定するアドレス）やホームページのタイトル、店舗情報（お店の住所など）を入力します。初期値は「お客様情報」で入力した内容が設定されていますので、必要に応じて店舗の情報に修正します。
入力が終わりましたら、画面下の「ホームページ作成」ボタンを押します。入力内容は後で修正可能ですので、ここで完璧に決めなくても大丈夫です。
初期状態のホームページが完成しますと以下が表示されます。
4. 設定したメールアドレスによる本人確認
画面上をマウスでクリックしますと、あなたのホームページの管理画面が表示されます。今後はこの画面でホームページの設定を行っていきます。
ホームページの設定に入る前に、管理画面上部に以下のようなメッセージが表示されていますので、その内容にそった作業を行います。地味ですがとても大事な作業になりますので最初にやってしまいます。
前にメールアドレスを設定しましたが、そのアドレス宛に以下のような内容のメールが送られてきます。
メールの文章内の「ご本人確認用URL」のリンクをクリックします。
そうしますと、以下のような画面が表示されます。これで本人確認が完了しまして、先ほどの管理画面でのメッセージが表示されなくなります。
5. 全体のデザインとトップページの作り方
いよいよホームページの設定を行っていきます。
と、その前に。実はこの時点で、サンプル的なホームページは既に出来上がっているので、まずそれを確認しましょう。管理画面上部の「ホームページ表示」ボタンを押します。
私の場合は以下のようなホームページが表示されました。
初期状態で選択されたのは「Simple2」というテンプレートでして、表示されているスライドショーはグーペが用意した画像が表示されています。これはこれで良いとは思うのですが、私が作成しようと思っていたデザインとは異なりますので、これから色々設定を変えていきたいと思います。
管理画面に戻って設定を始めます。
基本設定
管理画面左側のメニューの「基本設定」をクリックしますと、基本設定画面が表示されます。
色々な設定項目がありますが、今回は以下の設定を行います。
- 公開設定
- ホームページのタイトル
- ホームページの説明文
公開設定
「公開設定」の下にある「公開」を押しますと下のようにメニューが表示されました。
公開設定を「公開」を設定しますと、あなたのホームページの現在の状態がインターネット上に公開されまして、ネット上の全ての人が閲覧可能になります。もちろん作成中の状態でもです。
でも、作成中の場合はまだ公開したくないと思いませんか？
その場合には「非公開」もしくは「工事中」に設定します。このどちらかの設定にしますと、誰かがあなたのホームページを表示しようとしても表示されず、代わりに以下のような内容が表示されます。
・非公開に設定した場合
・工事中に設定した場合
とても便利な機能ですね。非公開や工事中に設定した後、公開への戻し忘れには十分ご注意ください。
ホームページのタイトル
あなたのホームページの看板に相当する部分の設定です。必ず設定する必要があります。先にお見せしました私のホームページの以下の部分ですね。
選択するテンプレートによっては、あまり長いと改行されてカッコ悪くなりますのでご注意ください。
ホームページの説明文
あなたのお店のキャッチコピーを設定します。設定しなくても大丈夫ですが、なにか気の利いた文がありますと、お客様の期待度が高まる可能性があります。
私のホームページの以下の部分です。
Googleなどに検索されやすくするためには、お店の特徴やアピールしたいキーワード、お店の場所などを入れてもよいと思います。
ナビゲーション
お知らせや商品メニュー、店舗情報などの個別ページの設定を行います。これにつきましては、次の「6. 個別ページ」のところで改めてご紹介したいと思います。
トップページ
管理画面左側のメニューの「トップページ」をクリックしますと、トップページ設定画面が表示されます。
ここでは、あなたのホームページのトップページに関する設定を行います。
設定項目は以下の通りです。
- スライドショー
- スライドショーの速度
- ウェルカムメッセージ
- インフォメーション表示件数
スライドショー
トップページで一番目を引き付ける部分の設定です。ホームページを開いた際に最初に目に飛び込んでくる画像の設定になります。
画像は最大10個まで登録できまして、それを一定間隔で自動的に切り替えてくれます。
各画像にはコメントを付けることができます。使い方も簡単で、表示する順番も簡単に変えられますので、ストーリーに沿った並びにするのも面白いかもしれないですね。
私は最初に設定されていた2つの画像を削除して、5個の画像を登録してみました。
スライドショーの速度
スライドショーで画像が切り替わる間隔と画像のサイズを変更することができます。
切り替わる間隔は5段階変えられまして、スライドバーが一番左（速い方）で4秒、一段階右にずらすことで2秒ずつ遅くなります。一番遅くすると12秒間隔です。
画像サイズはとりあえず初期値のまま（真ん中）使用します。
ウェルカムメッセージ
ウェルカムメッセージとは、あなたのホームページを簡単に説明するための短い文章です。私の例ですと、以下の部分に表示されているメッセージになります。
先ほど設定した「ホームページの説明文」よりはもう少し詳しく、あなたのホームページの説明文を書いてみましょう。
メッセージの入力欄は、単に文章を設定するだけでなく、文字のフォントやサイズ、その他の装飾など、かなり凝ったことができます。この使い方の説明を始めると記事がかなり長くなってしまいますので、別記事で説明することにします。（別記事は準備中です。ごめんなさい）
インフォメーション表示件数
トップページには、あなたのお店のニュースやイベント情報などをインフォメーション（お知らせ）を掲載することができます。
インフォメーション表示件数は、トップページに表示するインフォメーションの最大件数を設定します。
例えば「5件表示」と設定した場合、最新のインフォメーションから順に5件がトップページに表示されます。私は3件に設定してみました。
デザイン
デザインの設定は、管理画面の中で最も重要な設定の1つです。あなたのお店の人気や評判を左右するといっても過言ではないでしょう。
あなたのホームページの全体的なデザインを決めるためのテンプレート（ひな型）を設定します。
「ダウンロード」を選択しますと、グーペで提供しているテンプレートの一覧が見れます。テンプレートには無料のものと有料のものがあります。最初は無料のものから始めた方が良いと思います。
「ダウンロード」タブを選択しますと、以下のようにグーペが提供しているテンプレートの一覧が表示されます。
お気に入りのテンプレートが見つかりましたら、各テンプレートの下にありますダウンロードボタンを押します。
「ダウンロードボタン」を押しますとボタンが「デザイン一覧画面へ」に変わりますので、そのボタンを押します。ダウンロードしたテンプレートは保持しているデザインとして格納されていますので、そのデザインの「このデザインに変更」ボタンを押して、そのデザインをご自分のホームページに適用します。
現在適用中のデザイン内の「編集」を押すと、選んだテンプレートの詳細設定ができます。私は「Organic」という無料テンプレートを選んでみました。
詳細設定の内容は以下のとおりです。
ちなみに、有料テンプレートは1つ11000円（税込）します。専門業者に依頼するよりは断然お安いのですが、でも高いですよね。
有料テンプレートはデザイン性の高いものばかりですのでぜひ利用していただきたいのですが、無料テンプレートでグーペに慣れてからで全く問題無いと思います。
ここまでの設定で私のホームページは以下のようになりました。
6. 個別ページ（インフォメーション、店舗情報、商品メニューなど）の作り方
ここまででホームページ全体のスタイルとトップページがほぼ出来上がりました。
ここからは、サイトの中身である個別ページを作っていきます。お店で扱っている商品やサービスなどのメニューやお店の最新情報をお知らせするページ、店舗情報を伝えるページなどが対象となります。
ナビゲーション
先ほど後回しにしました「ナビゲーション」設定について説明します。
ここに表示されています項目は、グーペが用意してます個別ページの一覧になります。トップページに以下のようなメニューが表示されていますが、これはこの「ナビゲーション」で設定します。
メニューの順番を入れ替えたり、メニュー名を変更したり、個々のメニューを表示させないようにすることも出来ます。
もし、ここに無いメニューを追加したい場合は、「フリーページ」を作成する機能でオリジナルなページを作ることで、そのフリーページをメニューに追加できます。
さらに、お友達のホームページへのリンクをメニューとして追加することも出来ます。
お知らせ
トップページのインフォメーションコーナーに表示するお知らせ情報を作成する機能になります。
タイトルと本文を入力した後、「登録」ボタンを押すことでトップページに作成したお知らせが掲載されます。
本文の入力は、高機能エディターが利用可能ですので、文字の装飾や画像の挿入などかなり凝ったページを作成することができます。前にお伝えした「ウェルカムメッセージ」のメッセージを作成する機能と同じですね。
メニュー
お店の商品やサービスのメニューを作成する機能です。
メニュー名とカテゴリー、価格、紹介文、写真、おすすめメニューの設定を行います。
設定が必須なのはメニュー名だけなのですが、カテゴリー（例えばレストランの場合は、和食、洋食、飲み物など）やメニューの紹介文、できましたら商品写真もがんばって掲載しましょう。
おすすめメニュー設定は、特定のメニューをおすすめメニューに設定しますと、メニューを表示した際に、商品名の横にマークを付けることができます。このマークは選んだテンプレートによって異なります。
クーポン
お店のホームページでよく見かけるクーポンを作成する機能です。使い方はとても簡単です。
クーポンのタイトルや有効期限、利用条件、画像などを設定画面から入力することで、テンプレートで用意されたクーポンを自動的に作成してくれます。
合言葉（秘密のコード）を入れないと発行されないクーポンを作成することもできます。
店舗情報
店舗情報のページはとても簡単です。
お店の名前や住所、電話番号、営業時間、その他の情報を設定画面に入力するだけで、テンプレートで用意された店舗情報ページを自動的に作成してくれます。
お店の地図は、入力した住所をもとにGoogleマップを自動的に作成して表示してくれます。
このように必要な情報を入力するだけで下のような店舗情報ページができあがります。
7. 完成したホームページの表示確認
これまでにご紹介した設定を行うことで、以下のようなホームページが出来上がります。専門業者に数十万円支払って作成したホームページには負けますが、短時間でざっくりと作成したホームページとしては、結構良い感じに仕上がっていると思いませんか？
パソコンでの表示
スマートフォンでの表示
グーペ無料お試しの申込みが終わってからここまで、１～２時間もあれば出来上がると思います。
今回はお伝えし切れなかったのですが、まだまだ工夫できる部分は残っていますので、もっといい感じに仕上げることは可能です。
ぜひ15日間無料お試しサービスを利用して、色々お試しになってみてはいかがでしょうか。
グーペの15日間無料お試しは公式サイトから申込めます。
まとめ
長い記事を最後までお読みいただいて本当にありがとうございました。良いと感じたものをお伝えしようと思うと、あれもこれもと書いてしまい、つい長くなってしまいます。
グーペを使ったお店のホームページの作り方について少しはご理解いただけましたでしょうか。
世の中にホームページが作れるサービスはたくさんありまして、単純にホームページを作るだけでしたら無料で使えるものもいっぱいあります。
でも無料で作ったホームページは、そのままではお店のホームページとして使うのは困難です。
結局、有料機能を使うハメになることが多くありまして、値段も高価だったりするのです。
その点「グーペ」は無料サービスはありませんので、最初からお店に必要な機能をほぼ全て使えます。
とてもおすすめです！
お店に立派なホームページが立ち上がり、売り上げが倍増して、思った以上にお店が大変なことになり、嬉しい悲鳴を上げているご自分のお姿を想像してみましょう。
ワクワクしてきませんか？
「グーペ」ならそれを実現してくれるでしょう。
本サイト「生活すぱいす」では、本記事以外にもグーペに関する情報を発信しております。よろしければご覧ください。
最後までお読みいただきありがとうございました！
コメント