Life is colourful.

Inspire yourself

【格安で簡単に自作!】グーペで作ったホームページの紹介と作り方(飲食店・レストラン編)

f:id:mtasam:20170328155306j:plain

初心者・素人でも簡単にホームページを作る方法を解説する。

レストラン・カフェなどの飲食店、個人経営のショップや美容院など小規模ビジネスを運営している人などが対象である。

これまでにもホームページの作り方について何度か書いているが、今回はホームページ作成サービス『グーペ』を使ってビジネスサイトを自作する方法を紹介する。

月に1,000円程度で、個人ビジネスでは十分な品質のホームページを持てるので、あまりコストをかけられない人におすすめできる。

ホームページは完全無料でも作れるが、ビジネス用途なら少し投資したほうがいいので、ここでは有料のサービスを使った方法を紹介する(15日間は無料)。

今回のサンプルホームページ

まず今回作成したサンプルのホームページを掲載しておく(下図:スマホ表示だけ)。テンプレートが用意されているので、これくらいなら専門知識なしで1時間もあれば作成できる。

f:id:mtasam:20170326141207j:plain

実物を見たい方は、こちらで公開しているので覗いてみてほしい。

デモLife is colourful. on Goope

ここでは最小限のパーツだけ作ったので、ホームページとしてはまだまだ素っ気ないけれど、ここから装飾や写真を加えたりページを増やしていけば、それなりに整ったビジネスサイトが完成する。

 

 

『グーペ』でホームページ作成

今回のサンプルは『グーペ』というホームページ作成サービスを使っている。以降、グーペを使ったホームページ作成手順を説明していく。

登録&ログイン

https://goope.jp

f:id:mtasam:20170302224445j:plain

グーペは最初の15日間無料なので、まずはお試し感覚で始められる。文字入力と画像のアップロードができれば、作成自体は初心者でも1、2日あれば十分に完成する。ホームページ作成に必要なものはビジネスの情報と写真だけ。

無料期間を利用してしばらく運営してみよう。

公式サイトこんなに簡単!店舗向けホームページがすぐ始められる「グーペ」

● ● ●

ログイン後の管理画面は下図のような感じ。かなり個人ビジネスに特化した仕様となっている分、一般的なCMSとは違い、左の操作メニューが具体的で、どのページを編集するための項目なのかわかりやすくなっている。

f:id:mtasam:20170325111802j:plain

 

 

デザインを選ぶ

デザインテンプレートは現時点で50種類ほどから選べる。(左のメニュー「デザイン設定」を選択)

レイアウト・カラーバリエーションまで入れると4,000種以上にもなる。デザインテンプレートは、それぞれターゲットとしている業種が設定されているので、自分のビジネスに適したデザインを選べる。

f:id:mtasam:20170325112058j:plain

有料のデザインもあるが、無料のデザインでもそれなりにカッコよく作れるので、ここでは無料のテンプレートでサンプルを作る。

無料の中でクセが少なくて、使いやすそうなデザインテンプレートは、

Oneplate / Showcase / Aroma / Slider / Salon / Chic / Business

あたり。

参考デザインテンプレート|グーペ

 

 

トップページを作る

グーペのホームページはトップページをしっかり作り込めば、カッコよく仕上がる。またトップページを作れば連動して他のページも作成される。

管理画面の左メニューに「トップページの設定」があるので、まずはここからスタート。

①スライドショーの設定

f:id:mtasam:20170325120332j:plain

スライドショーとは、トップページ上部の大きな写真の部分のこと。ここの写真が読者の第一印象を左右するので、ここに素敵な写真を配置することがとても大事。(間違っても素人がスマホで撮った低品質な写真を置いてはいけない。)

画像は「トップページ設定」-「スライドショー」から簡単にアップロードでき、スライドショーで表示する画像の順番、スピード、サイズなどを直感的に設定可能。

f:id:mtasam:20170325114212j:plain

 

②キャッチコピー&メッセージの入力

次にトップページに掲載するキャッチコピーや紹介文を入力する。

f:id:mtasam:20170325122943j:plain

 

「トップページ設定」-「ウェルカムメッセージ」から、下の画面のようにコピーや文章を入力すると、そのままホームページ上に反映される。文字のサイズ、色、左寄せ/右寄せなど装飾も色々できるので自由度は高い。

f:id:mtasam:20170325121038j:plain

文字だけでなく画像も配置できるので、料理メニューへのリンクバナーを貼ることもできる。

ココら辺はグーペの使い方に慣れてきてから、後で少しずつカスタマイズしていけばよい。

デザインテンプレートを使うと自由度が低いように思えるが、少し工夫すればオリジナリティを出すことは難しくないので、色々と試してみよう。

 

③ナビメニューの設定

ナビメニューはホームページ上部に表示されるメニュー項目のこと。スマホ表示では右上に「  」でアイコン表示されている。

f:id:mtasam:20170326095701j:plain

 

ナビメニューは「ナビゲーション設定」から設定できる。並び順の変更や、項目名の編集、削除も簡単にできる。

f:id:mtasam:20170326100302j:plain

一般的には個人経営のショップやレストランなら、以下の項目があれば事足りる。もちろん、季節によってキャンペーンや特集ページを作ったり、オリジナルの情報を発信していくことも可能だ。

  • トップページ
  • メニュー/サービス(料金表)
  • お知らせ
  • アクセス
  • お問い合わせ

 

④店舗情報の入力

次に、自分のビジネスの基本情報(住所や設備・サービス内容など)を入力しておこう。「店舗情報設定」から設定。

店舗情報を入力しておくと、住所から判断して自動的にGoogleマップを表示してくれる。

f:id:mtasam:20170326101657j:plain

 

料理メニューやお知らせページの設定

トップページが完成したら、他のページも作成しよう。

といっても、お問い合わせページや店舗情報、アクセスページはトップページで入力した情報を元に自動で作成されているので、自分で作るのは「料理メニュー」や「お知らせ」のページだけである。

f:id:mtasam:20170326102823j:plain

 

料理のメニューやお知らせのページなどは、値段や写真を入れ替えて簡単に操作できるので、以降も自分自身で更新していくことができる。

お知らせページは「お知らせ更新」から、メニューページは「メニュー更新」から情報を入力(下図)することによって、自動でホームページに反映される。料理の画像もアプロードするだけで、自動配置されるのでレイアウトを考える必要はない。

料理やドリンクメニューのPDFもアップロードできる。

f:id:mtasam:20170326102837j:plain

 

 

その他のページ(フリーページ)と制作事例

グーペで予め用意されているページは以下の10ページ。

トップ/メニュー/お知らせ/アクセス/店舗情報/お問い合わせ/クーポン/カレンダー/スタッフ紹介/求人ページ

これらのページは、レイアウト、デザインが予め規定されている。

上記以外のページを作りたい場合は「フリーページ更新」から自分で作成することになる。文字の大きさ・色・配置、画像の位置など全て自分でカスタマイズできるので、自分の好きなように設計していくとよい。

 

 

ホームページを素敵にするためのコツ

ホームページ作成ツールを使ってホームページを作る場合は、デザインテンプレートがあるので初心者でもそれなりのモノは作れる。

ただ、よりキレイなホームページを作るにはコツがあるのでポイントを紹介しておこう。

写真

ホームページ内で使う商品や店舗の写真は高品質な画像を使おう。できればプロに頼んで撮影してもらうのが好ましい。素人がスマホで撮った手ブレの写真や、暗い画像を使うとマイナスにしかならない。

下の画像、どちらが美味しそうに見えるだろう?(どちらか片方が素人が撮った写真)

f:id:mtasam:20170326121859j:plain

ロゴ

ロゴは自分のビジネスの旗印。ホームページでも一番初めに目に入るので、デザイン性が高く印象的なロゴがあると、ユーザーが感じるHPの雰囲気や持つイメージも大きく違ってくる。

ロゴははじめに一度作っておけば、名刺や看板、封筒、ショップカードなどに使え、「あ、あのマーク、あそこの!」と、ユーザーも覚えやすいく、費用対効果も大きいので、適当に自作するよりプロに作ってもらうことをおすすめする。「ココナラ 」を使えば少額で依頼できるし、ネット上でプロのデザイナーのブログを探して作ってもらうのもいい。

参考ロゴデザインの作り方と重要性をデザイナーが徹底解説します。 - OMGmag

↑こういう人は良心的に対応してくれる(ハズ)。

少しHTML/CSSを勉強する

HTML/CSSとは、ホームページを作るための言語。HTML/CSSが分かれば自分で配色、レイアウト、簡単なアニメーションなどを自由にカスタマイズできる。

グーペでもHTML/CSSの編集画面が用意されているので、完全オリジナルのホームページを作成することができる。

HTML/CSSが少しわかるだけで全然違うので、興味のある人は「ドットインストール」などで勉強してみよう。HTML/CSSが理解できれば、下のようなホームページも自分で作れるようになる。

参考http://lifeiscolourful.web.fc2.com(※FC2の広告がでます)

f:id:mtasam:20160924175303j:plain

関連記事Web初心者でも高品質なホームページを数時間で簡単に作る方法とその手順

 

最後に

グーペは小規模ビジネスのホームページ作成に最適なサービスなので、ホームページほしいなぁと考えているビジネスオーナーは一度お試しで使ってみるのもいいだろう。

公式サイトこんなに簡単!店舗向けホームページがすぐ始められる「グーペ」

ホームページ作成の関連記事

やはり完全無料がいいという人は、こちらの記事を参考に。広告がでたりページ数が制限されたりと制約はあるものの、無料でもかっこいいホームページは作れる。

関連素人でも簡単に一流のホームページが作れる無料Webサイト作成サービス8選

また、ホームページを作るにも色んな手段があるので、まずはホームページ作成方法の比較をしたいという人は、こちら記事も参考にどうぞ。

関連Webサイト・ホームページの作り方ー【比較】プロに任せる?ソフトで簡単作成?WordPressで自作?