GoogleSiteで作る！簡単PTAホームページ
zio
今回は
無料ソフトウェア『Googleサイト』を使って、簡単にPTAのホームページを作る方法を解説します。
『自分たちで更新できるホームページ』を作ることで続けやすくなります。更新費用も改装費用もかからないので費用面でも安心です。ぜひ気軽に試してみてください。
注意 編集作業にはパソコンが必要です。
あわせておすすめ
関連シリーズ PTAのICT
広告｜AdSense
はじめに
使い方
この記事をスマートフォンで見ながら、パソコンで作ってみてください。
事前準備編
準備するもの
- パソコン
- スマホ
- 載せたい画像
- Googleフォーム
⇩
＼Googleフォームの作り方はコチラ⇩／
すでに準備ができている人は基本編にジャンプ
GoogleChromeをインストール
GoogleChromeをパソコンにインストールしましょう。
1.「Chrome ダウンロード」で検索するか、下記のURLから
Chromeダウンロードページに移動します。
■ GoogleChrome ダウンロード［1.36M］
https://www.google.com/intl/ja_jp/chrome/
２．画面中央の Chromをダウンロード をクリック。
「ChromSetup」ファイルが自動ダウンロードされます。
3.手順にそってインストールしていきます。（以下、3ステップ）インストールが完了すると自動的にGoogleChromeが立ち上がります。
- 開く
- 許可する
- インストールする
Chromeが立ち上がったら完了です。
広告｜AdSense
基礎編：トップページを作る
すでにできる人は応用編①にジャンプ
では、早速作っていきましょう！まずはGoogleサイトの「新しいサイト」を開きましょう。
新しいサイトを開く
1.虹色の+ボタンをクリックしてください
「新しいサイト」の編集画面が表示される
無題のサイトが開かれましたね
それでは、いよいよPTAホームページを作っていきましょう。
タイトルを設定する
1.ホームページの名前を入力しましょう。
青枠部分［ページのタイトル］をクリックし、タイトルを入力します。
例）○○市立△△小学校PTA
タイトルが長い場合は［Shift］+[Enter]で、行間をつめた改行ができます。
選択中のブロックの上に表示される「編集ツールボックス」
どんなことができるかまとめました。確認してみてください。
編集ツールボックスを確認しよう
①テキストの種類（題名・見出し・小見出し・標準・文字サイズ小）を選べます。
②フォントを選べます
③テキストサイズを変更できます
④太文字にする場合にクリックします
⑤イタリック（斜体）にする場合にクリックします
⑥文字に下線を引く場合にクリックします。
⑦テキストカラーを選択できます。
⑧テキストを選択した状態でクリックするとリンクを貼ることができます。
⑨テキストの表示形式を選べます（左づめ・中央・右づめ・全幅）
⑩アイテムを消すことができます。
タイトル背景を設定する
タイトルボックスの［画像を変更］をクリックし、[アップロード] をクリックします。あらかじめパソコンに保存していた画像を選択します。
アップロードすると、文字が見やすいように、画像の色が自動補正されます。
画像が変更されていれば、成功です。
*クリックすると拡大して確認できます。
画像を挿入する
1.画面右側にあるツールボック上の[画像]ボタンをクリックする。
2.［アップロード］を選択し、あらかじめパソコンに保存していた画像を選択します
アップロードした画像は
- １クリックすると下辺に点が出現し、大きさの調整を行えます。
- クリックしたままマウスを動かすと画像を掴めます。クリックを離すと離した場所に画像を配置できます。
テキストを入力する
1. ツールボックスの[テキストボックス]をクリックします。
2．文字を入力し、①テキストの種類［標準］を選択
＊説明の小さい文字は［文字サイズ小］を選択してください。
クリック＆ドロップ
画像同様に１クリックで大きさ変更の丸マークが表示されます。レイアウトの変更もクリックしたまま移動して離すと配置されます。
空いたスペースに別のテキストボックスを配置すれば、横並びレイアウトも可能です。
見出しを作る
1.ツールボックスの[テキストボックス]をクリックします。
2.文字を入力し、テキストの種類［見出し］を選択
3.見出しのスタイルを変更します。テキストを選んだ状態で左側に表示されるパレットマークをクリックして、スタイルを選びます。
4.選んだスタイルに変更されれば成功です。
クイックメニュー
トップ画面の何もないところでダブルクリックすると[クイックメニュー]が出てきます。
応用編①：サブページを作る
トップページを作りながら基礎的な内容を学びました。次はサブページを作りながら応用的な使い方を学んでいきます。内容は以下です
応用編①の内容
- サブページを追加する
- （演習1）クリーン活動のページを作る
フォームを挿入する① - （演習2）おやじ会のページを作る
分割線（区切り線）を挿入する
プレスホルダーを挿入する
ボタンを設置する
- （演習3）申込ページを作る
ボタンにフォームを挿入する②
- （演習4）プライバシーポリシーを設定する
- （演習5）会則ページを設定する
テキストにリンクを貼る（PDF）
サブページを追加する
1.ツールボックスの［ページ］タブをクリック
2.ホームの右端に表示される［ ⁝ ］をクリック
3.［サブページを追加］をクリック
4.新しいサブページの名前を入力し、［完了］をクリック
5.新しいページができました。
広告｜AdSense
演習1．クリーン活動のページを作る
（事前準備）Googleフォーム「クリーン活動 事前準備」を作成しておきましょう。
サブページを追加するの項目を見ながらページ名「クリーン活動」でサブページを追加します。
基礎編の機能を使って写真の内容でページを作っていきましょう。
- 実際の活動内容を入力していただいてかまいません。
- 画像の準備ができていない場合はツールボックス中の［プレスホルダ］を使用します。「（演習２）おやじ会のページを作る」を参照してください。
フォームを挿入する
Googleドライブ中に保存したフォームを申込ページにに埋め込みます。
1.ツールボックス中の［フォーム］をクリックしします。
2.埋め込むフォームをクリック［挿入］をクリック
- クリーン活動 事前確認
その他の活動ページも作ってみよう
- 学習指導
- ベルマーク集計会
の活動ページを作りましょう。実際の委員会や活動のページでもかまいません。
広告｜AdSense
演習2. おやじ会のページを作る
おやじ会のページを作っていきます。基礎編の機能を使用して以下の内容を作っていきましょう。さらに分割線の挿入、ボタンの挿入、プレスホルダの挿入を説明します。
分割線（区切り線）を配置する
ツールボックス中の［分割線の追加］をクリックします。（赤線①）
追加した分割線をクリック＆ドロップで必要な場所に配置していきます。
プレスホルダを配置する
製作前の画像・YouTube・マップ・ドライブの配置スペースを確保する際に使用します。
プレスホルダをクリックし、画像同様にサイズの変更を行い、クリック＆ドロップで配置しましょう。
ボタンを配置する
（事前準備）交流会参加申し込みGoogleフォームをあらかじめ作成し、フォームのリンクを取得します。
ツールボックス中の［ボタン］（赤線③）をクリックし、
- ボタンの名前：「交流会参加申し込みフォーム」と入力
- リンク：フォームの回答者リンクを貼りつけます
ページにボタンが追加されます。追加したボタンはクリック＆ドロップで配置を行ってください。
リンクを取得する
1.Googleドライブで、リンクが必要なファイルの上で右クリック
2.［リンクの取得］をクリック
3.一般的なアクセスの項目を「制限付き」⇒「リンクを知っている全員」に変更
4.［回答者リンクのコピー］をクリック
5.［完了］をクリック
（事前準備）交流会参加申し込みフォーム・学習指導５月申込フォーム・クリーン活動 事前確認フォームを事前に作成しておきましょう。
各種申し込みをフォームで行う申込ページを作ります。
ボタンにフォームを挿入する
（演習2）で行った［ボタン］の挿入を使って
- 交流会 参加申し込み
- 学習指導 ５月申込
- クリーン活動 事前確認
を作成します。ボタンのリンクにフォームのURLを入力して有効にします。
演習4. プライバシーポリシーを設定する
プライバシーポリシーのページを作りましょう。下記を参考にプライバシーポリシーを作成しましょう。内容をコピー＆ペーストして頂いてもかまいません。打ち込むだけの内容になりますが、ホームページの体裁を整える上で重要になりますので、ぜひ作ってみてください。
■△△小学校PTAホームページ/ホームページプライバシーポリシー
https://sites.google.com/view/san-kaku-pta/%E3%83%9B%E3%83%BC%E3%83%A0/Prv?authuser=0
演習5. 会則ページを設定する
会則や規則をまとめたページを作りましょう。
会則をPDFファイルで保存し、Googleドライブにアップロードしましょう。
PDFのつくり方
Word文章を保存する際に、ファイルの種類でPDFを選択するとPDFファイルが作成できます。
＊PDFファイルにする理由は、WordやExcelの資料は端末によって表示されない場合があるからです。どの端末からも見れるようにPDFファイルで用意してください。
注意 ：保存する前に作成者の名前を確認しましょう
Googleドライブにアップロードする
1.Googleドライブを開きます
2.［新規+］をクリック
3.ファイルをアップロードをクリック
4.パソコンに保存されたＰＤＦファイルを選択
5.アップロードが完了
テキストにリンクを貼る（PDF）
1.リンクを貼りたい文字をマウスで選択
2.編集アイテムの［リンク］ボタンをクリック
3.リンクの赤枠のところに、会則ＰＤＦのリンクを貼りつける
4.［適用］をクリック
完成です。
広告｜AdSense
応用編②：全体を整える
応用編②では、サイト全体を整えます。
応用編②の内容
- 演習1 トップ画面を整える
（1）サイト内リンクを貼る
（2）ナビゲーションの表示・非表示 - 演習2 サイトを使いやすくしよう
（1）テーマの選択
（2）設定を学ぶ
（3）問い合わせページの設定
演習2-1 トップ画面を整える
サイト内リンクを貼る
画像やテキストに、サイト内リンク（サイトの中の他のページにいくためのリンク）を貼りましょう。
- クリーン朝会
- 学習指導
- ベルマーク
それぞれの画像にサイト内リンクを貼ります。
1.アイテムの上でクリック
2.［リンク］ボタンをクリック
3.リンクの枠内でクリックし、プルダウンメニューからリンクさせたいページのタイトルを選択
4.［適用］をクリック
サイト内リンクの完成です
ナビゲーションの表示・非表示
1.ツールボックスの［ページ］タブを開きます。
2.ナビゲーションで非表示にしたいページの上にカーソルを合わせます。
3.右がわの ⁝ をクリックします。
4.［ナビゲ―ションに表示しない］をクリック
この手順で
- クリーン活動
- 学習指導
- ベルマーク集計会
を、ナビゲーションの中から非表示にします。
演習2-2 サイトを使いやすくする
テーマの選択
ツールボックスの［テーマ］から、サイトのデザインの変更が可能です。好みに合わせて設定しましょう。
設定を学ぶ
設定ツール
①戻る
②すすむ
③プレビュー
④公開アドレスのリンク
⑤編集者の追加
⑥各種設定
設定ツールの⑥⚙️歯車マークをクリックすると以下のダイアログが表示されます。
移動：ナビゲーションの位置を選べます。
上か横（左）
ブランド画像：ロゴとファビコンをオリジナルのものに設定できます。
閲覧者ツール：情報アイコンとアンカーリンクの設定を変更できます
アナリティクス：Googleアナリティクスを有効にできます。
お知らせバーナー：サイトのコンテンツ最上部にお知らせを載せることができます。
それぞれのサイトに必要な設定を行ってみてください。
問い合わせページの設定
最後にお問合せページを作りましょう。今回のサンプルサイト△△小学校PTAホームページでは、直接電話番号とメールアドレスを掲載しましたが、電話番号やメールアドレスを表示したくない場合は、Googleフォームで問い合わせフォームを作ることもできます。
広告
＼そんな時はココナラ／
こまで頑張ってみたけど・・・難しい
公開設定
1.最後に、公開設定を行います。ツールボックス上の［公開］ボタンをクリックしましょう。
公開設定ダイアログが表示されます。⇓
2.まずはWebアドレスを入力しましょう。
①GoogleSiteのサブドメインではじめる場合は［ウェブアドレス］の欄に入力してください。
②カスタムドメイン（独自ドメイン）を設定する場合は
- 既に他社で購入した独自ドメインを設定する
- Googleドメインでカスタムドメインを購入する
を、選択できます。
3.「一般公開の検索エンジンに自分のサイトを表示しないようにリクエストする」にチェックを入れましょう。PTAホームページの場合に、防犯の目的で、不特定多数の目に晒さないように設定することをオススメしています。
（注意）検索エンジンに表示されなくてむ、Webアドレスが流出すると、多くの目に晒されることになります。必要に応じた対策を講じてください。
4.「公開する前に編集者が変更内容を確認する必要があります」にもチェックを入れましょう。編集前と編集後の比較ができます。
以上で、すぐできる！【GoogleSiteで作る】PTAホームページを終わります！最後までお付き合いくださりありがとうございました！
今回作ったページ
■△△小学校PTAホームページ
最後までお付き合いいただき、ありがとうございました。また次回お会いしましょう！
広告
＼そんな時はココナラ／
ここまで頑張ってみたけど・・・難しい
広告｜AdSense
