Googleサイトで作る掲示板は、管理者がお知らせを掲載する「お知らせ型」と、メンバーが自由に投稿できる「双方向型」の2パターンに分かれます。新しいGoogleサイトにはコメント機能がないため、閲覧者が直接書き込む双方向型を作るには、GAS（Google Apps Script）とGoogleフォーム・スプレッドシートの連携が必要になります。
お知らせ型はGoogleサイトとスプレッドシートだけで完結し、双方向型はそこにGoogleフォームとGASを加えた4ツール構成になります。どちらもGoogleアカウントがあれば無料で構築でき、プログラミング未経験でも進められます。
この記事では、2つのパターンそれぞれの作成手順をステップごとに解説し、運用時に押さえておきたい権限設定やトラブル対処法もあわせて紹介します。
なお、自作の掲示板は作った本人以外に運用を引き継ぎにくく、更新が止まりやすくなります。作り込みに時間をかける前に、NotePMのような専用ツールと比べておくと後戻りを防げます。
目次
Googleサイトで掲示板は作れる？ 標準機能の限界と2つの作り方
Googleサイトで掲示板を作ることはできますが、閲覧者がサイト上で直接コメントを書き込む形の双方向掲示板は、Googleサイト単体では実現できません。新しいGoogleサイトにはコメント投稿の機能そのものが用意されていないためです。
そこで掲示板を作る方法は、大きく2つに分かれます。1つは管理者がお知らせを掲載していく一方向型で、GoogleサイトとGoogleスプレッドシートだけで構築できます。もう1つはメンバーが投稿できる双方向型で、GASにGoogleフォームとスプレッドシートを連携させて実現します。
投稿を受け付ける必要がなく、連絡事項を並べて共有したいだけならお知らせ型で十分です。メンバーからの書き込みを集めたいなら双方向型を選びます。この後の章で、それぞれの作り方を順に見ていきます。
Googleサイトでの掲示板の作り方のステップ
それでは、Googleサイトでどのように掲示板を作っていくのか、解説をしていきます。
掲示板の運用目的や掲載内容を決める
まずはじめに、どういった目的で掲示板を作るのか、そしてどういった内容を掲載していくのか、を最初に明確にしておきましょう。Googleサイトは非常に便利なサービスなのでスピーディーにサイトの立ち上げができますが、どういった内容を載せるべきか、作りながら考えると作業の手間が増える要因になってしまいます。そのため、設置作業を始める前に、掲示板の運営方針を決めることをお勧めします。
Googleサイトへのログイン
運営方針が定まったら、Googleサイトで掲示板を作る作業を始めます。
まずは、開設済みのGoogleアカウントを使ってGoogleサイトにログインします。
新規サイトの設置
ログインをして、左上の「新しいサイトを作成」をクリックします。
Googleサイトでは、様々なテンプレートが用意されていますので、自社の運用目的にあったテンプレートがあればそれを選んでも構いません。
掲示板サイトの構築
実際の掲示板サイトの構築は、右カラムからテキストボックスや画像の挿入を使って作っていきます。
レイアウトのパターンも用意されているので、必要に応じてレイアウトも活用しましょう。
掲示板サイトの公開
掲示板の設置ができたら、公開ボタンを押します。
ウェブサイトは、 sites.google.com/view/ 配下のURLを自分で決めることができます。また、自分で保有している独自ドメインを利用したい場合は、Googleでドメイン管理を行うことで実現可能です。
サイトの閲覧するユーザーに制限をかけたい場合は、サイトを閲覧できるユーザーの「管理」をクリックします。
閲覧可能にしたい相手のGmailやGoogleWorkspaceで管理しているメールアドレスを入力してください。
お知らせ型掲示板の作り方（Googleサイト＋スプレッドシート）
お知らせ型掲示板は、埋め込んだスプレッドシートを更新するだけでGoogleサイト上の表示が最新に切り替わるため、プログラミングは一切要りません。手順は次の3ステップです。
- Googleサイトを新規作成し、掲示板用のページを追加する
- スプレッドシートでお知らせ一覧を作り、サイトに埋め込む
- 閲覧権限を設定して公開する
ステップ1：Googleサイトの新規作成とページ追加
まずGoogleアカウントでsites.google.com（Googleサイト）にアクセスし、空白テンプレートを選んで新しいサイトを作成します。画面上部にサイト名を入力すれば、掲示板の土台が用意できます。
次に右側メニューの「ページ」タブを開き、右下の追加ボタンから掲示板用のページを1つ追加します。ページ名は「お知らせ」「掲示板」など分かりやすいものにしておくと、後からナビゲーションで探しやすくなります。テーマやタイトルの装飾は後回しにして、ページ追加まで進めれば準備は完了です。
ステップ2：スプレッドシートでお知らせ一覧を埋め込む
お知らせの中身はスプレッドシート側で管理します。先にGoogleスプレッドシートを開き、1行目に「日付」「タイトル」「内容」の3つの見出しを作り、その下に掲載したいお知らせを行ごとに入力していきます。
一覧ができたらGoogleサイトの編集画面に戻り、右側メニューの「挿入」から「スプレッドシート」を選びます。先ほど作成したファイルを指定し、表示範囲を選べばページ上にお知らせ一覧が表示されます。
この方法の利点は、あとからスプレッドシートを書き換えるだけでサイト側の表示も自動で最新の内容に切り替わる点です。お知らせを追加・修正するたびにGoogleサイトを編集し直す必要はありません。
ステップ3：閲覧権限を設定して公開する
最後に公開設定を整えます。編集画面右上の「公開」ボタンを押すと、Webアドレスの入力と公開範囲の選択画面が表示されます。
公開範囲では「制限付き（特定のユーザーのみ）」と「公開（全員が閲覧可能）」を選べます。組織内の特定メンバーだけに見せたい場合は「制限付き」を選び、閲覧を許可するGoogleアカウントを指定すれば、そのメンバーだけに掲示板の閲覧を限定できます。設定を終えて公開すれば、お知らせ型掲示板の完成です。
双方向掲示板の作り方（GAS＋フォーム＋スプレッドシート連携）
メンバーが自由に投稿できる双方向掲示板は、Googleフォーム・スプレッドシート・GAS・Googleサイトの4つの無料ツールを連携させて作ります。コードはこの記事に載せたものをコピーして貼り付ける操作が中心なので、プログラミング未経験でも進められます。まずは4ツールの役割分担から確認します。
4つのGoogleツールの役割分担
データはGoogleフォーム→スプレッドシート→GAS→Googleサイトの順に流れ、4つのツールがそれぞれ次の役割を担います。
Googleフォーム（入力窓口）
担当者名や連絡内容といった項目をあらかじめ設定しておけば、メンバーはこのフォームから書き込むだけで投稿が完了します。スマートフォンからでも入力できます。
スプレッドシート（データ保存）
フォームに送られた投稿は、スプレッドシートに1行ずつ自動で書き込まれていきます。
GAS（表示処理）
スプレッドシートに溜まったデータを読み取り、掲示板の見た目に整えて出力するのがGAS（Google Apps Script）の役目です。
Googleサイト（公開場所）
GASが生成した掲示板画面を埋め込むことで、メンバーはGoogleサイト上で投稿一覧を閲覧できます。ほかのお知らせページと並べて配置できます。
ステップ1：Googleフォームとスプレッドシートを準備する
最初に投稿の入り口となるGoogleフォームを作成します。Googleフォームで新しいフォームを開き、質問を3つ用意します。設定する質問は次のとおりです。
- 担当者名（記述式・短文）
- タイトル（記述式・短文）
- 連絡内容（記述式・長文）
質問を作り終えたら、フォーム上部の「回答」タブを開き、スプレッドシートのアイコンをクリックします。「新しいスプレッドシートを作成」を選ぶと、回答の保存先となるスプレッドシートが自動で生成されます。このスプレッドシートではA列にタイムスタンプが自動で記録され、B列以降に担当者名・タイトル・連絡内容が並びます。後のコードはこの列順を前提にしています。これで投稿の入り口とデータ保存先がつながります。
ステップ2：GASで掲示板の表示コードを作成する
続いて、溜まった投稿を掲示板の形に表示するコードを作ります。先ほど自動生成されたスプレッドシートを開き、メニューの「拡張機能」→「Apps Script」を選ぶと、GASエディタが別タブで開きます。ここに「コード.gs」と「index.html」の2ファイルを用意します。
コード.gs の作成
「コード.gs」には、スプレッドシートのデータを読み取り、掲示板のHTMLを組み立てて画面に返す処理を記述します。すでに開いている初期状態のコードをすべて消し、次のコードを貼り付けます。
function doGet() {
return HtmlService.createTemplateFromFile(‘index’)
.evaluate()
.setTitle(‘掲示板’)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function getPosts() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
const values = sheet.getDataRange().getValues();
values.shift(); // 見出し行を除外
return values.reverse().map(function(row) {
return {
date: row[0],
name: row[1],
title: row[2],
body: row[3]
};
});
}
doGet内のsetXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)を省略すると、後でGoogleサイトに埋め込んだときに掲示板が表示されません。getPostsは投稿データを新しい順に並べ替えて返す関数です。
index.html の作成
次に、掲示板の見た目を作る「index.html」を追加します。GASエディタ左側のファイル一覧の「＋」から「HTML」を選び、ファイル名を「index」にして次のコードを貼り付けます。
<!DOCTYPE html>
<html>
<body>
<h2>掲示板</h2>
<div id=”list”></div>
<script>
google.script.run.withSuccessHandler(function(posts) {
var html = ”;
posts.forEach(function(p) {
html += ‘<details><summary>’ + p.title +
‘（’ + p.name + ‘）</summary><p>’ +
p.body + ‘</p></details>’;
});
document.getElementById(‘list’).innerHTML = html;
}).getPosts();
</script>
</body>
</html>
このコードはdetailsタグを使い、投稿タイトルをクリックすると本文が開くアコーディオン形式で一覧を表示します。投稿が増えても縦に長くなりすぎず、必要な投稿だけ開いて読めます。
ステップ3：Webアプリとしてデプロイする
コードを掲示板として動かすには、GASをWebアプリとして公開（デプロイ）し、アクセス用のURLを取得します。GASエディタ右上の「デプロイ」→「新しいデプロイ」を選び、種類の選択で歯車アイコンから「ウェブアプリ」を指定します。
設定画面では、実行するユーザーを「自分」に、アクセスできるユーザーを「全員」に設定します。「デプロイ」を押すとWebアプリのURLが発行されるので、このURLを控えておきます。
初回のデプロイ時には権限の承認を求められます。「アクセスを承認」から自分のGoogleアカウントを選ぶと、「このアプリはGoogleで確認されていません」という警告が出ることがあります。これは自作アプリで表示される標準的な画面です。
左下の「詳細」→「（プロジェクト名）に移動」をクリックし、続く画面で「許可」を選ぶと承認が完了します。
ステップ4：Googleサイトに埋め込んで公開する
最後に、取得したWebアプリのURLをGoogleサイトに表示させます。Googleサイトの編集画面を開き、右側メニューの「挿入」から「埋め込む」を選びます。表示された入力欄に、ステップ3で控えたWebアプリのURLを貼り付けて「挿入」します。
掲示板の表示枠が挿入されたら、枠の端をドラッグして縦横のサイズを見やすい大きさに調整します。調整が済んだらサイトを公開します。
公開後は動作確認をしておきます。Googleフォームからテスト投稿を1件送り、Googleサイトの掲示板に反映されるかを確認してください。表示されれば双方向掲示板の完成です。
不要になったテスト投稿は、スプレッドシートの該当行を削除すれば掲示板からも消えます。
Googleサイト掲示板の運用で押さえておく3つの注意点
掲示板の運用では、アクセス権限・スマートフォン対応・埋め込み表示の3点でつまずきやすいため、あらかじめ制約と対処法を把握しておきましょう。
1. 閲覧・投稿の権限管理（無料アカウントとWorkspaceの違い）
誰に掲示板を見せるかの設定は、使っているGoogleアカウントの種類で選べる幅が変わります。Google Workspace Business Starter以上のプランでは、公開範囲の一覧に自分が所属する組織が表示され、これを選ぶと組織内のメンバーだけに公開対象を簡単に絞り込めます（出典：マイナビニュース（Google調査）「Googleサイトで作成したWebサイトを共有・メンバー限定公開するには」）。
一方、無料のGoogleアカウントでは、公開範囲は「制限付き」か「公開」のいずれかになります。「制限付き」を選んで閲覧を許可するアカウントを1つずつ指定する形になるため、組織全体を一括で許可するWorkspaceほど手軽ではありません。
なお、いずれの場合も閲覧制限はGoogleアカウントを持つユーザーが前提です。Googleアカウントを持たない相手に対しては、Googleサイト自体のアクセス制限をかけられない点に注意してください。
2. スマートフォンからの編集・投稿の制約
Googleサイトのページ編集は、PCのブラウザからのみ対応しています。スマートフォンでサイトのレイアウトを変えたり、お知らせ型でスプレッドシートの埋め込みを差し替えたりといった作業はできないと考えておいてください。
ただし、これはサイトを「編集する」場合の制約です。双方向掲示板への投稿はGoogleフォーム経由で行うため、メンバーはスマートフォンからでも問題なく投稿できます。管理作業はPCで、投稿はスマートフォンでも、という運用イメージになります。
3. 埋め込みが表示されないときの対処法
双方向掲示板をGoogleサイトに埋め込んだのに画面が真っ白になる場合、原因の多くはGAS側の設定漏れです。GASのWebアプリを他サイトのiframeに埋め込むには、X-Frame-Optionsヘッダーで許可する設定が必要になります（出典：Google for Developers「Enum XFrameOptionsMode | Apps Script」）。
まず確認したいのが、コード.gsのsetXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)が正しく記述されているかです。この一行が抜けていると、Googleサイト側で表示がブロックされます。
もう1つ多い原因が、コード修正後のデプロイ更新忘れです。GASのコードを直したら、必ず「デプロイ」→「新しいデプロイ」を実行し、発行された最新バージョンのURLをGoogleサイトの埋め込みに再設定してください。古いURLのままだと修正が反映されません。
それでも表示されないときは、デプロイ時の権限承認をもう一度やり直すと解決することがあります。
まとめ
Googleサイトの掲示板は「お知らせ型」と「双方向型」の2パターンに分かれ、目的に合った方を選べばプログラミング未経験でも無料で構築できます。メンバーからの投稿が不要ならGoogleサイトとスプレッドシートだけのお知らせ型、投稿を受け付けたいならGAS連携の双方向型を選びます。
お知らせ型はスプレッドシートを更新するだけで運用でき、双方向型もコードのコピー＆ペーストが中心なので、いずれもこの記事のステップに沿えば当日中に公開まで進められます。まずはsites.google.comで新しいサイトを作るところから始めてみてください。迷ったら、手軽なお知らせ型で骨組みを作り、投稿機能が必要になった段階で双方向型に切り替えるのが無理なく進められる順番です。
| パターン | 必要なツール | 向いている用途 |
| お知らせ型 | Googleサイト＋スプレッドシート | 管理者が連絡事項を掲載して共有する |
| 双方向型 | Googleフォーム＋スプレッドシート＋GAS＋Googleサイト | メンバーが投稿・閲覧しあう |
GASを組み合わせた掲示板は、作った直後は動いても、更新と引き継ぎで負担が増えていきます。NotePMなら、投稿と蓄積の仕組みが最初から用意されており、AIが文書の中身まで検索して要約で答えます。作り込む前に、30日間の無料トライアルで比べてみてください。