デザイナー目線。モノ・コト紹介するサイト

【簡単ホームページ作成】初心者はグーペが最適!制作例とJimdo比較付き

デザインコラム

A子
A子

初心者でも簡単にホームページが作れるサービス、教えてください!

という方向けの内容です。

このページの内容

  • グーペって何?
  • グーペ vs Jimdoの比較
  • グーペの使い方&制作実例

いやー、すばらしいですね。今やWebの知識ゼロでもこんなホームページがサクッと作れてしまう時代なんですから。

今回は初心者におすすめの国産ホームページ作成サービス「グーペ」について、よく比較されやすいJimdoとも比べながらご紹介していきたいと思います。

講師
講師

ページ後半ではグーペで実際にホームページを作りながら解説しますので、ぜひ参考にしてみてください。

スポンサードサーチ

ホームページ作成初心者におすすめの「グーペ」とは?

グーペ

グーペは、知識ゼロのホームページ初心者でも難なく自分のサイトが作れるホームページ作成サービスです。
minneロリポップなど、様々な有名サービスを手がける国内の会社「GMOペパボ株式会社」によって開発されました。

一般的にホームページを作成する場合は以下のような知識が必要です。

  • ホームページの基礎知識
  • PhotoshopやIllustratorなどのデザインソフト
  • HTML/CSSで構築する知識
  • JavaScript/jQueryなどのプログラミング知識

しかしグーペではこれらのスキルがなくとも、こんなサイトがサクッと作れちゃうのです。(このあと制作実例で解説します)

簡単な3ステップ

  1. 登録を済ませたら、
  2. テンプレート一覧から好きなものを選び、
  3. あとはそれぞれのページの内容を自分の内容に書き換えるのみ。

ざっくり言うとこんなイメージで作れます。

料金

グーペの料金は以下の通り3種類あります。

グーペの料金プラン

  1. 通常プラン:
    月額1,000円(1年12,000円)
  2. DXプラン:
    月額1,500円(1年12,000円)
  3. ビジネスプラン:
    月額3,500円(1年36,000円)

月額にすると通常プランが最も安く見えますが、1年契約では通常プラン・DXプランともに同一料金となります。
通常プランとDXプランでは以下の通り機能的な違いが大きいため、契約するなら間違いなくDXプランがお得です。

グーペ以外にもホームページ作成サービスは数多く存在

初心者向けのホームページ作成サービスは以下の通り、とにかく色々とサービスが存在します。

おそらく聞いたことがあるのはWIX(ウィックス)ですよね。海外発の無料ホームページ作成サービスとしてYouTubeなどでも宣伝しまくっているので。
ただ、日本人の我々に比較的なじみあるサービスとして親しまれてきたのはこの中ではJimdoです。(こちらも無料)

Jimdoも実はドイツで開発された海外産ですが、国内ではその他サービスよりもダントツで多く利用された実績があるためこちらの利用を検討される方が多くいらっしゃるようです。

WIXもJimdoも無料プランでは一番目立つところに広告表示

とはいえ、WIXJimdoも無料で使えるのに、なぜ有料のグーペと比較?と思われた方もいらっしゃるかもしれませんが、WIXもJimdoも、無料のサービスではどちらも一番上の目立つところにそれぞれの宣伝が入ってしまうのです。
※一般的にどのサービスも、無料で使用するプランは各社宣伝が入ります。

さすがに自社ホームページに宣伝が入ってしまうと、とたんにチープな印象がでてしまうため、自社ブランドを大切にされるなら有料プランがまずおすすめです。
ということで、有料プラン同士の比較が前提となります。

このあとは、国内でのシェアが高いJimdoと、今急激に勢力を伸ばしつつあるグーペについて比較してみたいと思います。

スポンサードサーチ

グーペ vs Jimdo比較!ホームページ初心者はどちらがおすすめ?

色々と細かく比較していこうと思ったのですが、グーペとJimdoでは明らかな違いがあります。はじめにお伝えしてしまうと利用者のイメージとしては以下のとおりです。

  • Jimdo:ベテランで手慣れている方
  • グーペ:Web知識ゼロの初心者の方

つまり初心者には間違いなくグーペがおすすめです。その理由について、Jimdoとの比較も含めて解説します。

Jimdoの操作性

たとえばJimdoでは、登録後の画面で選んだテンプレートがそのまま表示されるのですが、正直、そのあと何をどう進めていけばいいのか戸惑うのです。

ロゴにマウスを重ねると何やら枠線がでてきます。「ああ、編集できるのね」と何となく分かるのですが、そのあとクリックしてみると

・・・もう色々省略されすぎてて余計戸惑います。この段階で初心者を締め出しているのは間違いないです。なぜなら

このアイコン、初心者の方分かりますか?

この点々、何ですか?

このアイコン、どういう意味ですか?

ここで私はブラウザの「閉じる」ボタンを危うく押しそうになりましたが、もっといいところを探すべく、左上の「管理メニュー」をクリックし、その中の「デザイン → レイアウト」を押しました。

全部英語のテンプレートにくじけそうになりながら、いずれかのテンプレートボタンを押すと・・・

いろいろテンプレートボタン押してるはずなのに、どれも同じに見える・・・

もちろん、色々登録すればもっと違う見え方になるとは思いますが。
とはいえテンプレートなんだからとりあえずダミー画像でも入れといてほしいです。

慣れると色々とレイアウトも工夫できて使いやすいということなのかもしれませんが、本当の初心者にはJimdoはなかなか厳しい印象です。

グーペの操作性

Goope

対して、グーペの操作性について見ていきます。

登録後の画面はJimdoとは異なりだいぶ複雑です。ですが、左のメニューを見ると何を設定できるかはなんとなく分かります。

もう少し分かりやすいように以下補足してみました。

たとえば左メニューの「店舗情報」をクリックすると、店舗に関する情報があらかじめ登録されており、何をすれば良いかは一目瞭然です。

そしてタブらしきものが見えて「表示順並び替え」をクリックすると

「表示・非表示」の選択が分かりやすいですし、黄色いボタンは上下入れ替えができるのがこちらもなんとなく分かります。(クリックしたまま上下移動可能)

その他にも、左メニューの「デザイン」をクリックし、タブにある「ダウンロード」をクリックするとテンプレート一覧が表示されます。

そして気になるテンプレートをクリックするとプレビュー画面が表示され、左側にはその他のテンプレートもその場で確認ができるようになっています。

テンプレートのデザインはJimdoではどれも同じに見えましたが、グーペはちゃんとそれぞれがしっかりデザインされていて違いが出ています。

この段階で、初心者にとっては色々とグーペが圧勝していると確信しました。

Jimdo vs グーペ!その他の機能比較

各機能比較

サービス Jimdo グーペ
HTML/CSSカスタマイズ
画面上編集 ×
ブログ機能
ページ階層 ×
カレンダー機能 ×
予約フォーム機能 ×
お問い合わせ機能
クーポン作成 ×
商品メニュー ×
店舗紹介 ×
スタッフ紹介 ×
メールマガジン ×
アクセス解析
SEO対策
表示スピード ×
スマホ対応
テンプレート 無料 一部有料(1万円)
料金(1年) 11,340円(PRO) 12,000円(DXプラン)

いろいろと違いはありますが、Jimdoは基本的にまっさらな状態から第3階層まで色々と細かい作り込みが出来る半面、ゼロから自分で作らなければいけないわずらわしさがあります。

一方のグーペはたとえば「店舗紹介」など、一般的な国内サイトで表現されているページがあらかじめ登録されており、文章を書き換えるのみで完成します。足りない情報やいらない情報の追加削除も超カンタンです。

グーペが初心者に優しいのは特にこの「用意されたページ」がたくさんある点です。

情報を書き換えればすぐにページは完成しますし、もちろんまっさらな状態から手作りできるフリーページもあります。ただし、フリーページでは第3階層までは作れない点が唯一デメリットです。(メニューなどは第3階層まで表示されます)

ということで始めにお伝えしたように、利用者のイメージとしては以下のとおりです。

利用者のイメージ

  • Jimdo:ベテランで手慣れている方
  • グーペ:Web知識ゼロの初心者の方

このあとは、実際にホームページを一つ作ってみたいと思います。
同時進行で進めたい方はここで一旦登録いただくことをおすすめします。

  • グーペ ※15日間、無料でお試し可能

スポンサードサーチ

グーペの使い方&制作実例

ここからはグーペでホームページを一つ実際に作ってみたいと思います。
さくっと解説していきますので、不明点などはグーペのマニュアルをご参照ください。

全体的な流れとしては以下のとおりです。

全体的な流れ

  1. テンプレートを設定
  2. ヘッダーのロゴ周辺を設定
  3. トップページを設定
  4. サイドメニュー内の各ページ内容を設定

画面で見るとこんな順番イメージです。

登録を完了した後の管理画面からスタートです。

ひとまず画面右上の「ホームページを表示」ボタンを押して現段階のホームページを確認してみましょう。

この内容を色々と変更していきます。
※画像は一部既に編集済みですが、まっさらな状態と見てください。

テンプレートを設定

再び管理画面へと戻ります。
左メニューの「デザイン」を開くと「現在適用中のデザイン」が表示されます。
その他のテンプレートを見つけるために、タブの「ダウンロード」をクリックします。

気になるテンプレートをクリックするとプレビュー画面が表示されます。
気に入ったテンプレートがあれば右上の「このテンプレートにする」をクリックし、ボタンが「デザイン一覧画面へ」と変わりますので更にクリックします。

ダウンロードしたテンプレートの「このデザインに変更」をクリック。すると「現在適用中のデザイン」に反映されます。

画面右上の「ホームページ表示」ボタンを押して実際のホームページを確認しましょう。

ダウンロードしたテンプレートに変更されました。

ヘッダーのロゴ周辺を設定

管理画面へと戻ります。
左メニューの「基本設定」をクリック。「タイトル」と「説明文」を編集し、「更新」ボタンを押します。するとロゴ周辺の情報が書き換えられます。

次にタブの「ロゴ画像」をクリック。「画像を使用する」をクリックし、「画像の選択」から自分のPCに入っているロゴデータを指定します。

※ロゴ画像はあらかじめ自社ロゴのデータを用意しておく必要があります。データ形式は.jpg .gif .pngです。

もし背景色ありのテンプレートを選択した場合は、ロゴの周りが透明になる.png形式にしましょう。もしデータを作るのが困難な場合はこのサイトを使って背景を透明にする方法もあります。

選択したロゴの画像サイズが気になる場合はここで変更可能です。

完了した後は「更新」ボタンをクリック。
一応画面右上の「ホームページを表示」ボタンを押して実際のホームページを確認しましょう。登録したロゴが反映されているのが確認できますね。

トップページを設定

トップページのその他の設定へと進みます。
左メニューの「トップページ」をクリックし、スライドショーの中にある画像の「編集」ボタンを押します。開いた画面上で「選択」をクリックし、自分のPCに入っているスライドショーで用いる画像データを指定します。

※スライドショーの画像はあらかじめ自分で画像を用意しておく必要があります。自分で撮影した写真や素材サイトから用意しておきましょう。
画像切り抜きなどは無料オンライン画像切り抜きツール「Fotojet」で編集することができます。

その他にスライドしたい画像がある場合は、「+スライドショー画像を登録する」から同じように登録します。

次に画面下へスクールし、文章を編集します。フォントサイズなども自由に変更可能です。

できたら「ウェルカムメッセージ更新」ボタンをクリックします。

これでトップページは完成です。
一旦、「ホームページを表示」ボタンを押して実際のホームページを確認しましょう。
スライド画像とその下の文章が、編集した内容に反映されているのが確認できるはずです。

サイドメニュー内の各ページ内容を設定

その他、サイドメニュー内の各ページを編集していきます。

お知らせ

左メニューの「お知らせ」をクリック。この画面でトップページにあるInformationの編集ができます。登録画面にしたがって、お知らせしたい内容を登録します。

ちなみに一番最初に入っているサンプルを削除するためにタブの「登録リスト」をクリック。チェックを入れて削除ボタンを押せば削除可能です。

フォトアルバム

もし写真を色々とお持ちの場合は、このページで公開することが可能です。
必要ない場合は、一旦そのままにしておきます。

メニュー

飲食店などのメニューがある場合はこのページで好きな形でメニューを投稿可能です。
または飲食店ではなく「サービス」を販売している場合は、このページタイトルの「メニュー」の文言を後ほど好きな文字に変更可能です。一旦サービス内容を登録していきましょう。

カレンダー

定休日やイベントなどの設定が自由にできます。必要ない場合は一旦そのままにしておきます。

クーポン

クーポンの設定が自由にできます。必要ない場合は一旦そのままにしておきます。

ナビゲーション

ホームページで表示されているナビゲーションの設定を行います。ページ名の変更、また、必要のないページなどはここで非表示設定ができます。
※先程の「メニュー」の文言を「サービス」に変更したい場合は、この画面で変更可能です。

店舗情報

店舗情報の設定ができます。必要がない項目はタブの「表示順並び替え」から非表示設定が可能です。また、店舗情報自体が必要ない場合は先程のナビゲーションで非表示可能です。

フリーページ

もしこれまで設定したページでは足りないページを作りたい場合は左メニューの「フリーページ」から自由ページの追加が可能です。主な設定方法はこれまで同様です。

ひとまずここまでの設定でおおよそページは完成しました。
画面右上の「ホームページを表示」ボタンを押して実際のホームページを確認しましょう。各ページいい感じに仕上がっていると思います。

また、デザインの変更もいつでも自由に設定できますので色々と試してみてください。
さらにカスタマイズしたい場合はHTML/CSSの基礎知識を習得することでより自由な表現が可能です。

まとめ

グーペ

いかがでしたでしょうか?
複雑な知識を要するホームページ作成ですが、グーペを利用することでWebの知識無しでこんなに簡単にホームページが作れてしまいます。

しかもこういったホームページ作成を制作会社に依頼するとおよそ20万円以上はかかってしまううえ、イベント情報などの更新可能な仕組みとする場合は全体を通して40〜50万ほど必要な場合が一般的です。

それが年間12,000円で持ててしまうのですから、自社サイトを安く作りたい初心者の方にとってはかなりお得なサービスです。

  • 昔作ってもらったホームページを安くリニューアルしたい方
  • 独立したてでホームページにコストをかけられない方

こんな方は、ぜひグーペを試してみてください。
WIXJimdoなどの海外サービスよりも断然使いやすいですよ!

講師
講師

このページを参考に、ぜひ素敵なホームページを作ってみてくださいね!

以上!グーペについての解説でした。
このページが参考になりましたら嬉しいです。

  • グーペ
    ※初心者に最もおすすめなホームページ作成サービス