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サイト 使って、ホームページを作る大きな流れとしては、
- Googleアカウント作成
- ログイン
- 管理画面操作で、ホームページ制作
- ホームページ公開
という流れです。
さすがに、Googleアカウント作成とログインについては、飛ばしますが、Googleサイトでホームページを制作するときは、以下のURLからログインしてください。
Googleサイト ログイン ページ
https://sites.google.com/new
2020年8月以降の、Googleサイトの新バージョンに対応したログインURLです。
Googleサイト ホームページ制作 流れ
Googleサイト で ホームページ制作 する 流れ について、解説します。
- 新しいサイトを作成
- テーマ設定(ホームページのデザイン設定)
- コンテンツ配置
- ページ追加
といったかんじで、ホームページを作っていきます。
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を使っている必要があります。
独自ドメインの設定手順は
- Google Workspaceの管理コンソールへ
- アプリ ⇒ Googleサイトを選択
- カスタムURLをクリック
- GoogleサイトのURLを入力
- お名前.comなどでDNS設定
- 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/