Googleサイト 使い方 ガイド サーバ費用も 無料 ホームページ 作成 ツール

Googleサイト 使い方 を 解説します。Googleサイトは、サーバ費用も 無料 の 無料 ホームページ 作成 ツール です。Googleが提供するサービスなので、セキュリティも安心、安全のサービスとなっています。

  • コストをかけてまで、イベントページや行事の結果発表などのページを作りたくない!だけど、ホームページでの発表はしたい!!
  • 企業サイト作っておきたいけど、今は、お金かけれないから、とりあえずの企業ホームページを、作っておきたい

といった要望に対応できるのが、Googleサイト です。

Googleサイト は G Suiteを利用すれば、閲覧制限をかけれるので、社内の情報共有サイト、社内wikiのような活用方法もできます。

社内情報の共有にも、おすすめです!

この記事では、Googleサイトの使い方を解説して、より、身近に、簡単に、Googleサービスを活用したホームページ制作について、ご紹介していきます。

Googleサイト を知らないweb制作会社の方、エンジニアの方、コーダー、webデザイナー、イラストレーター、マーケティング担当者、広報、web制作チーム、中小企業の経営者、経営企画室の方に、ぜひ、Googleサイト 使い方 についての知識を深めてもらい、ちょっとした活用などを進めてもらえれば!と思っています。

Googleサイトとは

参考:Google サイト ヘルプ
Google サイトの使い方
https://support.google.com/sites/answer/6372878?hl=ja

Googleサイトとは、無料で、Googleのサーバ上に、ホームページを制作できるサービスです。Gmail、Googleカレンダー、GoogleマップといったGoogleのサービスとの連携がしやすいのが、最大の特徴の1つです。

Googleサイトは、Google sites と表記されることもあります。Google サイトは、CMSとしては、マウスの操作で直感的に操作して、ホームページを作成できます。googleサイトも、ノーコードツールですね。

Googleサイトは、広告が表示されないサービスなので、そこも、ほかの無料ホームページ制作ツールと異なります。

そして、GoogleサイトはGoogleのアカウントがあれば誰でも無料で制作でき、Gsuiteなどを使わなければ、閲覧者も絞らずに、公開できます。

スマホにも対応しているレスポンシブ対応デザイン。スマートフォン、タブレット、PCなど閲覧するデバイスに応じて、画面の幅を変えてくれるので、多くのユーザーの環境に適合したホームページが作れます。

Googleサイト 使い方

さっそく、Googleサイト 使い方 を解説していきます。

Googleサイト 使って、ホームページを作る大きな流れとしては、

  1. Googleアカウント作成
  2. ログイン
  3. 管理画面操作で、ホームページ制作
  4. ホームページ公開

という流れです。

さすがに、Googleアカウント作成とログインについては、飛ばしますが、Googleサイトでホームページを制作するときは、以下のURLからログインしてください。

Googleサイト ログイン ページ
https://sites.google.com/new

2020年8月以降の、Googleサイトの新バージョンに対応したログインURLです。

Googleサイト ホームページ制作 流れ

Googleサイト で ホームページ制作 する 流れ について、解説します。

  1. 新しいサイトを作成
  2. テーマ設定(ホームページのデザイン設定)
  3. コンテンツ配置
  4. ページ追加

といったかんじで、ホームページを作っていきます。

Googleサイト 使い方 として、個別に解説します。

テーマ設定(ホームページのデザイン設定)

まず最初に、ホームページのデザインを決める「テーマ」を固めていきます。

画面右側にあるテーマをクリックして、

  • レイアウト
  • フォント

などを決めていきましょう。

色は3色以下に抑えて、デザインをしていくと、それっぽくなりますよ

コンテンツ配置

レイアウトが決まると、そこに、コンテンツを配置していきましょう。

  • テキスト
  • 画像
  • ロゴ
  • 動画
  • 地図

などですね。

このとき、同じGoogleアカウント内のものであれば、スプレッドシートなどの情報を張り付けることも可能になります。

地図は、Googleマップを貼り付けできます。

Googleサイトに地図を掲載できます。

Googleカレンダーと連携したりもできますよ。

ページ追加

Googleサイトでは、ページ追加も可能です。

画面右下にある +アイコンをクリックすれば、新しいページができます。

このページの名前を入力すれば、新規ページができるのです。

もちろん、もともとのページからのリンク設定もできます!!

なお、作成されたページは、自動的に、各ページ上部に表示されているメニューに追加されるので、編集の切り替えもしやすいです。

Googleサイト 共同編集者 設定

Googleサイトは、複数人でのホームページ作成や管理ができます。

これは、スプレッドシートや、Googleドキュメント同様、Googleサイト 共同編集者 設定によって、複数人での、ホームページの編集や更新が可能になります。

Googleフォームなどと同じように、Googleサイトでも、画面上部にある「他のユーザーとの共有」ボタンをクリックすれば、Googleサイトの編集権を共有できます。

共同編集者 したい人のGoogleアカウントのメールアドレスを入力しましょう。

Googleサイト 公開

Googleサイトでホームページを作ったら、あとは、公開作業ですね。

Googleサイトで作ったホームページは、インターネット上に公開できます。

Googleサイト画面上部の「公開」ボタンをクリックするだけで、公開可能です。

ホームページのURLは、自分で、設定したもので公開可能です。

ただし、URLは、すでに他の人が利用している場合は、使えません

なお、独自ドメインで、Googleサイトで作ったホームページを公開することもできます。
この場合は、カスタムURLをクリックして、設定してください。

なお、Google検索などの検索結果に表示させないようにすることも可能です。検索の設定にチェックを入れておきましょう。

Googleサイト 独自ドメイン 設定方法

Googleサイト 独自ドメイン 設定方法 を簡単にまとめます。独自ドメインは、有料サービスである、Google Workspaceを使っている必要があります。

独自ドメインの設定手順は

  1. Google Workspaceの管理コンソールへ
  2. アプリ ⇒ Googleサイトを選択
  3. カスタムURLをクリック
  4. GoogleサイトのURLを入力
  5. お名前.comなどでDNS設定
  6. Googleサイトで「公開」ボタンを押す

という流れになります。

Google Workspaceを活用することを理解しておきましょう。

SSL接続も可能!Googleサイト

Googleサイトは、独自ドメインの設定をすれば、

SSLの設定も可能です。

httpsからのURLが使えます。

GoogleサイトのSSL証明書は、Let’s Encrypt という無料のSSL証明書になります。

chromeを始めとしたほとんどのwebブラウザで対応可能なSSL証明書です。

Googleサイト 使い方 の コツ

Googleサイトとはいえ、ホームページ制作ツールなので、上手に、Googleサイト を使うためには、事前に、Googleサイト とは、離れたところで、ホームページについてのイメージを立てておきましょう。

特に

  • レイアウト
  • テキスト
  • 画像

です。

手書きでいいので、ざっと、レイアウトと入れる文章などのコンテを作っておくと、上手に、Googleサイトで、ホームページを作れると思いますよ。

Googleサイト 使い方 動画

Googleサイトの使い方をご紹介してきましたが、より実践的に、Googleサイトの使い方を知ってもらいたくて、参考になる、Youtube動画をご紹介します。

この動画では、より具体的なところとして、自治会やサークルのホームページ作成に、Googleサイト、いかがですか?という感じで、提案してくれています。

もちろん、Googleサイト 使い方 を 細かく、動画で解説してくれているので、画面の操作イメージなども学べます。カスタマイズが自由な部分が大きい、Googleサイトなので、このような、Googleサイト 使い方 解説をしている動画があった方がわかりやすい!!と思っています。

Googleサイトの使い方としては、サイト名の付け方や、保存の方法、テキストの入力や見出しの設定方法、画像のアップロード方法まで、完備しています!!しかも、Googleフォームと連動した、出欠席をとるアンケート作成方法についても言及してくれているので、ちょっとした活動のホームページ作成が、簡単にできます。

ブログのように、ページを作れますが、それ以上に、デザインも編集できるGoogleサイトだからこそ、ある程度、Googleサイト 使い方 を把握しておいた方が、かっこいいホームページが作れますよ。

このYoutube動画は、9万回以上、視聴されているYoutube動画なので、かなり人気な動画となっています。その秘訣は、細かく、解説されているから!という点が大きいと思います。いいね!も1,000以上ついていますしね。

Youtube動画を参考に、Googleサイト で、ホームページ作ってみてはいかがですか?使い方の理解も進みますし、Youtubeなので、PC、スマホ どちらからでも、チェック可能ですよ。

まとめ Googleサイト 使い方 事前に作るホームページのイメージはまとめておく。

Googleサイトの使い方について解説してきました。

Googleサイトは、無料のホームページ制作ツールで、サーバ費用もかかりません。Googleのサーバに設置ができます。

しかし、Googleサイトとはいえ、ホームページ作成をすることには、代わりはありませんので、まずは、Googleサイトで、どんなホームページを作るのか、そのイメージを構築しておく方が、スムーズでしょうね。

Googleサイト無料プランのままでは、独自ドメインを設定できないですが、G Suite などの契約を通して、社内用のホームページとしては活用できます。

デザインや画像の設定は、もちろん、テキストの入力で、ホームページが作れるGoogleサイト。独自ドメインでなければ、Googleサイトでホームページの公開は可能なので、ちょっとしたホームページを作りたい場合には便利です。

そもそも、Googleサイトは、Googleサービスとの連携もしやすいですしね。

まずは、手を動かしてみて、Googleサイトの使い方を把握してみるのも1つの方法ですよ。おすすめです。

Drupalとは 無料 高機能 CMS ドルーパル メリット wordpress 比較 検証

■ web制作 人気 記事

みんな 気になる!? web制作 人気 記事 まとめてみました!

ノーコード STUDIO 使い方 サイト 作り方 できること できないこと を 5分 解説
https://saras-wati.net/web-make/nocode-studio-howto/

【web制作 営業 必見】 効率的な 見積書 作り方 高速化の技術は4つ
https://saras-wati.net/web-make/webmake-quote-knowhow/

【web制作会社向け】売上改善に!CMS ランキング 2020 から 対応できる CMS を 増やす
https://saras-wati.net/web-make/ranking-cms-2020/

エレメンター とは 無料 で 簡単 ホームページ制作 ノーコード web制作 に
https://saras-wati.net/web-make/about-elementor/

【ノウハウ】WordPress マルチサイト 設定方法 解除 方法 ハウツー メモ
https://saras-wati.net/web-make/system/wordpress-multisite-setting/

2022年 web制作会社 売上の上がる18のビジネスモデル解説
https://saras-wati.net/web-make/webmake-business-model2002/

【知ってる?】Webデザイン 仕事 で 必要なソフト まとめ 6選 おすすめ アプリは?
https://saras-wati.net/web-make/first-web-design-soft-knowhow/

Notion 使い方 Web 制作 方法 Wraptas が 便利 ヘッドレスCMS ノーション
https://saras-wati.net/web-make/system/notion-howto-web-wraptas/

【トレンド】Jamstack とは webサイト 高速表示 大量アクセスに強い 最新技術
https://saras-wati.net/web-make/about-jamstack/

【基礎知識】データベース 種類 DBとは どんなソフトがあるの?まとめてみました。
https://saras-wati.net/web-make/system/about-db-soft/

【ホームページ作成 CMS】BiNDup とは バインドアップ 評価 クチコミ 情報!
https://saras-wati.net/web-make/about-bindup/

【無料】Pixelhunter SNS 最適 画像サイズ に 1回で トリミング!ピクセルハンター
https://saras-wati.net/web-make/about-pixelhunter-sns/

【ノーコード】Webflow 事例 国内サイト 3選 html css 書かずに ホームページ制作
https://saras-wati.net/web-make/webflow-jirei/

Notion 使い方 Web 制作 方法 Wraptas が 便利 ヘッドレスCMS ノーション
https://saras-wati.net/web-make/system/notion-howto-web-wraptas/

React 何ができる? 将来性 高い ライブラリ。活用事例 webページ ガイド
https://saras-wati.net/web-make/react-possible-exsample/

Chrome デベロッパー ツール 使い方 解説 変更 保存 で 改善 速度を爆速に!
https://saras-wati.net/web-make/chrome-develop-tool-howto/

Drupalとは 無料 高機能 CMS ドルーパル メリット wordpress 比較 検証
https://saras-wati.net/web-make/about-drupal/

weebly 使い方 まとめ デザイン の おしゃれな 無料 ホームページ 制作 ツール
https://saras-wati.net/web-make/weebly-howto-use/

【おしゃれ】アイソメトリックとは webデザイン を クールに魅せる コツ
https://saras-wati.net/web-make/isometric-web-design/