ホームページ作成サービス「グーペ」でどんなページが作れるのか

グーペのアイキャッチ

ここ数年、簡単を売りにした、WixやJimdoなどのホームページ作成サービスが盛り上がっています。

今回紹介するグーペ(Goope)もそのなかのひとつです。
特徴やカスタマイズについて調査しました。

グーペの機能・特徴について

プランは3つ、無料プランはなく、利用料金は月額1,000円~3,500円+税。
15日間無料のお試し期間があります。
参考)グーペのプラン・料金

使い方はレンタルブログを設定するような感じで、項目を入れていけば完成です。
直感的に理解できる方もいるでしょうし、マニュアルを読めば何とかなると思います。
パソコンに不慣れな方でも簡単に作れるという点が一番の特徴になります。

グーペのテンプレート

既存のテンプレートは36種類、うち無料21、有料15(2019年5月現在)。
管理画面上でカラー変更が可能なテンプレートもあります。

グーペテンプレート

種類は多くありませんが、気に入ったのが一つあれば問題ないでしょう。
グーペのテンプレートはあらかじめ確認できます。

実際に使っている方のサイトも参考になります。
【グーペホームページ大賞2018】ノミネート15選を発表! | ホームページ作成お役立ち記事

グーペの機能

用意されている機能は、(料理の)メニュー、求人、スタッフ紹介、カレンダー、お問い合わせ、クーポン、メルマガなど、パッと思いつくところは揃っています。

これらに加えて、日々更新できる、お知らせとフォトアルバム、使い途自由なフリーページがあります。

上位プランには、ディスク容量アップ、アクセス解析、pdfアップロードなどが付いてきます。
有料オプションながら、独自ドメインと常時SSLもあり、営業用サイトとして利用する際には、とても助かります。

プランと使える機能は要確認です。
参考)料金案内 - ホームページ作成・ホームページ制作サービス「グーペ」

外部サービスとの連携

GMOペパボ姉妹サービスで、Jugemブログ(ブログ)、カラーミーリピート(定期購入)、カラーミーショップ(ショッピングカート)があります。

グーペユーザー限定で初年度に限りカラーミーショップのスモールプランが月額100円で利用できます。

カラーミーショップの機能「どこでもカラーミー」を使うことで、グーペで作成したページにショッピングカートを設置することも可能です。
こういう連携があらかじめ考慮されているのはグーペの利点です。

グーペのカスタマイズについて(さらっと)

グーペの使い方についてはマニュアルを参照ください。

参考1)Goopeかんたん更新マニュアル
参考2)Goopeマニュアル

管理画面>デザイン設定「編集」でHTML・CSS編集が可能です。HTML・CSSでデザインできることは、すべてカスタマイズ可能です。

また、JavaScriptで一部機能を書いているところもあります。グーペにはJavaScriptファイルをアップする場所はありませんので、head部に書くことになります(レンタルサーバーがあればそこに)。

グーペのカスタマイズのキモは、独自タグとブロックの考え方です。
ブロックにはトップページ用のブロックと、各ページ用のブロックがあり、トップページ用ブロックはブロック内を繰り返しループして(しないのもありますが)、HTMLや独自タグの中身を書いてページを構築します。

下例は<!-- BEGIN navi_list --> <!-- END navi_list -->ブロック内をループして、独自タグ{~}を処理して、HTMLを書いている部分です(ただの注釈行ではないということ)。
下部には各ページブロックがあり、そこにHTMLを追加するとデザイン変更が可能です。

このあたりはグーペのサーバー側が勝手に処理する部分なので、深く考える必要はありません。
他のレンタルブログも、HTMLでカスタマイズできる場合は似たような作りなので、いじったことがある方はイメージが湧くと思います。

Goope HTML

<body id="{body_id}">

(中略)

<!-- BEGIN navi_list -->
<li class="menu_list">
  <a href="{navi_url}" {navi_target} class="menu_list_link {navi_class}">
    {navi_title}
  </a>
  <div class="menu_sub_wrap">
    {navi_sub}
  </div>
</li>
<!-- END navi_list -->

もう一点。HTML上部のbody要素に

<body id="{body_id}">

と書いてあります。id属性名は各ページごとに、top、info、photoと付きます。
各ページブロック外(たとえばheader、footer部分)でしたら、id属性名を見てCSSを変更したり、HTMLを差し込んだりすれば、柔軟にカスタマイズできると思います。この点は実際やってみると分かると思います。

init.jsで処理している部分も多いので、カスタマイズ前には一度目を通した方がいいです。

カラーミーショップとは違って、Smarty関数は動きません。文字列変換ができないので、表示の細かい部分は手を入れられません。

グーペを実際使ってみたまとめ

他サービスに比べ、簡単でとっつきやすいホームページ作成サービスです。

ご自身で更新したいけど、パソコン操作が苦手という方におススメだと思います(初心者でも簡単)。
機能的にもユニークで、サービス提供するターゲットを絞っている印象です(お店向け機能が充実)。

HTML・CSSが理解できるようなら、カスタマイズ性はまぁまぁ高いです。
ただし、カスタマイズしすぎると簡単に更新できなくなりますので、そういう意味での制約はあります。
固定でHTML埋め込みか、自分で更新できるように機能を残すかは、十分な話し合いと割り切りが必要。

既存機能以外で何かを追加しようとするとかなり難しいです。グーペでやる意味はあまりありません。

naeco.jpでは

  • 「ネットに不慣れで、ちょっと無理」とお考えの方や、自分で設定やカスタマイズしたいけど、困ったときの相談相手がみつからない方も積極的にサポートしています。
  • ご契約前で当店取次でグーペをお申込みいただいた場合は、1時間程度を目安に無料でサポートいたします。下記リンクからお申し込みください。

《取次代理店 naeco.jp 専用》お申込みフォームはこちら