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

お悩み相談

パン屋さん

グーペってどんなホームページが完成するんですか?

美容師さん

グーペの使い方は? 簡単ですか?
グーペの使い方を順を追って解説します。簡単なのに高機能なことを実感してください!

山本真一

初心者でも簡単に、自分でホームページを作成することができるホームページ作成ツール「グーペ(Goope)」の使い方を徹底解説します。

山本真一

15年以上の経験がある、プロのホームページ制作者である私(@saino_biz)が、グーペの使い方を解説します。

グーペの使い方を知って、本格的なホームページを作ろう

最短1時間でここまでできた

グーペを開設して最短1時間でホームページが完成。文章を作り込んだり、デザインをかっこよくカスタマイズする事も可能です。

文章を作り込んでSEOを強化

文章をしっかり作り込んで、なぜあなたのサービスや商品が素晴らしいのか、競合他社と比較した優位性など、しっかり書き込む事が可能。

デザインカスタマイズで縦長ページ(LP)風に

デザインのカスタマイズも可能。ランディングページ風に縦長で訴求力の高いページを作れます。

山本真一

今回はグーペを実際に作っていく過程を公開しながら、グーペの使い方や機能を解説していきます。

関連記事


グーペの使い方、ホームページを作ってみた

それでは、実際に作ってみた感想をレビューをしていきましょう。

会員登録し管理画面へログイン

STEP.1
会員登録して管理画面にログイン

グーペ会員登録

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

STEP.2
左のボタンを順番に設定していくだけで完成

グーペは簡単

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

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

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

山本真一

無料の試用期間が15日間あります、あなたに合うかどうか試用期間で試してみましょう。

トップページの編集/基本情報の入力

空欄を埋めるだけで、こんなサイトが完成します。

山本真一

トップページ編集画面では、主に「スライドショーの写真」と「ウェルカムメッセージ」を編集できます。
STEP.1
空欄を埋めていくだけで「このデザイン」が完成

グーペの基本サイト

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

STEP.2
ホームページ全般の設定

グーペHPの全般設定

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

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

STEP.3
ロゴ画像の設定

グーペ:ロゴの設定

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

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

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

STEP.4
トップページの情報入力

グーペ:トップページの情報入力

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

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

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

STEP.5
入力エディターの操作1

グーペ:入力エディターの操作

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

STEP.5
入力エディターの操作2:高度な編集もOK

グーペ:入力エディター:高度な設定

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

STEP.6
トップページが完成!

グーペ:トップページが完成

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


お知らせの入力

STEP.1
お知らせ編集画面

お知らせ編集

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

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

  • タイトル
  • 本文
  • 写真

の3点を設定できます。

STEP.2
お知らせページが完成

お知らせページが完成

お知らせページの完成イメージ。こんなページが簡単につくれてしまえます!

お知らせを効果的に使っているグーペサイト例

参考 お知らせページ金星灯百貨店

物語性のあるオリジナル雑貨を扱っているお店。出展情報を掲載しています。写真を多様した素敵な出展ページ。


カレンダー

定休日やイベントごとを宣伝するのに便利な機能がカレンダー。カレンダー機能も、もちろん標準装備。イベントや定休日を告知するのが簡単です。

STEP.1
日付を選択

グーペカレンダー機能

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

STEP.2
イベント編集画面

イベント編集画面

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

STEP.3
カレンダーにイベント登録完了

カレンダーにイベント登録完了

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

STEP.4
繰り返し設定

繰り返し設定

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

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

STEP.5
Googleカレンダーをグーペに埋め込むこともできる

グーペのカレンダー機能は、Gooleカレンダー感覚で使えます。しかし、機能面では圧倒的にGoogleカレンダーが上。

グーペは自由に編集できる「フリーページ」があります。そのページにお店のスケジュールを掲載したGoogleカレンダーをはめ込む事でカレンダー機能を代用することも可能。一手間加えたい方はこんな使い方もおすすめです。

参考 Google カレンダーをウェブサイトに追加するGoogleカレンダー ヘルプ

カレンダーを効果的に使っているグーペサイト例

参考 カレンダーページMaho's Table

料理教室のサイト。何日にどんなレッスンを開いているかがわかりやすくカレンダーに掲載されています。


フォトアルバム

食べログでよくある料理や店舗写真が掲載されたページのような写真をアップロードできるページが作れます。

STEP.1
フォトアルバムの入力

グーペフォトアルバム入力画面

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

を入力できます。

STEP.2
フォトアルバムページに写真が追加

フォトアルバムページに写真追加

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

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

山本真一

写真は良く見られるコンテンツなので、お店やあなたの仕事の雰囲気を伝え親近感を持ってもらえるように工夫したいですね。
STEP.3
クリックで拡大表示

クリックで拡大表示

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

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

STEP.4
フィルター機能

Instagram風フィルター機能

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

フォトアルバムを効果的に使っているグーペサイト例

参考 ギャラリーページmer by PUUR

美容院さんのサイト。サロンの雰囲気がわかる写真やカット写真が豊富。お手本にしたいですね。


メニュー(料金)の設定

グーペはもともと飲食店向けのHP作成ツールとしてスタートしたので、メニューページも食べログの料金ページっぽい雰囲気。単品メニューの金額を追加していくと居酒屋や定食屋のようなメニューが完成します。

STEP.1
単品メニュー入力

メニュー入力

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

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

などを設定できます。

STEP.2
メニューページが完成

メニューページが完成

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

STEP.3
メニューのカスタマイズ

メニューのカスタマイズ

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

メニューを効果的に使っているグーペサイト例

参考 メニューページ梵天の風

整体師さんのサイト。料金だけでなく、どんなテクニックを使って施術をするかということを訴求。

参考 メニューページからだ元気治療院

整体師さんのサイト。利用の流れなども掲載。アイデア次第でメニューを超えた使い方もできます。


クーポン

グーペなら、ぐるなびやホットペッパービューティーでよくあるクーポンも簡単に作れます。

STEP.1
クーポン編集画面

グーペ:クーポン編集画面

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

を設定できる。

STEP.2
クーポンページのイメージ

グーペクーポンイメージ

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

クーポンを効果的に利用している例

参考 クーポンページMother Leaf

美容院のサイト。「新規向けクーポン」などが掲載されています。


たった1時間でHPが完成

山本真一

ここまでの作業時間は1時間ほど。HPの形はほぼ完成しました。簡単で、早い!

順番に情報を入力していくだけで簡単に完成してしまいました!


デザイン変更も簡単

グーペなら、デザイン変更も一瞬で可能です!

STEP.1
豊富なデザインテンプレートから好きなデザインを選ぶ

グーペデザインテンプレート

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

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

STEP.2
テンプレートを変更するだけで、雰囲気が変わる

ワンクリックでデザイン変更

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


【カスタマイズ】SEO向け、トップページの情報を増やしてみた

グーペは簡単に作れるとはいえ、やはり情報が少ないため見込み客が比較検討できません。何の売りがあるのかピンとくるように文章を追加してみました。

STEP.1
トップページのウェルカムメッセージに文章を追加

グーペSEOカスタマイズ

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

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

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

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

山本真一

実際に私がグーペを制作する場合、料金や体験談など見込み客が前のめりになりそうな情報をもっと入れ込みます。
STEP.2
読みづらいので、長文を読みやすいデザインにカスタマイズ

長文向けデザインカスタマイズ

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

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

山本真一

CSSを編集して、長文でも読みやすくカスタマイズしました。

【カスタマイズ】ランディングページ風にしてみた

山本真一

グーペの限界を見るために、さらなるカスタマイズに挑戦してみました。

グーペはHTMLやCSSを自由に設定できるので、デザインをかっこよくすることも可能です。

ランディングページ風にトップページをカスタマイズ

  • 一番最初に表示される写真はフェードイン・フェードアウトでカッコよく切り替わります
  • スマホ・タブレット・PCでそれぞれデザインが変化します
  • 体験申し込みが目立つようにしています

スマホ・タブレット・PCでデザインも変化

スマートフォン

タブレット

PC

山本真一

完全スマートフォン対応、スマートフォンやタブレットで見たときにデザインも変化。

無料お試し15日間 初心者でもかんたん高機能ホームページ制作ツール


グーペとは?

グーペの特長とメリット

グーペのメリット

グーペは日本企業が作成したツール(他の競合ツールは外国製)。日本の店舗や会社用サイトを初心者でも簡単に作れます。飲食店美容室整体院教室病院小売士業会社・BtoBハンドメイド作家など様々な方に人気。

  • グーペはかんたん:操作が簡単だから、ホームページ作成・改善が簡単にできる
  • グーペは安い:グーペの利用料は年間1万円と安い。
  • グーペは早い:入力項目に順番にホームページの情報を入力していけば最短1時間でホームページが完成。

山本真一

小さく作って大きく育てる。サイトを作る事ではなく、運用し育てていく事が大事なポイントです。

グーペは自作ツールの中でもっとも簡単

グーペは高速でPDCAを回せる

企業HPの9割が集客に失敗している主な原因がこれ。難しいツールを使うことで運用できなくなったり、制作会社に外注することで運用が止まってしまいます。

  • 外注すると:制作会社に依頼すると制作にも修正にもお金が必要。
  • WordPressやWIXを使うと:ツールが難しいと使いこなせない。
  • グーペなら:簡単、低コスト、改善し放題。

山本真一

グーペは簡単で安く早く使えるから、高速でPDCAを回せるようになります。

個人事業主・中小企業がグーペを使うべき理由

ホームページ集客できるかどうかが、小さなお店・会社の死活問題に?

個人事業主や中小企業経営者は、血で血を洗う弱肉強食の世界を生きています。

中小企業白書「個人事業主は開業1年で約4割が廃業」

中小企業白書によると個人事業主として開業した方の約4割が1年以内で廃業。2年で約半数。10年後まで生き残る方はたった1割しかいません。

中小企業白書「ホームページによって販売客数が大幅に増加したのはたった3.7%」

このように企業HPの9割が集客に失敗しています。

軽い気持ちで起業しても即死もありえ、集客で頼みの綱となるホームページは全く機能していないという悲しい現実。

だからこそ、当ブログでは、

とお伝えしています。


まとめ

  • 1時間でほぼ完成した
  • 一手間加えればカスタマイズもできる
  • かっこいいサイトも作れた!

山本真一

グーペ、マジでおすすめです!

30万円相当の高品質ホームページを月額9,800円で持てる!

社長

グーペは、たしかに簡単にHPを作れた。でも、完成したのはシンプルすぎるHP。こんなんで集客できるの…?

花屋オーナー

安くHPが持てればいいと思っていたけど、いざ公開してみるとブログやSNS、サイト改善など、やるべき事が山程ある。でも何をしたらいいのかさっぱり…。信頼できるプロに助けて欲しい…。
月額9,800円でプロが基礎部分を作り、あとは二人三脚でサイト運用・拡張していけるHP制作サービスあります!

山本真一


定額制ホームページ制作サービス(サブスクリプション型)

初期費用29,800円〜、月額9,800円の定額制ホームページ制作サービス。個人授業主・フリーランスに優しい価格設定。高品質で集客できるホームページを作ります。

ライティング特化プラン

デザインはシンプル、その分売れる文章をしっかり作り込むプラン

フルカスタマイズプラン

デザインも文章もしっかり作り込むプラン

関連記事

グーペとは?(全3回)

第01回
グーペの評判
第02回
グーペの使い方は? 作ってみた
第03回
サロン・美容院のグーペ活用
error: Content is protected !!