googlesite02

お役立ち記事 サービス

同窓会・忘年会・歓送迎会・飲み会のWebチラシをGoogleサイトで!出欠の確認フォームも簡単無料作成!

投稿日:2018年11月1日 更新日:

Googleサイトの新規作成画面がパソコンのブラウザから簡単に表示できるようになりました。

ブラウザのアドレスバーに

site.new

と入力するだけ。

Googleアカウントに接続していれば――Google クロームをお使いならわざわざログインしなくても――すぐさま新規作成画面が表示されます。

GoogleサイトだけでなくGoogleドキュメントなら「doc.new」、Googleスプレッドシートなら「sheet.new」、Googleフォームなら「form.new」で新規作成画面が呼び出せます。

とても使いやすくなったGoogleサイト。今回はその機能を活かして同窓会・忘年会・歓送迎会・飲み会などのWebチラシ・案内をチャチャッと無料で作成する方法をシェアします。

ホームページ作成の知識などまったく必要ないので、ぜひ活用してみてください。

 Googleアカウントをお持ちでない方へ

Googleアカウントを作成しておきましょう!

Googleオフィシャルサイトのこちらで作成できます。

「Google アカウントの作成」についての説明ページ

 

同窓会のWebチラシを作成

代表的なものとして同窓会のWeb案内の作成例を解説します。

最終的な仕上がりはこのようなイメージです。

googlesite01

下にスクロールすると、さらにこのような情報が表示されます。

googlesite04

実際の見本サイトをご覧になりたい方はこちらからどうぞ。

 

まずはgoogleサイトの新規作成画面の呼び出し

冒頭でご案内したように、ブラウザのアドレスバーに

site.new

と入力し、検索します。

するとつぎの画面が表示されます。

googlesite05

画面の主な構成要素は

中央のレイアウトプレビュー

右の編集メニュー

上部の公開(確定)の三つとなります。

公開(確定)ボタンは編集内容を反映させるためのものです。動作をチェックする際にまず公開(確定)する必要があるのでこまめにクリック使用します。

 

サイトのアドレスを入力する

新規作成画面が表示されたら、左上にサイトのドキュメント名を入力しましょう。

googlesite09

ここで入力したドキュメント名がサイトのアドレス(URL)になります。

https://sites.google.com/view/everybodyminamigaoka3c2012byyo/

緑の部分がGoogleサイト共通のアドレスで、そこにドキュメント名が固有のアドレスとして設定されます。

上の画像でレイアウトプレビュー内にドキュメント名が自動表示されますが、ここはあとで別の文字やマーク画像に変更できるのでご安心ください。

なぜ長いドキュメント名なの?

今回の使用目的は同窓会です。該当するひと以外に閲覧してほしくありません。そのためドキュメント名(URL)はあえて長くしてあります。検索サイトから検索できないように設定することが可能ですが、さらにアドレスを簡単に特定できない工夫を施すためです。ドキュメント名は30文字まで指定可能のようです。

 

タイトル(文字)を入力する

タイトルを入力します。ここで文字入力の基本操作を理解しておきましょう。

「ページのタイトル」の文字をクリックし、文言を入力します。

googlesite07

文字をクリックするとテキストボックスの上部にポッポアップ編集メニューが表示されます。

[1] 選択した文字の大きさが選べます。

googlesite06

 

[2] 「配置」。行を「左揃え」や「中央揃え」などにできます。

googlesite08

 

[3] 文字列をクリックするとほかのページが表示されるテキストリンクを設定できます。

[4] テキストボックスを削除できます。

 

背景画像を変更する

タイトルの背景に好みの画像を配置しましょう。

googlesite10

背景部分にマウスのポインターを合わせると「画像を変更」のポップアップメニューが表示されます。▼マークをクリックし「アップロード」を選択します。

パソコンのデスクトップに保存した任意の画像を選び配置することができます。

ライセンスフリーのPEXELSがおすすめ

手元によい画像がない場合は、ネット上からイメージに合う画像を探してきましょう。その際に勝手に他人の画像を利用することはできません。著作権侵害になるので注意が必要です。

IT-SORAYORIではそうした際はライセンスフリーのPEXELSから画像をダウンロードし利用するようにしています。料金無料・登録不要で著作権者の明示も不要。商業利用も可能です。

画像検索は英単語で。表示された画像一覧から好みの画像をクリックするとフリーダウンロード画面が表示されます。ダウンロードする画像のサイズは「Medium(1280×853)」もあれば十分でしょう。

https://www.pexels.com/

もう一つのボタン「画像を選択」ではGoogleサイトが提供する画像などが利用できます。

なおタイトルの白抜きの文字が見やすくなるよう、配置した画像には自動的にグレーのフィルターが掛けられます。

 

見出しのタイプを変更する

背景部分にマウスのポインターを合わせると「見出しのタイプ」のポップアップメニューが表示されます。

googlesite12

「見出しのタイプ」をクリックします。

 

googlesite11

すると四つの候補が表示されます。

「カバー」は画像と文字が全画面で表示されます。
「バナー大」と「バナー」は順に画像の上下サイズが小さくなります。
「タイトルのみ」は文字だけの表示となります。

今回は「バナー」を選択しました。

 

本文を入力する

タイトルの下に、本文を入力しましょう。

googlesite13

右の編集メニューから

[1] 「挿入」タブをクリック。

[2] 「テキストボックス」をクリック。

すると

googlesite14

タイトルと画像の下にテキストボックスが挿入されます。ここに文字を入力します。

 

googlesite15

文字列を選択し、大きさや太さ、イタリック体(斜め)、行の揃え方などが指定できます。

 

タイトルのスタイルや文字色を変える

ここでページのデザインを変更する方法をご紹介しておきます。

googlesite16

右の編集メニューの「テーマ」をクリックします。

するとテーマの候補が表示されます。

現在は「シンプル」タイプでテーマカラー(文字やボタン、背景の色)は青が選択されています。

またテーマ名の下の「フォントスタイル」をクリックすると

googlesite17

文字のスタイルが変更できます。現在は「ヘビー」を選択しています。

それぞれの候補からお好みのデザインスタイルを選んでください。いつでも変更することが可能です。

 

テキストボックスの背景色を変える

本文ができたら、つぎは「同窓会の詳細」の見出しを挿入します。ここは文字を太くするのではなく、テキストボックスに背景色を入れて目立たせるようにしてみたいと思います。

googlesite18

テキストボックスを挿入し、文字を入力したら、左の「セクションの背景」ボタンをクリックします。

 

googlesite19

「強調2」をクリックします。

 

googlesite20

これでテキストボックスに背景色が入れられました。この色の変更は前項「タイトルのスタイルや文字色を変える」で解説しています。

 

リンクボタンを作成する

同窓会会場を紹介するために「食べログ」のページにリンクを張ります。

googlesite23

このようなリンクボタンとなります。

 

googlesite22

右の編集メニュー「挿入」タブから「ボタン」を選択。

 

googlesite21

「名前」を入力し、「リンク」に「食べログ」からお店のページのURLをコピー&ペーストします。

 

地図を挿入する

Googleマップからお店の地図を挿入できます。

右の編集メニュー「挿入」タブから「地図」を選択。以降画面の指示に従い、お店の所在地を入力します。地図に目印を立てると親切です。

googlesite24

Googleマップにアラートが表示される?

地図を挿入する操作で「このページではGoogleマップが正しく読み込まれませんでした」や「For development purposes only」の文言が表示される場合があります。これは無視してかまいません。そのまま設定しても正しく表示されます。

 

テキストボックスやパーツの順番を入れ替える

テキストボックスやパーツの上下の表示順を自由に入れ替えることができます。

googlesite25

左に表示される点々マークをドラッグします。

 

出欠フォームを挿入する

ここで同窓会への出欠をたずねるフォームの挿入方法を解説します。

念のためここまで作成したGoogleサイトは「公開(確定)」ボタンをクリックし保存しておきましょう。またURLを忘れないためにブラウザにブックマークするか、メモアプリにURLをコピー&ペーストしておくことをおすすめします。

まずは

ブラウザのアドレスバーに

form.new

と入力し、検索します。

するとつぎの画面が表示されます。

googlesite26

 

タイトルと説明を入力

googlesite27

「無題のフォーム」にタイトル、「フォームの説明」に説明を入力。

 

名前欄を挿入

つぎにお名前を入力してもらう欄を作成します。

googlesite29

デフォルトでは「ラジオボタン」になっているので右の「▼」からプルダウンメニューを表示。

 

googlesite28

[1] デフォルトでは質問がラジオボタンの「選択肢」となっています。
[2] 右のプルダウンメニューから「記述式」を選びます。

 

googlesite30

[1] タイトルと説明を入力。
[2] 「必須」ボタンをONにしておきましょう。フォームに名前を入力しないと送信できなくします。

 

質問項目を追加する

googlesite33

質問項目の追加は右の「+」マークをクリックします。

 

メールアドレス欄を挿入

つぎにメールアドレスを入力してもらう欄を作成します。

googlesite31

[1] 「名前」と同様に「記述式」を選び、タイトルを入力。
[2] 「メールアドレスの収集設定を有効にする」を選択しておきます。

これも「必須」ボタンをONにしておきましょう。

質問項目の移動について

Googleフォームでは、ほかの質問項目は点々マーク(左または上部)をドラッグすることで上下に移動できます。ただし「メールアドレスの収集設定を有効にする」を選択した「メールアドレス」は質問の最上部に自動で固定されるようです。これは個人情報保護法の趣旨に則ったものと思われます。

 

出欠のラジオボタン

出欠の有無を問う欄を作成します。

googlesite32

[1] 「ラジオボタン」を選びます。
[2] タイトルを入力。
[3] 「選択肢」に「出席します」「欠席します」を入力します。

これも「必須」ボタンをONにしておきましょう。

 

フォーム送信時のアクションを設定

回答者がフォームを送信した際、確かに送信できたことを知らせるアクションを設定します。

googlesite34

画面右上の「設定」ボタンをクリック。

 

googlesite35

まず「全般」タブで「回答のコピーを送信」にチェックを入れます。

右下の「保存」で確定。

これで回答者が送信すると入力したメールアドレスに回答内容のコピーが送信されるようになります。自分がどのような回答をしたか確認・保存できる仕組みです。

 

googlesite36

つぎに「プレゼンテーション」タブをクリックし「確認メッセージ」を入力します。

じつはこの設定をしないと、回答者は送信した後、単に白い画面が表示され戸惑うことになります。

メッセージを表示させ、回答が正しく送信されたことを知らせてあげましょう。

 

フォームのデザインスタイルを設定

各質問項目の設定が完了したら、最後にフォームのデザインスタイルをお好みのものに設定しましょう。

たとえばフォームのデフォルトのキーカラーは紫になっていますが、Googleサイトで作成中の同窓会Webチラシは青が基調です。ここはフォームのキーカラーも青に統一するとすっきりしたデザインになります。

googlesite39

[1] 画面上部の「テーマをカスタマイズ」ボタンをクリックします。
[2] 右に「テーマオプション」メニューが表示されます。背景を画像にしたり、色を選択したり、背景色の濃度を変えたり、フォントスタイルを変更することができます。

 

フォームの自動保存を確認

googlesite38

最後に画面上中央の自動保存のメッセージを確認します。

「変更内容をすべてドライブに保存しました」と表示されていればフォームの作成・保存は完了です。

「ドライブ」って何?

上の画像での「ドライブ」はGoogleドライブのことをさします。Googleアカウントを作成した時点で自動的にGoogleドライブも用意されているので、ここでの設定は不要です。

 

Googleサイトに戻る(もしもサイトのURLを忘れたら)

フォームの作成が終了したら、Googleサイトに戻ります。

ここでもしも作成したGoogleサイトのURLを保存するのを忘れた場合の対処法をご紹介しておきます。

まずGoogleアカウントにつながっていることを確認(Googleクロームなら確認不要)し、「Googleドライブ」を検索。トップページにアクセスします。

googlesite40

「Googleドライブにアクセス」をクリック。

 

googlesite41

「マイドライブ」が表示され「クイックアクセス」に作成したGoogleサイトが保存されているのが確認できます。これをダブルクリックすれば開けます。

なおGoogleフォームも保存されているのでここから編集することもできます。

 

Googleサイトにフォームを挿入する

Googleサイトに戻ったら、続きの作業を行いましょう。

フォームを挿入します。

 

右の編集メニューで「挿入」タブの「フォーム」をクリックします。

するとさきほど作成したフォームが表示されます。これを選択します。

googlesite42

これでフォームの挿入は完了です。

フォームの内容を変更したい

googlesite43

フォーム部分をクリックし、左上に表示された「新しいタブを開く」ボタンをクリックします。

するとGoogleフォームが開くので右上のペンボタンをクリックします。

前述のGoogleドライブからアクセスすることもできます。

 

新しいページを作る:名前とカスタムパス

ホームのページがほぼ完成したので新しいページを作成してみましょう。

当日の様子を撮影し、来れなかった方たちにシェアするページを作成するとよろこばれるかもしれません。

googlesite45

 

まず編集メニューの[1]「ページ」タブから[2]「ホーム」にマウスオーバーし右に表示される3点マークをクリックします。

 

googlesite46

表示されたプルダウンメニューから「サブページを追加」を選択します。

 

「新しいサブページ」の設定画面が表示されます。

googlesite47

「名前」と「カスタムパス(「詳細」をクリックすると項目が表示されます)」を入力し「完了」をクリックします。

「カスタムパス」はURLの一部になるものなので英語表記にします。

googlesite48

ホームの下にサブページが作成できました。

この状態での「当日の写真(工事中)」のURLは

https://sites.google.com/view/everybodyminamigaoka3c2012byyo/ホーム/photos/

となっています。

「ホーム」が日本語になっているので英語表記に変えましょう。

「ホーム」にマウスオーバーし右に表示される3点マークをクリックします。プラウダウンメニューから「プロパティ」を選択します。

googlesite50

あとは「新しいサブページ」の設定と同様の方法で「詳細」の「カスタムパス」の欄に「home」と入力します。

これでURLが

https://sites.google.com/view/everybodyminamigaoka3c2012byyo/home/photos/

と変更できます。

 

サブページの階層を上げる

作成したサブページはデフォルトでは「ホーム」の下の階層になりますが、「ホーム」と並列した位置の上の階層に移動させることもできます。

googlesite49

該当するサブページを下にドラッグするだけで完了です。

 

googlesite51

「ホーム」と同じ階層に移動しました。

 

googlesite52

メニューも「ホーム」の横に並列で表示されます

 

新しいページを作る:コンテンツ

新しいページの名前とカスタムパスの設定が完了したら、コンテンツの内容を作成しましょう。

「当日の写真」ページなので写真が中心となります。

メインの写真

集合写真を最上位に設置してみましょう。

googlesite53

 

[1] 編集メニューの「挿入」タブから「画像」をクリック。「アップロード」を選択し、デスクトップから任意の写真をアップできます。

[2] 目的の画像が配置されます。サイズや位置はドラッグすることで自由に変更できます。

 

そのほかの写真

つぎにそのほかの写真を配置してみます。

googlesite54

[1] 編集メニューの「挿入」タブから「レイアウト」項目の画像配置パターンを選択します。

[2] 二つの画像とタイトル、キャプションが挿入できるパターンを選んでみました。中央の「+」マークをクリックすると写真をアップロードできます。

複数の画像配置パターンが用意されているのでいろいろ変化をつけながら、写真点数を増やしていくとたのしいページになるかもしれません。

 

フッターを作成する

フッターとは複数のページを作成した際に、どのページにも共通で表示される最下段のコンテンツです。

ここにもメニュー同様のボタンを配置しておくと親切です。

googlesite55

下段にポインターを移動すると「フッターを追加」のボタンが表示されるのでクリックします。

 

googlesite57

編集メニューの「挿入」タブから「ボタン」をクリック。

「名前」を入力します。

「リンク」表示の下をクリックすると「このサイト」のホーム以外のページ候補が表示されます。ここから目的のページを選択します。

ボタンが任意の場所に挿入されるのでフッターにドラッグします。

 

googlesite56

するとフッター内に移動します。フッターに背景色が設定されている場合、ボタンは自動で白地に変化します。

 

Webへの公開条件を設定する

作成したサイトの目的によって公開条件を設定することができます。

googlesite58

画面最上部の「公開(確定)」ボタンの横にある「▼」ボタンをクリック。

プルダウンメニューから「公開設定」を選択。

 

googlesite59

[1] カスタムURL ドメインを取得していれば、それをURLに指定できます。

[2] サイトを閲覧できるユーザー メールアドレスがわかっているひとだけに公開したい場合は、それぞれを招待することで限定公開に変更できます。また編集できる権利を与えることができます。

[3] 検索設定 検索エンジンで検索できないように設定することができます。今回の同窓会Webチラシは同窓生に限定されるものなので、ここにチェックを入れておくことをおすすめします。

 

最後に画面最上部の「公開(確定)」ボタンをクリックして、Googleサイトの作成は完了です。

 

さまざまなWebチラシやホームページに!

Googleサイトはとにかくブラウザでsite.newと検索するだけで、すぐさま新規作成画面が表示されるのが便利。

しかもパターンを選択するだけで、簡単にシンプルでわかりやすいサイトが作成できてしまいます。

ホームページ作成サイトやWordPressなどもよいですが、Googleサイトが最も手軽なWebコンテンツ作成へのアプローチ方法であることは間違いないでしょう。

今回は同窓会のWebチラシを例にしましたが、さまざまなWebチラシやホームページの作成に活用できます。

たとえばイベントやライブの開催告知。たとえばショップのホームページ。たとえばサークルやクラスの掲示板。

たとえば子どもの写真を集めたポートフォリオサイトを作成し、おばあちゃんやおじいちゃん、親類に限定して公開する。

誰もがマイサイトを持てるGoogleサイト。ぜひ活用してください。

 

お役立ち記事

171106twittertsuchi2 1
pdfedit 2
Twitterスパムアイキャッチ 3
photo_gallery10 4
spotify_1807 5
ipodアイキャッチ 6
yahoo_auc_eye 7
プリンター250 8
Evernote新機能01 9
無線LAN04-2 10
zenfone_filedelete46 11
kensaku05 12
googlesite02 13
spotify_sf_size01 14

-お役立ち記事, サービス
-,

Copyright© IT-SORAYORI , 2018 All Rights Reserved.