MENU

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

URLをコピーする
URLをコピーしました!
お悩み相談
パン屋さんのアイコン画像パン屋さん

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

美容師さんのアイコン画像美容師さん

グーペの使い方は? 簡単ですか?

山本真一のアイコン画像山本真一

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

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

山本真一のアイコン画像山本真一

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

\ 無料お試し15日間あり! /

目次

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

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

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

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


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

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

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


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

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

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

山本真一のアイコン画像山本真一

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


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

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

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

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

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

STEP
左のボタンを順番に設定していくだけで完成
グーペは簡単

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

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

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

山本真一のアイコン画像山本真一

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


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

トップページ編集画面の空欄を埋めていくだけで、自然に立派なホームページが完成します。

山本真一のアイコン画像山本真一

トップページ編集画面では、主に「スライドショーの写真」と「ウェルカムメッセージ」を編集できます。

STEP
空欄を埋めていくだけで「このデザイン」が完成
グーペの基本サイト

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

STEP
ホームページ全般の設定
グーペHPの全般設定

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

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

STEP
ロゴ画像の設定
グーペ:ロゴの設定

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

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

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

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

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

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

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

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

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

STEP
入力エディターの操作2:高度な編集もOK
グーペ:入力エディター:高度な設定

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

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

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


お知らせの入力

STEP
お知らせ編集画面
お知らせ編集

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

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

  • タイトル
  • 本文
  • 写真

の3点を設定できます。

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

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

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

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


カレンダー

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

STEP
日付を選択
グーペカレンダー機能

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

STEP
イベント編集画面
イベント編集画面

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

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

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

STEP
繰り返し設定
繰り返し設定

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

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

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

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

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


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

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


フォトアルバム

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

STEP
フォトアルバムの入力
グーペフォトアルバム入力画面
  • 写真
  • カテゴリー(自由に設定できる)
  • タイトル
  • 本文

を入力できます。

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

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

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

STEP
クリックで拡大表示
クリックで拡大表示

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

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

STEP
フィルター機能
Instagram風フィルター機能

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

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

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


メニュー(料金)の設定

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

STEP
単品メニュー入力
メニュー入力

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

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

などを設定できます。

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

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

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

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

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

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

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


クーポン

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

STEP
クーポン編集画面
グーペ:クーポン編集画面
  • タイトル
  • 提示方法
  • 利用条件
  • 画像
  • 有効期限
  • 秘密の合言葉

を設定できる。

STEP
クーポンページのイメージ
グーペクーポンイメージ

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

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

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


たった1時間でHPが完成

山本真一のアイコン画像山本真一

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

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


デザイン変更も簡単

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

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

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

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

STEP
テンプレートを変更するだけで、雰囲気が変わる
ワンクリックでデザイン変更

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


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

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

STEP
トップページのウェルカムメッセージに文章を追加
グーペSEOカスタマイズ

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

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

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

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

STEP
読みづらいので、長文を読みやすいデザインにカスタマイズ
長文向けデザインカスタマイズ

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

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

山本真一のアイコン画像山本真一

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


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

山本真一のアイコン画像山本真一

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

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

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

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

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

スマートフォン

タブレット

PC

山本真一のアイコン画像山本真一

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


グーペとは?

グーペの特長とメリット

グーペのメリット

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

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

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


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

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

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

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

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


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

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

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

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

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


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

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

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

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

とお伝えしています。


まとめ

まとめ
  1. 1時間でほぼ完成した
  2. 一手間加えればカスタマイズもできる
  3. かっこいいサイトも作れた!
山本真一のアイコン画像山本真一

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

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

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