【2025年版】Googleサイトで作るPTAホームページ
zio
今回は
Googleの無料ソフト『Googleサイト』を使って、簡単にPTAのホームページを作る方法を解説します。
サンプルサイト
『外注してホームページを作ったけど、更新頻度が低くてホームページを持て余している。』なんてことはありませんか？
この記事は『気軽に更新できるホームページを自分たちで作る』ことを目標に解説しています。使用するのはGoogleの無料ソフト『Googleサイト』です。無料ソフトなので更新費用もかかりません。気軽に挑戦してみてください。
＊こちらのソフトはパソコンでのみ編集できるソフトです。
PR｜AdSense
はじめに
使い方
この記事をスマートフォンで見ながら、パソコンで作ってみてください。
では、まず必要な物を揃えていきましょう
事前準備
PTAホームページを作るために必要なものを順番に準備しましょう。
すべて準備できている場合は
①必要な道具
- パソコン
- スマホ
- Wi-Fi環境
- 載せたい画像
- Googleフォーム
・『クリーン活動 申込フォーム』
・おやじ会懇親会出席フォーム
・お問合せフォーム
・デジタル投票フォーム
②GoogleChromeをインストールする
- まずはChromeのダウンロードページを開きます。ブラウザで『Chrome ダウンロード』と検索するか、
URL：https://www.google.com/intl/ja_jp/chrome/ からダウンロードページにアクセスしてください。 - 画面中央にある『Chromeをダウンロード』とかかれたボタン をクリックすると、自動的に[ChromeSetupファイル]がダウンロードされます。
- [ChromeSetupファイル]を開き、『インストールする』をクリックし『はい』を選択します。
- インストールが完了すると自動的にGoogleChromeが立ち上がります。
Chromeが立ち上がったら完了です。
広告｜Amazon
＼あなたは何よむ？／
200万冊を好きな端末で読み放題
基礎編
トップページを作る
サンプルサイト
まずはホームページの顔になるトップページを作っていきましょう。
サンプルサイトの『△△小学校PTAホームページ』を参考にしてみてください。
トップページの作り方を通して『基本的な操作』を解説します。
まずはGoogleサイトから「新しいサイト」を開くところからはじめましょう。
①『新しいサイト』を開く
- Google Chromeで「Google Site」と検索
- Googleサイト（https://sites.google.com/）にアクセスします
3. 右端にある 虹色の+ボタン をクリックして、「新しいサイト」の編集画面を開きます。
『無題のサイト』が開けました。
それでは次にタイトルを設定してみましょう。
②タイトルを設定する
1.タイトル＝『ホームページの名前』を入力します。 青枠部分［ページのタイトル］をクリックし、タイトルを入力します。
タイトルが長い場合は［Shift］+[Enter]で、行間をつめた改行ができます。
選択中のブロックの上に表示される「編集ツールボックス」
の機能をまとめました。確認してみてください。
編集ツールボックスを確認しよう
①テキストの種類（題名・見出し・小見出し・標準・文字サイズ小）を選べます。
②フォントを選べます
③テキストサイズを変更できます
④太文字にする場合にクリックします
⑤イタリック（斜体）にする場合にクリックします
⑥文字に下線を引く場合にクリックします。
⑦テキストカラーを選択できます。
⑧選択したテキストにリンクを貼ることができます。
⑨表示位置を選べます（左づめ・中央・右づめ・全幅）
⑩選択したアイテムを削除することができます。
③タイトル背景を設定する
タイトルボックスの［画像を変更］をクリックし、[アップロード] をクリックします。あらかじめパソコンに保存していた画像を選択します。
アップロードすると…
文字が見やすいように画像の色が自動補正されます。
④画像を挿入する
では次に本文エリアに画像を追加していきます。
1.画面右側にあるツールボック上の[画像]ボタンをクリックします。
2.［アップロード］を選択し、あらかじめパソコンに保存していた画像を選択すると本文エリアに画像が追加されます。
アップロードした画像は
- １クリックすると下辺に点が出現し、大きさの調整を行えます。
- クリックしたままマウスを動かすと画像を掴めます。クリックを離すと離した場所に画像を配置できます。
⑤テキストを入力する
1. ツールボックスの[テキストボックス]をクリックします。
2．文字を入力し、①テキストの種類［標準］を選択します
＊注釈などの小さい文字は［文字サイズ小］を使います
クリック＆ドロップ
画像同様にテキストでも１クリックで大きさ変更の丸マークが表示されます。レイアウトの変更もクリックしたまま移動して離すと配置されます。＝
空いたスペースに別のテキストボックスを配置すれば、横並びレイアウトも可能です。
⑥見出しを作る
1.ツールボックスの[テキストボックス]をクリックします。
2.文字を入力し、テキストの種類［見出し］を選択します。
3.つぎに見出しのスタイルを変更します。テキストを選んだ状態で左側に表示されるパレットマークをクリックして、スタイルを選びます。
4.選んだスタイルに変更されれば成功です。
クイックメニュー
トップ画面の何もないところでダブルクリックすると[クイックメニュー]が出てきます。
PR｜AdSense
応用編１
サブページを作る
次はサブページを作りながら応用的な使い方を学んでいきます。
応用編①メニュー
①サブページを追加する
1.ツールボックスの［ページ］タブをクリック
2.ホームの右端に表示される［ ⁝ ］をクリック
3.［サブページを追加］をクリック
4.新しいサブページの名前を入力し［完了］をクリック
5.新しいページができました。
完了‼
サブページが開けたところで、基本編の内容を使って、下の演習問題に挑戦してみましょう。
演習1．クリーン活動のページを作る
下記の写真を参考にサブページを作りましょう。
②フォームを挿入する
先ほど作ったクリーン活動のサブページ下部に
『クリーン活動 出欠アンケート』フォームと分割線を挿入します。
＊あらかじめGoogleドライブ中にフォームを保存しておいてください。
詳しくは 『Googleフォームでつくる便利PTAアンケート１２３』を参考にしてください
手順
- ツールボックス中の［フォーム］をクリックしします
- 埋め込むフォームをクリックし［挿入］をクリックします
⇩
続けてフォームと本文の間に分割線を配置します
③分割線（区切り線）を配置する
ツールボックス中の［分割線の追加］をクリックします。（赤線①）
追加した分割線をクリック＆ドロップで必要な場所に配置していきます。
今度は「おやじ会のページ」を作ってみましょう。
演習2. おやじ会のページを作る
基礎編と応用編1-①サブページを追加するの参考に、下記の写真のようにページを作りましょう。
⇩
次にプレスホルダーとボタンを配置していきます
④プレースホルダを配置する
製作前の画像・YouTube・マップ・ドライブの仮の『配置スペース』を確保する際に使用するのが『プレースホルダ―』です。
ツールボックスのプレースホルダをクリックし、画像同様にクリック＆ドロップで配置しましょう。
⑤ボタンを配置する
ツールボックス中の［ボタン］をクリック追加されます。ボタンもクリック＆ドロップで好きな位置に配置してください。
配置したらボタンの『編集』をクリックします。
『ボタンの編集』という画面で
- 名前：「交流会参加申し込みフォーム」と入力します
- リンク：フォームの回答者リンク*を貼りつけます
フォームの準備ができていない場合はリンクは空欄のままでOKです。後からフォームを作成し忘れずにリンクしてください。
『フォームの回答者リンク』を取得する
1.Googleドライブでリンクが必要なフォームの上で右クリック
2.［リンクの取得］をクリック
3.一般的なアクセスの項目を「制限付き」⇒「リンクを知っている全員」に変更
4.［回答者リンクのコピー］をクリック
5.［完了］をクリック
演習5. 会則ページを設定する
会則や規則をまとめたページを作り、会則のPDFリンクを設置しましょう。
- あらかじめWordなどで『会則』のPDFファイルを作成します(ヒント①参照)
- 作成したPDFファイルをGoogleドライブにアップロードします（ヒント②参照）
- テキスト「会則」にPDFのリンクを貼ります。（⑥テキストにリンクを張る（PDF）参照）
ヒント①
『会則』PDFを作る
- Wordなどで『会則』の文章を完成させます。
- 作成したファイルを『名前を付けて保存』にして、画像のようにファイルの種類のプルダウンメニューから「PDF」を選択し保存します。するとPDFファイルが作成されます。
＊PDFファイルにする理由は、どの端末からでも閲覧できるようにするためです。Word/Excelのままだと端末ごとにレイアウトがバラバラになったり、表示されなかったりしてしまいます。
注意 ：保存する前に作成者の名前も確認しましょう
ヒント②
Googleドライブにアップロードする
- Googleドライブを開きます
- ［新規+］をクリック
- ファイルをアップロードをクリック
- パソコンに保存されたＰＤＦファイルを選択
- アップロードが完了
⑥テキストにリンクを貼る（PDF）
- リンクを貼りたい文字「会則」をマウスで選択
- 編集アイテムの「〇リンクボタン」をクリック
- リンクに、会則ＰＤＦのリンクを貼りつける
- ［適用］をクリック
完成‼
広告｜Amazon
＼あなたは何よむ？／
200万冊を好きな端末で読み放題
PR｜AdSense
応用編②
全体を整える
応用編②ではWebサイトとしての体裁を整えていきます。具体的にはページとページをリンクさせたり、見やすいデザインに変えていきます。
応用編②メニュー
- サイト内リンクを貼る
- ナビゲーションの表示・非表示
- テーマの選択
- 設定を学ぶ
- プライバシーポリシーのページを作る
- 問い合わせページを作る
①サイト内リンクを貼る
画像やテキストに、サイト内リンク（サイト内の他のページのリンク）を貼りましょう。
あらかじめ「応用編①－①サブページを追加する」を利用して以下の3つページを作ります。（サンプルサイト参照）
- クリーン朝会
- 学習指導
- ベルマーク
つぎにトップページのそれぞれの画像にサイト内リンクを貼ります。
- 画像アイテムの上でクリック
- ［リンクボタン] をクリック
3.リンクの枠内でクリックし、プルダウンメニューからリンクさせたいページのタイトルを選択
4.［適用］をクリック
サイト内リンクの完成です!
同じ要領で「学習指導」、「ベルマーク活動」のページにもサイト内リンクをつけていきます。
②ナビゲーションの表示・非表示
『思い通りにページを移動できる』WebサイトはよいWebサイトです。思い通りにページを移動するためにナビゲーション機能を使いやすく設定していきます。
ナビゲーションに非表示にする
通常、サブページを追加していくとすべてのページがナビゲーションに表示されます。全て表示されると一覧性はあるものの、大変見にくいナビゲーションになります。その為、必須なページ以外は非表示にすることをお勧めします。
手順
1.ツールボックスの［ページ］タブを開きます。
2.ナビゲーションで非表示にしたいページの上にカーソルを合わせます。
3.右がわの ⁝ （三点リーダー）をクリックします。
4.［ナビゲ―ションに表示しない］をクリックするとナビゲーションに非表示になります。
この手順で…
- クリーン活動
- 学習指導
- ベルマーク集計会
をナビゲーションの中から非表示にします。
③テーマの選択
ツールボックスの［テーマ］から、サイトのデザインの変更できます。好みに合わせて設定しましょう。
④設定を学ぶ
Googleサイトの編集画面 右上にある設定ツール(赤枠)について解説します。
⇩
設定ツールは次のようになっています
設定ツール
- 戻る
- すすむ
- プレビュー
- 公開アドレスのリンク
- 編集者の追加
- 各種設定
⇩
設定ツールの⑥⚙️歯車マークをクリックすると
以下のダイアログが表示されます。
移動：ナビゲーションの位置を選べます。
上か横（左）
ブランド画像：ロゴとファビコンをオリジナルのものに設定できます。
閲覧者ツール：情報アイコンとアンカーリンクの設定を変更できます
アナリティクス：Googleアナリティクスを有効にできます。
お知らせバーナー：サイトのコンテンツ最上部にお知らせを載せることができます。
例：児童会『アルミ缶回収に御協力ください。』
それぞれのサイトに必要な設定を行ってみてください。
⑤プライバシーポリシーを設定する
個人情報の取扱い方針である『プライバシーポリシー』を設定して、よりWebサイトらしい体裁にしていきます。今回は練習として作っていくので、サンプルページのプライバシーポリシーをコピー＆ペーストして頂いてもかまいません。早速作ってみましょう。
下記URLを参考にプライバシーポリシーを作成しましょう。
『△△小学校PTAホームページ/ホームページプライバシーポリシー』
⑥問い合わせページの設定
最後にお問合せページを作りましょう。
サンプルサイトではGoogleフォームで問い合わせフォームを作って貼り付けました。
以上でホームページの本体が完成しました‼‼‼
次はいよいよホームページを公開していきます。
広告
＼そんな時はココナラ／
こまで頑張ってみたけど・・・難しいなら
PR｜AdSense
公開設定
1.最後に、公開設定を行います。ツールボックス上の［公開］ボタンをクリックしましょう。
公開設定ダイアログが表示されます。⇓
2.まずはWebアドレスを入力しましょう。
①GoogleSiteのサブドメインではじめる場合は［ウェブアドレス］の欄に入力してください。
②カスタムドメイン（独自ドメイン）を設定する場合は
- 既に他社で購入した独自ドメインを設定する
- Googleドメインでカスタムドメインを購入する
を、選択できます。
3.「一般公開の検索エンジンに自分のサイトを表示しないようにリクエストする」にチェックを入れましょう。PTAホームページの場合に、防犯の目的で、不特定多数の目に晒さないように設定するためにオススメしています。
（注意）検索エンジンに表示されなくてむ、Webアドレスが流出すると、多くの目に晒されることになります。必要に応じた対策を講じてください。
4.「公開する前に編集者が変更内容を確認する必要があります」にもチェックを入れましょう。編集前と編集後の比較ができます。
5．保存を押して公開完了です！
以上で、『【2025年版】すぐできる！GoogleSiteで作るPTAホームページ』を終わります！最後までお付き合いくださりありがとうございました！
今回作ったページ
最後までお付き合いいただき、ありがとうございました。また次回お会いしましょう！
広告
＼そんな時はココナラ／
ここまで頑張ってみたけど・・・難しいなら
広告｜Amazon
＼あなたは何よむ？／
200万冊を好きな端末で読み放題
PR｜AdSense
