グーペの使い方は？ Goopeでホームページを作ってみた【実例あり】

会員登録し、管理画面を設定することでホームページを作成・運用できます。

特に、左にあるボタンの上から下までを順番に入力していくことでHPが自然に完成してしまいます。

• トップページ
• お知らせ
• カレンダー
• フォトアルバム
• フリーページ
• 店舗情報
• スタッフ紹介
• メニュー
• クーポン
• 求人ページ

これらのページはすでに型が用意されており、空欄に情報を入力していくだけで完成します。

ホームページの基本形はすでに出来上がっており、情報を入力していくだけで完成。

ホームページ全般の設定をする画面です。店名やHPのタイトルなどを入れます。

ここではヨガ・ダルシムという架空のヨガスタジオの情報を入力しています。

店舗や屋号のロゴをアップロードします。ロゴがない場合は、テキストが表示されます。

やはり、ロゴがあったほうがサイトデザインは映えます。今ではロゴも自分で作れるツールもあり、外注でも気軽に依頼できるので起業時にしっかり準備しておきたいですね。

※iPhoneやMACで使われるretinaディスプレイで見るとぼやけます。ロゴを2倍の大きさでアップロードしCSSで半分サイズする必要があります。

トップページの初期状態です。すでに、見本となる情報が入力されているのでわかりやすいですね。

1. スライドショー
2. ウェルカムメッセージ

の2つを入力していきます。

Word（代表的なワープロソフト）を使う感覚で文字を入力すればOK。ブログの入力画面風の編集方式です。スマホでも使えるのでタイピングが苦手な人でも簡単に使えます。

HTMLがわかる方はソースコード編集モードも便利です。htmlタグidやclassを使った複雑な編集も可能です。

トップページの第一段が完成！スライドショーとメッセージが入るだけでそれっぽい雰囲気になってきました。

お知らせ編集画面では、イベント・キャンペーンや定休日などの更新ができます。

お知らせを追加すると、トップページのお知らせ欄にも最新情報として掲載されます。

• タイトル
• 本文
• 写真

の３点を設定できます。

お知らせページの完成イメージ。こんなページが簡単に作れます！

イベントがある日付をクリックすると入力画面が開きます。

イベントの詳細をこの画面で入力します。

1/26にイベントが追加されました。

毎週月曜日は定休日など、週ごとに決まったイベントがあるなら繰り返し設定ができます。

毎月第二水曜日が定休日など、マニアックな設定を繰り返しで登録することはできません。

• 写真
• カテゴリー（自由に設定できる）
• タイトル
• 本文

を入力できます。

フォトアルバムページに写真が追加されます。

食べログのように、カテゴリーをいくつかわけ（「内観」「外観」「メニュー」「料理」）などわかりやすく運用することができます。

写真をクリックすると拡大表示。

※選んだテンプレートによっては、タイトル・本文は反映されず写真だけがでます。

Instagram（インスタグラム：写真共有SNS）のフィルター機能のようなものもあります。とはいえフィルター数も多くないので、スマホの写真編集アプリか、PCでPhotoshop系（無料のがあります）の写真編集ソフトを使ったほうがいいでしょう。

テストで作っているヨガ・ダルシムでは入会金を払って月謝を払うという想定です。居酒屋風メニューには少し合わなそうですが、入会金を設定してみました。

• 写真
• メニュー名
• 金額
• カテゴリ

などを設定できます。

メニューページの完成イメージ。単品メニューを追加していくとメニュー表が完成します。

例えばグーペの料金ページのようにデザインされた料金表を使うこともできます。HTMLやCSS編集などの専門知識は必要ですが「フリーページ」をカスタムすることで可能です。

• タイトル
• 提示方法
• 利用条件
• 画像
• 有効期限
• 秘密の合言葉

を設定できる。

こういったクーポンが完成。初回限定クーポンや、再来店専用クーポン、誕生日限定クーポンや秘密の合言葉が必要な常連さん限定クーポンなどアイデア次第でいろいろ活用できそうです。

業種別に豊富なテンプレートがあります。好きなテンプレートを選ぶだけ。

有料テンプレートはだいたい1万円で購入可能。有料なだけあってデザインはかっこいいです。

テンプレートを変更したら、ずいぶん雰囲気が変わりました。デザイン変更もこのように簡単にできます。

トップページの文章量が少ないので多くしてみました。

• ヨガダルシムはこんな人におすすめ
• 特長
• メリット
• 体験プランをすすめる

ヨガを検討中の見込み客が前のめりになりそうな文章を入れ込んでみました。

HPは平均で2ページほどしか読まれません。だからこそ一期一会のチャンスを無駄にしてはいけません。しっかり情報を盛り込む必要があります。

あくまでウェルカムメッセージなので、長文を入れ込むと文字ばかりで読みづらくなりました…。

ウェルカムメッセージには画像もいれられるし見出しタグ（h2、h3、etc）を使えるのでHTMLをしっかり作りつつ、CSSを編集して見栄えをカスタマイズしてみました。読みやすくなりました。