飲食店経営お役立ち情報

【飲食店向け】 Googleサイトで無料ホームページを作る方法

Googleサイトの作り方

こんにちは!カメラマンの長谷川敬介です。

飲食店の方で、

カメさん
カメさん
無料でGoogleホームページを作れるらしいんだけど・・

ウサギさん
ウサギさん
実際どうやって作るのかわからない・・

思っていませんか?

この記事では、ゼロからGoogleサイトでホームページを作る方法をお伝えします。

Googleサイトってなに?

Googleサイトは、Googleが提供している無料ホームページ作成サービスです。

ウェブ制作の知識がない方でも簡単にサイトを作ることができます。

準備するもの

Googleサイトを制作するときに必要なものは、「パソコン」「Googleのアカウント」です。

また制作したサイトは、ほとんどのブラウザで見ることができますが、Googleサイトを編集する場合は、次のブラウザが必要です。

  • Chrome のバージョン 24 以降
  • Firefox の最新バージョン

お手持ちのパソコンに、上記のブラウザが入っていない場合は、まず「Chrome」か「Firefox」ブラウザをインストールしてから編集を行うようにしてください。

>>Chromeをダウンロード

>>Firefoxをダウンロード

Googleサイトの作り方

ではここから実際にGoogleサイトを作ってみましょう。

今回は、喫茶店を例にして作成してします。

Googleサイトで作成した完成ページ

>>西荻窪の喫茶店

全体の大まかな流れは以下の手順です。

  1. Googleにログイン後、Googleサイトにアクセス
  2. サイトのテーマを選択
  3. サイトトップの編集
  4. サイト全体のデザイン
  5. トップページ以外のページの作成
  6. ホームページの公開

1, Googleにログイン後、Googleサイトにアクセス

Googleにログインした状態で、Googleサイトに移動します。

>>Googleサイト

Googleサイトに行くと、まず初めに「Googleサイトへようこそ」の表示が出ます。

「OK」をクリックして先に進みます。

Googleサイトの作り方

すると「最初のサイトを作成してみましょう」と表示が出ます。

ページ右下にある「+」をクリックしてサイト編集のページに移動します。

Googleサイトの作り方

2, サイトのテーマを選択

編集画面が表示されたら、まずサイトのテーマを選択しましょう。

画面右にある「テーマ」をクリックします。

初期設定では「シンプル」が選択されていますが、他にもいくつかテーマがあるので好きなテーマを選びます。

例として今回は「Vision」を選択します。

Googleサイトの作り方

3, サイトトップの編集

次はサイトのトップを編集します。

まずはテキストを入力していきましょう。

入力する場所は3箇所。

Googleサイトの作り方

①は、管理用の名前です。ファイル名みたいなものなので、自分がわかりやすければ何でもOKです

②は、サイト名です。お店の名前などを入力しましょう。

③は、ページのタイトルを入力します。または、お店のキャッチコピーを入力するのもいいと思います。

次はトップの画像を入れ替えます。

画像変更をクリックして、「アップロード」か「画像の選択」から写真を入れ替えます。

Googleサイトの作り方

アップロードを選択するとGoogleフォトに保存されている写真を選択することができます。

4, サイト全体のデザイン

次は、トップ以外も編集していきましょう。

今回は

  • メニュー
  • お店の地図
  • お店の情報
  • お問い合わせ

を作ってみます。

まず、画面右にある「挿入」からお好きな「レイアウト」を選択します。

Googleサイトの作り方

するとページ内に選択したレイアウトが表示されます。

Googleサイトの作り方

空白になっている部分に、写真とテキストを入力します。

Googleサイトの作り方

次はお店の地図を入れます。

画面右にあるメニューから「地図」をクリックします。

Googleサイトの作り方

「地図の選択」のポップアップが表示されるのでお店の住所を入力して選択をクリック。

Googleサイトの作り方

するとページに地図が表示されます。

Googleサイトの作り方

ヒヨコさん
ヒヨコさん
ドラックで、大きさや位置を調整できます

Googleサイトの作り方

次はお店の情報を入力します。

画面右にあるメニューから「テキスト ボックス」を選択します。

Googleサイトの作り方

するとテキストボックスが追加されるので、こちらにお店の情報を入力していきます。

Googleサイトの作り方 Googleサイトの作り方

ヒヨコさん
ヒヨコさん
テキストもドラッグで位置を移動できます!

最後に、お問い合わせフォームを追加します。

あらかじめGoogleフォームで作成しておく必要があります。

>>Googleフォーム

Googleフォームを作成したら、画面右にあるメニューから、「フォーム」を選択します。

Googleサイトの作り方

するとあらかじめ作っておいたGoogleフォームが表示されるので選択します。

Googleサイトの作り方

ヒヨコさん
ヒヨコさん
これでトップページが完成です!

Googleサイトの作り方

5, トップページ以外のページの作成

次は、トップページ以外のページも作成してみましょう。

今回は「メニューページ」を作ります。

画面右上にあるメニューから「ページ」をクリックし、「+」を選択します。

Googleサイトの作り方

すると、新しく作るページの名前入力を求められるので、「メニュー」と記入して「完了」をクリックします。

Googleサイトの作り方

後は、今までとやり方は同じです。

画面右にある「挿入」から「レイアウト」を選択して、お好きなレイアウトを配置します。

Googleサイトの作り方

写真とテキストを当て込めば、完成です!

Googleサイトの作り方

6, ホームページの公開

ページがひと通りできたら、画面右上の公開をクリックします。

Googleサイトの作り方

すると無事にサイトが公開されます。

デモサイト>>西荻窪の喫茶店

まとめ

以上をGoogleでホームページを作る方法をお伝えしました。

無事にできたでしょうか?

企業のメインサイトとして使うのは少し難しいですが、簡易的なサイトを気軽に作れるのが魅力です。

(外部サービスを利用すれば Googleフォームももう少し見栄え良くなると思いますw)

ABOUT ME
長谷川敬介
プロカメラマン。カメラ歴は12年。 料理写真がメインで、200店舗以上撮影。 「写真の楽しさを広めたい」をモットーにブログを書いてます。 記事を読んでわからないことがあったらお気軽にコメントください。その際は「カメラ歴」「使用カメラ」「パソコン(Win・Mac)」など教えて頂けると嬉しいです。
写真がもっと楽しくなる

写真編集ソフトで調整してると

  • この明るさの方が良いかな
  • あの時、こう撮ればよかったかな
  • 次は、こうしてみよう

って考える時間が増えるので、写真上達に繋がりますよ!(&楽しい)

おすすめは以下の3つ。

①Luminar 4
Luminar 4は、AI(人工知能)を搭載されていて、空や人物の顔のレタッチが簡単にできます。(買い切り)
Luminar 4(ルミナー)徹底レビュー!5つの魅力と新機能

Photoshop elements
機能がまとまっていて、初心者でもわかりやすい操作画面になってます。(買い切り)
Photoshop Elementsの使い方 

Adobe フォトプラン
「Photosho」と「Lightroom」の2つの写真編集ソフトが使えるプランです。どちらも多機能。(サブスクリプション)
【初心者向け】Photoshopでできること:事例9コ 

比較記事

【目的別】プロが選ぶ!おすすめの写真編集ソフト3選

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

プロが選ぶ!おすすめの写真編集ソフト3選
記事を見る
プロが選ぶ!おすすめの写真編集ソフト3選
記事を見る