導入・設定ガイド

Googleサイトでコーポレートサイトを作る方法と移行前の判断ポイント

目次
  1. Googleサイトで「できること」「できないこと」
  2. できること
  3. できないこと
  4. コーポレートサイトを作ってみよう
  5. サイト構成を考えよう
  6. Googleサイトを作ってみよう
  7. コンテンツを埋めていこう
  8. テーマを決めよう
  9. ロゴとファビコンを設定しよう
  10. ヘッダー画像とフッターを設定しよう
  11. 公開・独自ドメインへの切り替えは別作業
  12. 次回はお問い合わせページの作成へ

こんにちは。前回の「レンタルサーバーからGoogle Workspaceへ移行する方法(メール編)」に続き、今回はWebサイトを「Googleサイト」で作り直す方法をご紹介します。

Webサイトを公開する方法は様々ですが、せっかくGoogle Workspaceを契約してメールサーバーについては「脱レンタルサーバー」できたのに、Webサイトを公開するためだけにレンタルサーバーを契約するものもったいない気もします。

なお、Google Workspaceの利用者がWebサイトを公開する様々な方法については、こちらの記事で詳しく紹介しています。

Google WorkspaceユーザーがWebサイトを公開するベストな方法とは?

Google Workspaceには「Googleサイト」というWebサイトを簡単に作れる機能が標準搭載されています。できれば余計なコストは削減して、企業のWeb周りはシンプルにGoogle Workspaceで統一してみてはいかがでしょうか?

ということで、今回はGoogleサイトへの移行を検討するときの判断ポイントと、Googleサイトでコーポレートサイトのトップページを作る手順をご紹介します。

この記事でわかること
  • Googleサイトに向いているサイト・向いていないサイト(移行前の判断ポイント)
  • Googleサイトで「できること」「できないこと」
  • サイト構成の考え方から、コンテンツ・テーマ・ロゴ・ヘッダー/フッターを設定してトップページを作るまでの手順
この記事で扱う範囲

本記事は「トップページを作るところまで」を扱います。お問い合わせページの作成はその2で解説します。サイトの公開・公開範囲の設定、独自ドメイン(カスタムドメイン)の設定とDNSの切り替えは、記事末尾の「公開・独自ドメインへの切り替えは別作業」で概要と公式ヘルプを紹介しています。

Googleサイトで「できること」「できないこと」

Googleサイトは簡単にWebサイトが作れますが、それ故にできない事も多くあります。以下に簡単にまとめましたので、自身のWebサイトがGoogleサイトで実現できるかどうか検討してみてください。

できること

  • 独自ドメインが使える(www.example.com のようなサブドメインで公開。example.com のようなwwwなしのドメインには対応していません)
  • HTMLを書かなくても簡単にページが作れる
  • Googleドキュメントやフォーム、YouTubeなどGoogleコンテンツの埋め込みができる
  • 「挿入」→「埋め込む」→「埋め込みコード」から、HTML・CSS・JavaScriptのコードをページの一部として追加できる

できないこと

  • サイト全体のHTMLソースやテーマ(デザインの仕組み)を自由に編集できない
  • そのため、テーマで用意された範囲を超える自由なデザインはできない
  • 動的なページ(PHPなどのサーバー側プログラム)が作れない
  • WordPressのようなブログ機能はない

埋め込みコードはあくまで「ページの中にHTML・CSS・JavaScriptのブロックを追加する」機能で、サイト全体のデザインや動作を書き換えるものではありません。

現在のWebサイトが、ECサイトのようにサーバー側のプログラム(PHPなど)やスクリプトを多用している場合や、WordPressのようなブログ型の構成の場合、Googleサイトに移行するのは難しいでしょう。

一方、コーポレートサイトや、店舗のページ、製品の紹介ページなど、数ページ規模の静的なコンテンツであれば、Googleサイトが適しています。また、動的なページは作れませんが、お問い合わせフォームやアンケートフォームといったページであれば、「Googleフォーム」を利用すれば作成することができます。

Googleサイトに向いているサイト(コーポレートサイト、店舗サイト、商品紹介ページ、ペラサイトなど)と、向いていないサイト(ECサイトなどの動的サイト、ブログ、大量ページのサイト)の比較図

なにより、HTMLの知識がなくてもページを作成・更新することができるため、担当者レベルでページ編集できるところがGoogleサイトの強みです。サイト制作を外部に委託しているところは、大きなコスト削減になるでしょう。

コーポレートサイトを作ってみよう

今回は、Googleサイトでコーポレートサイト作りにチャレンジしてみましょう。

サイト構成を考えよう

サイトを作る前に、サイトの構成を考えましょう。すでにWebサイトがある場合は、今の構成を書き出して見てください。

本記事では、私の個人ページを作成してみたいと思います。

  • ホーム

    • サービス内容

      • システム開発
      • ホームページ制作
      • Webサイト運営
    • プロフィール

    • 運営サイト

      • どんとこい!Google Workspace
  • お問い合わせ

「ホーム」と「お問い合わせ」の2ページ構成とし、1ページ目にサービス内容、プロフィール、運営サイトの紹介をしてみます。2ページ目はGoogleフォームを使ったお問い合わせフォームを設置してみます。

Googleサイトを作ってみよう

新しいサイトは、パソコンでGoogleサイト(https://sites.google.com/)を開き、上部の「新しいサイトを作成」からテンプレートを選んで作成します。今回はゼロから作るので、「空白のサイト」を選びます。

Googleサイトのトップ画面。「新しいサイトを作成」の一覧にある「空白のサイト」を選ぶ

画面について

作成入口・編集画面・テーマの作成・テーマの色・ヘッダー画像の画面は、2026年9月26日にPCで確認した現行の画面です。それ以外の画面は2022年に撮影したものです(ブランドの画像、フッターの追加、プレビューの操作は2026年9月26日の現行画面でも同じことを確認しています)。Googleサイトの画面や表記は更新されることがあるため、実際の画面と異なる場合はGoogle公式ヘルプ「Google サイトの使い方」もあわせて確認してください。

空のサイトが表示されました。左上の「無題のサイト」となっているところは、サイト名に変更しておきましょう。この名前はGoogleドライブ上のファイル名にもなります。なお、ページ上部の「サイト名を入力」欄は、サイト上に表示するサイト名を入力する欄で、左上の名前とは別に設定します。

今表示されているのが、空のトップページ(1ページ目)です。ここから、右メニューの「挿入」「ページ」「テーマ」のタブを切り替えて、サイトを作っていきます。

空のサイトの編集画面。左上のサイト名「無題のサイト」と、右メニューの「挿入」「ページ」「テーマ」タブ

コンテンツを埋めていこう

デザインは置いておいて、まずはサイト構成に従い、トップページにコンテンツを入れていきましょう。

Webサイトは階層構成を持たせる事が一般的です。常に「見出し」-「小見出し」-「本文」が繰り返し出現するように構成します。(小見出しは無い場合もあります)

コンテンツは、「挿入」タブからテキストや画像を選択して挿入していきます。「コンテンツブロック」では、レイアウトされたテキストと画像の組み合わせをまとめて挿入することができるので便利です。

「挿入」タブのテキストボックスで見出しを、コンテンツブロックで画像とテキストの3列レイアウトを挿入する画面

すべてのコンテンツを入力しました。テキストブロックの階層に合わせて「見出し」「小見出し」「本文(標準テキスト)」を正しく設定しましょう。

なお、各コンテンツは「セクション」に分かれているので、ドラッグ&ドロップで簡単に順番を入れ替えたりすることができます。

トップページのテキストに「見出し」「小見出し」「本文」のスタイルを設定した例

コンテンツを入れていると、色やフォントを変えたい部分がでてくるかと思いますが、ここはぐっと我慢して、まずはコンテンツと見出し設定を入れていってください。

テーマを決めよう

コンテンツを入れ終えたら、「テーマ」タブを選択して、サイトの大まかなテーマを決めましょう。テーマはすべてのページに適用される、ページ装飾の形や色、フォントのスタイルがセットになったものです。今回はオリジナルのテーマを作ってみました。もちろんGoogleが用意している幾つかのテーマから選択して、この章をスキップしても構いません。

テーマタブからカスタムの新規作成(+ボタン)を選択します。

「テーマ」タブのカスタムにある「+」ボタン

テーマの名前を入力して「次へ」を押します。この画面では「ロゴを追加」(サイトの上部に表示)と「バナー画像を追加」(ヘッダーセクションの背景として表示)もできますが、どちらも後から設定できるため、いったんスキップします。

テーマの作成画面。「名前」にテーマ名を入力し、「ロゴを追加」「バナー画像を追加」は任意のまま「次へ」を押す

次にサイトの色を決めます。が、ここではプレビューできないため、ここもいったんデフォルトのまま「次へ」を選択します。

テーマの作成画面でプリセット色を選んで「次へ」を押す

フォントもプレビューできないので、デフォルトのまま「テーマを作成」を押します。

テーマの作成画面でタイトル・見出しと本文のフォントを確認して「テーマを作成」を押す

テーマが作成されました。テーマタブでは、色、テキスト、画像、移動、コンポーネント、間隔のカテゴリで詳細な設定ができます。

色

まず、Webサイトの色を決めましょう。Googleサイトのテーマの色は、「デフォルト」の色のほか、背景色と見出し・本文の文字色の組み合わせを「スタイル1」〜「スタイル3」の3個まで保存できます。スタイルを選んでから「背景」「タイトルと見出し」「本文」の色を設定します。今回は白背景、水色背景、薄いグレー背景の3つのスタイルを作成しました。

テーマの「色」設定。「スタイル1」〜「スタイル3」を切り替えて、背景・タイトルと見出し・本文の色を設定する

作成したスタイルは、各セクションの左メニューの「パレットアイコン」で変更することができます。

セクション左側のパレットアイコンで色のスタイルを切り替える

テキスト

次は、見出し、小見出し、標準テキストなど各テキストのフォントや配置を設定します。こちらも少し調整しました。

テーマのテキスト設定。テキストスタイルごとにフォント、サイズ、配置、行間隔、段落の間隔を設定する

その他の画像、移動、コンポーネント、間隔については、今回デフォルトのままとしました。必要に応じて調整してください。

ロゴとファビコンを設定しよう

次にサイトにロゴを設定しましょう。ロゴがあるとWebサイトとして締まりがでますし、訪問者に強く印象付ける事ができます。ちなみにロゴは無料のWebサービスを利用すると簡単に作ることができます。今回は「Canva」というサイトで作成しました。

ロゴは、右上の歯車アイコンから設定ウィンドウを開き、「ブランドの画像」タブからアップロードできます。同時に「ファビコン」もアップロードしておくと良いでしょう。ファビコンとは、ブラウザのタブ部分に表示される小さなアイコンの事です。未設定の場合はGoogleサイトのアイコンが表示されます。

歯車アイコンの設定画面で「ブランドの画像」タブからロゴとファビコンをアップロードする

ヘッダー画像とフッターを設定しよう

トップページの仕上げに、ヘッダー画像とフッターを設定します。

ヘッダー画像は、ページ上部のメインビジュアルにマウスを合わせると左下に表示される「画像」メニューから変更できます。手元の画像を使う場合は「アップロード」、用意されている画像から選ぶ場合は「選択」を押します。

ページ上部のヘッダーにある「画像」メニュー。「アップロード」と「選択」が表示される

「選択」を押すと「画像の選択」画面が開き、ギャラリー、URL、Google 画像検索、写真、Google ドライブから画像を選べます。今回は「ギャラリー」にあるGoogleが用意した画像から選択しました。

「画像の選択」画面の「ギャラリー」。Googleが用意した画像から選択できる

続いて、ページ下部の「フッターを追加」から、フッター文字列を設定します。今回はサイト名のコピーライトを設定しました。

ページ下部の「フッターを追加」ボタン

これでトップページが完成しました。ページ上部の「プレビュー」ボタンを押して、内容を確認しましょう。プレビューモードではPC、タブレット、スマホの3つのサイズで確認することができます。

編集画面上部のツールバーにあるプレビューボタン

完成したトップページをスマホサイズでプレビューした画面(サービス内容・プロフィール・運営サイト)

公開・独自ドメインへの切り替えは別作業

トップページができても、それだけでは既存サイトからの移行は完了しません。実際に切り替えるときは、Google公式ヘルプに沿って次の作業を行います(2026年9月26日時点の公式ヘルプで確認)。

移行を完了させるまでに必要な作業
  1. 公開と公開範囲の設定:右上の「公開」からサイトのウェブアドレスを決めて公開します。共有設定で「制限付き」か「公開」を選べます(サイトを公開して共有する)
  2. 公開後の確認:ログインしていないブラウザなど、編集者以外の環境で表示を確認します
  3. 独自ドメイン(カスタムドメイン)の設定:設定の「カスタムドメイン」から、Search Consoleでのドメインの所有権確認と、DNSへのCNAMEレコード追加を行います。独自ドメインで表示するには、サイトを一般公開している必要があります。反映には最長48時間ほどかかることがあります(サイトにカスタム ドメインを使用する)
  4. 切り替え前後の確認:旧サイトのページ構成と新サイトを見比べ、リンク切れや表示崩れがないか確認します

DNSを切り替えると、そのアドレス(例:www.example.com)では旧サーバーのWebサイトが表示されなくなります。メールと同じドメインを使っている場合は、Webサイト用のレコードだけを変更し、MXレコードなどメール用の設定を消さないよう注意してください。

次回はお問い合わせページの作成へ

以上、Googleサイトでトップページを作成する方法をご紹介しました。次回は、お問い合わせページを作成する方法をご紹介いたします。

次回の記事はこちら!お疲れ様でした!

Googleサイトに問い合わせフォームを設置する方法(Googleフォームの埋め込み手順)

12ヶ月15%OFFクーポンを受け取る