意外と知りたい！Googleサイトってわかる！GeminiのCanvasで機能ハック・ポータルサイトを爆発的に進化させる方法を解説【生成AI/Google Workspace/グーグル/使い方】

Googleサイトは、事業部門・全社・プロジェクト単位の情報共有ポータルをスライドやドキュメント感覚で作成できるサービス。検索窓・各アプリへのリンクボタン・共有ドライブのフォルダ表示・社内イベントスケジュール・YouTube動画・グラフ・スプレッドシート・スライド・NotebookLMリンクなど、Googleの各サービスをシームレスに集約できる点が最大の魅力。

Googleドキュメントでも情報集約はできるが、同時編集の限界が約200人前後（厳密な数値ではない）であり、数百人規模の閲覧には向かない。Googleサイトであれば閲覧人数の制限がないため、全社員・大規模プロジェクト向けに公開する用途に適している。

位置付けとしてはドキュメント/スライドに近いが、「ビジュアル化されたものを大規模な範囲に公開する」シーンに特化したサービスと捉えると分かりやすい。

• 用途は社内ポータル・部門ポータル・プロジェクト共有が中心
• 検索窓・リンクボタン・フォルダ・スライド・YouTubeなどを集約可能
• Googleドキュメントは同時編集約200人が壁、Googleサイトは閲覧人数無制限
• Googleの各サービスとシームレスに連携できる点が最大の強み

Googleサイトの作成入口は2つ。一般的にはアプリランチャー（右上の格子ボタン）から「サイト」を選ぶが、無料のGmailアカウントではアプリランチャーに表示されない場合がある。

その場合はGoogleドライブの「新規」ボタン → 「その他」 → 「Googleサイト」から作成可能。ドキュメントのヒエラルキー上やや奥にしまわれているが、確実に到達できる経路。

Googleサイトは実体としてはドライブ内の1ファイルとして扱われ、他のドキュメント/スプレッドシート同様に管理される。

• 通常はアプリランチャーから「サイト」を選択
• Gmail無料版はアプリランチャーに無い場合あり、ドライブ「新規 → その他 → Googleサイト」で作成
• Googleサイトはドライブ内のファイルとして格納される
• 図形描画なども同じ「その他」階層に格納されている

Googleサイトの編集はパーツ（コンテンツブロック）の追加と配置で進める。空白部分をダブルクリックすると挿入メニューが出て、テキスト・画像・リンク・ボタン・スライド・YouTubeなど多様な要素を追加可能。「コンテンツブロック」からは2列・3列・4列のレイアウトを一発で配置できる。

操作感はGoogleスライドやパワーポイントに近く、Ctrl+Zで戻せる挙動も同じ。範囲指定にはやや癖があり、最初は親要素が選ばれるため、ダブルクリックで子要素を選び直す感覚が必要。

効率的な作り方は「1つパーツを作って複製する」スタイル。複製したパーツをドラッグで配置していけば、揃ったデザインのページが素早く組める。

• 空白ダブルクリックで挿入メニュー、各種パーツを追加可能
• コンテンツブロックで2/3/4列レイアウトを一発配置
• 操作感はスライド/パワポと同等、Ctrl+Zで戻せる
• 「1パーツ作って複製」がもっとも効率的な作り方
• 範囲指定には癖があり、最初は親要素が選ばれる点に注意

右側パネルの「テーマ」から複数のテンプレートを選択でき、選択後にアクセントカラーとフォントを変更可能。各パーツ（セクション）ごとに「スタイル1〜3」と背景色のバリエーションを切り替えられ、ページ内でメリハリのある配色が作れる。

ボタン要素は「リンクはこちら」のような誘導に頻出。空のボタンは作れないため、一旦仮テキストを入れてからURLを設定する流れになる。スタイル違いのセクションに同じボタンを複製で持ち込むと、配置先のスタイルが自動的に適用される。

挿入できるリンク先は社内アプリ・ドキュメント・スプレッドシート等、Googleエコシステム全般。

• 「テーマ」でテンプレート選択、アクセント色・フォントを調整可能
• セクションごとに「スタイル1〜3」で背景色を切り替えメリハリを作れる
• ボタンは仮テキスト入力 → URL設定の順で作る
• 複製したボタンは配置先のスタイルを自動適用
• リンク先は社内アプリ、ドキュメント、スライドなど自由に指定可能

Googleサイトは挿入メニューからGoogleスライド・スプレッドシート・グラフ・ドキュメント・YouTube動画・ドライブのフォルダなど、ほぼ全てのGoogleサービスを埋め込める。スライドを埋め込むとページ送りが可能な状態で表示され、社内資料の共有がそのままページ上で完結する。

ただし埋め込みが多いと初回表示の読み込み量が増えるため、アクセスが多いサイトでは「リンク化」して見たい人だけが読み込む構成にする選択肢もある。サムネイル＋リンク方式はYouTube埋め込みでも有効。

フォルダ埋め込みは閲覧権限と連動するため、権限がない閲覧者にはフォルダ自体が見えない設計になっており、機密管理上も安全。

• スライド・スプレッドシート・グラフ・ドキュメント・YouTube・ドライブを埋め込み可能
• スライドはページ送り可能な状態で表示され、社内資料共有がページ上で完結
• 重い場合はリンク化＋サムネイル方式で初期表示を軽くする
• フォルダ埋め込みは閲覧権限がない人には表示されないため機密上も安全

右パネルの「ページ」からトップページ以外のサブページを追加可能。サブページのコピーや階層化（ページ下の階層にぶら下げる）もドラッグ操作でできるため、部門別・プロジェクト別の構造を柔軟に設計できる。URLパス（例：division-a）も設定できる。

編集者間の共有と「サイトの公開」は別領域。「公開」ボタンから公開URLを設定して初めて、閲覧者向けに見られる状態となる。Google Workspaceの初期値は「組織内限定」で、社外公開には別途設定が必要。

社外向けホームページ用途にはWix等の専用サービスの方が向くケースが多い。一方で社内ポータル用途では閲覧人数制限なしという強みが活きるため、社内プロジェクトメンバー20〜30人〜全社規模まで幅広く対応可能。

• ページ追加・コピー・階層化が可能、URLパスも個別設定できる
• 「編集者間の共有」と「サイトの公開」は別領域
• 公開のデフォルトは組織内限定、社外公開には設定変更が必要
• 社外向けHPはWix等が向く、社内ポータル用途はGoogleサイトが最適
• 公開後の閲覧は人数制限なし、何万人アクセスでも対応

Googleサイト標準機能では、お知らせをカテゴリで絞り込むようなフィルター機能は作れない。これがお客様から頻繁に要望される機能だった。

動画では、Googleスライドで「重要/総務/福利厚生」などのカテゴリ付きお知らせ欄のイメージ画像を作成し、スクリーンショットをGeminiに渡して「この画像のようなお知らせ欄を作って、文字をクリックするとリンクで飛ぶようにしたい」と依頼。GeminiのCanvasがHTMLでフィルター付きお知らせ機能を生成し、「重要」を押すと重要案件だけに絞り込まれる挙動まで自動的に実装してくれた。

プロンプトで絞り込み機能を明示していなかったにも関わらず、画像から意図を読み取って実装している点が特徴的。手書きラフをスマホで撮った写真でも同様に機能する。

生成されたHTMLをコピーしてGoogleサイトの「埋め込み → 埋め込みコード」に貼るだけで、Googleサイト上でフィルター付きお知らせが動作する。

• 標準のGoogleサイトではカテゴリ絞り込みフィルターは作れない
• イメージ画像（スクショ or 手書きラフ）をGeminiに渡しHTML生成を依頼
• Canvasが意図を読み取り、絞り込み機能まで自動実装する
• 生成HTMLをGoogleサイトの「埋め込みコード」に貼るだけで動作
• リンク先URLはHTML内の該当箇所を書き換えれば設定可能

Canvas生成HTMLをそのまま使う場合の課題は「お知らせの内容更新時に毎回Canvasに依頼するのは大変」というメンテナンス問題。動画ではこの課題への解として、スプレッドシートをデータソースにする構成を提示。

Googleサイトに埋め込んだお知らせ欄に「更新」ボタンを設置し、押すと裏側のスプレッドシートから最新データを取得して表示する仕組み。スプレッドシート上のお知らせ行を編集・削除すれば、Googleサイト側の表示も「更新」押下で即反映される。

結果として、メンテナンス担当者はスプレッドシートだけ触れば良くなり、HTMLやコードを直接編集する必要がない。GASやGCPを併用すれば速度向上も可能だが、簡易的にはスプレッドシート単体でも実用レベル。

この構成は今後メンバーシップ等で具体的な作り方を提供予定とのこと。

• Canvas生成のままだとお知らせ更新ごとに再生成が必要で運用が重い
• スプレッドシートをデータソースにする構成でメンテ性を確保
• 「更新」ボタン押下で最新データをスプレッドシートから取得し表示
• メンテ担当者はスプレッドシート編集のみで済む
• GAS/GCP併用で速度向上も可能、簡易用途ならスプシ単体で十分

お知らせ機能と同様に、社内掲示板機能もCanvas＋スプレッドシート連携で実現可能。動画ではトピック一覧画面と、各トピックに対するコメント投稿画面を実装。コメント欄に名前と本文を入れて「送信」を押すと、紐付いたスプレッドシートのコメントシートに行が追記される。

再度開くと最新のコメントが取得・表示される。不適切な投稿があった場合は、管理者がスプレッドシート上で該当行を削除すれば、サイト側からも消える。

これまで「Googleサイトでは掲示板機能は作れません」と断ってきたお客様要望も、Canvas登場により実装可能になった。標準UIの制約を超えて「Googleサイトはハックし放題のプラットフォーム」になったというのが本動画の最終的な主張。

ボタンのデザインも同様にCanvasで「ボタンサンプル集を作って」と依頼してパターンを揃え、既存サイトのボタンをそのデザインに差し替えるといった運用も可能。

• 掲示板のトピック画面・コメント投稿画面もCanvasで生成可能
• コメント送信時にスプレッドシートのコメントシートに行追記
• 管理者はスプレッドシート編集だけで投稿の削除・管理が可能
• 従来「できません」と断っていた要望も実装できる時代へ
• ボタンサンプル集をCanvasに作らせ既存サイトのデザインを差し替え可能
• ECサイトの簡易モックレベルまで構築する可能性も視野に

前半で紹介したように、Googleサイト自体はスライド感覚で組める情報共有ポータル作成サービスで、Google Workspaceの各サービスを集約する場として有用。一方で標準UIだけでは凝った機能は作りづらく、これまではドキュメントで代用するシーンも多かった。

GeminiのCanvasがHTMLを生成できるようになり、Googleサイトの「埋め込みコード」機能と組み合わせることで、これまで「できない」と諦めていたUI/機能が実装可能になった。フィルター付きお知らせ、掲示板、ボタンデザイン刷新、ECサイト的なモックなど、発想次第で幅広い拡張ができる。

非エンジニアでもスクリーンショットや手書きラフをGeminiに渡すだけで実装の入口に立てる、というのが大きな変化点。今後はメンバーシップ等で具体的な作り方も公開予定とのこと。

• Googleサイトはスライド感覚で組める情報集約ポータル
• 標準UIだけでは凝った機能は作りづらいのが従来の限界
• Canvas生成HTMLの埋め込みで標準制約を突破可能に
• 非エンジニアでも画像/ラフをGeminiに渡せば実装の入口に立てる
• 今後メンバーシップで具体的な作り方が公開予定