Google ユーザーなら無料で利用できる Web サイトの制作サービス ・ Google サイト。Web の専門知識がない人でも、とっても簡単にホームページを作成することができるツールです。この記事ではオンラインのイベントページを実際に作成してみたので、使い方をゼロから知りたい人はぜひ参考にしてみてくださいね。
まずは、Google サイトとはどのようなサービスなのか紹介します。
Google サイトとは、Google が提供するシンプルな Web サイト作成ツールです。HTML やプログラミング、デザインなどの専門知識がない人でもサクっと簡単にホームページを作成できるので社内ポータルや、イベント用などのサイト作成に最適です。また、Google サイトで作成したページはチーム内で共同編集ができるので、チームでの運用がしやすいところも特徴です。作成したサイトはパソコンからスマートフォンまで、あらゆる画面に合わせてレスポンシブに表示されます。
Google サイトを利用するには、Google Workspace または Google のアカウントを取得する必要があります。Google Workspace または Google ユーザーであれば特別な手続きは不要で、無料で利用開始できます。
それでは早速 Google サイトでオンラインイベントのホームページを作ってみましょう。今回は、このようなイベントページを作成してみました。このサイトは、Google ドキュメントなどの使い方に慣れたユーザーであれば 1 時間程度で作成が可能です。どのように作成するのか、使い方を説明していきます。
まず、Google Workspace または Google に登録しているメールアドレスにログインして、Google サイトを開きます。Google サイトを開くには、アプリランチャーから 「サイト」 を選択するか、Google サイトに直接アクセスします。
次に、用意されているテンプレートの中からイメージに合うものを選択します。
今回は、イベントページを作成するので [イベント] というテンプレートを選択しました。
テンプレートが決まったら、テーマを決定します。テーマを変えると全体のトーンが変化するので、イベントのイメージに合うものを選ぶようにしましょう。
テーマは、右側のメニューの [テーマ] から設定できます。今回はシックなトーンの 「ディプロマット」 を選択しました。テーマは後からでも変更することが可能です。
テンプレートとテーマが決まったら、サイトに掲載するコンテンツを書き出します。あらかじめ簡易的なワイヤーフレームを作成することをお勧めします。
今回は、事前にこのようなワイヤーフレームを作成しました。
それでは、いよいよコンテンツをテンプレートに入れていきましょう。まずは、ページのタイトルを入れます。ページのタイトルは後からでも変えられるので、端的にわかりやすいものを入れておきます。
イベントのテンプレートにはデフォルトで 「ホーム」 「スケジュール」 「スピーカー」 「会場」 というナビゲーションメニューが設定されていますが、入れるコンテンツに合わせて内容を変更できます。
今回は 「ホーム」 「スピーカー」 「申し込み」 というメニューを作成します。やり方を見ていきましょう。
【メニューを編集する】
◆ホーム(一番上のメニュー)の場合は下記の操作が行えます。
◆ホーム以外のメニューは下記の操作が行えます。
【メニューを追加する】
新しくメニューを作成する場合は + アイコンをクリックします。新しいページというダイアログが表示されるので、メニューに表示させるテキストを入力しましょう。
【メニューの順序を変更する】
表示させるメニューの順番を変更したい場合は、メニューのテキストをドラッグ&ドロップすることで簡単に順序が変えられます。また、他のメニューの上にテキストをドラッグ&ドロップすると、ドラッグしたページをサブページにすることが可能です。
【メニューをハンバーガーメニューに変える】
Google サイトではデフォルトは横並びで表示されるメニューですが、ハンバーガーメニューに変えることも可能です。
メニューがハンバーガーメニューに変更されました。
新しくテキストを入れる際は、現在ダミーでテキストが入っている部分を直接差し替えていきます。
文字を入れたくない場合は文字が入っているテキストボックスを選択した上で削除アイコン(ゴミ箱マーク)をクリックすれば削除できます。
Google サイトにはデフォルトでダミーのキービジュアル(メインビジュアル)が入っていますが、下記の手順で用意した画像を差し替えることができます。
画像が変更されました。画像に合わせて、文字の色が自動的に見やすい色に変わりました。
キービジュアルとナビゲーションメニューの設定が終わったらトップページを編集します。トップページはこのような仕様のものを作成していきます。
【テキストを挿入する】
トップページにイベントの概要を入れていきます。テキストを入れる際は右メニューの挿入→テキストボックスをクリックします。
文字のサイズはテキストボックスの上のプルダウンから 「題名」 「標準テキスト」 「大見出し」 「小見出し」 「小」 を選択することで変更が可能です。他にも太文字、斜体、文字揃えなども選択できます。Google ドキュメントと近い感覚で操作してみましょう。
【背景の色を変える】
背景の色を変えるには、左側に表示されるパレットのアイコンをクリックします。
背景の色味が変更されました。
【画像を挿入する】
続いて、イベントのイメージ画像を挿入していきます。
画像が反映されました。
【申し込みフォームをリンクする】
イベント用のテンプレートはデフォルトで Google フォームにリンクするボタンが入っています。参加申込フォームを作成したら、URL をリンクさせておきましょう。
申し込みフォームのリンク編集方法
今回は 「参加申し込みはこちら」 としました。
【YouTube を埋め込む】
Google サイトでは、YouTube を埋め込んでサムネイルを表示させることが可能です。
YouTube が埋め込まれました。
【コンテンツを表示させる順番を移動させる】
コンテンツの順番を変えたい場合は、セクションにマウスオンをして、マウスを左側のアイコンに乗せてドラッグ&ドロップすれば位置の入れ替えを簡単に行えます。
【不要なコンテンツを削除する】
テンプレートに入っている不要なコンテンツを削除したい時は、セクションにマウスオンをして、左側に表示される削除アイコン(ゴミ箱マーク)をクリックします。
続いて、メニューの遷移先となるサブページを作成します。
カスタムパスという機能を利用すると、各ページの URL をカスタマイズできます。
例えばhttps://XXXX(ドメイン名)/〇〇(任意のイベントURL)/top のようの末尾のURLを好きな文字列(英数字のみ)に指定できます。
※カスタムパスは Google Workspace ユーザーのみ利用できます。
セミナーの参加者の申込フォームを作成するのであれば、Google フォームとの連携がおすすめです。ここでは Google フォームを使った申込フォームの作成方法から、サイトへのフォームの埋め込み方法を説明します。入れる項目については、この記事を参考にして適宜追加したり削除したりしてみてください。
今回は手軽に申込フォームが作成できる、テンプレートギャラリーを使用します。
テンプレートには、参加申込書でよく使われる項目があらかじめ入っています。今回どのような項目を入れるか決定したら、内容をカスタマイズしていきましょう。
【テキストを変更する】
テキストを変更する場合は、既存のテキストをクリックして直打ちで編集できます。
【新しい項目を追加する】
質問項目を追加する場合は、Google フォーム右側に表示される+アイコンをクリックします。
回答の方式は基本的に下記から選択します。
【回答必須の質問を選択する】
回答者に必ず回答してほしい質問は、 「必須」 項目をオンにします。
プレビュー確認すると、質問の右に赤いマークが付いています。このマークが付いている質問は必須回答になります。
【質問を削除する】
質問項目を追加する場合は、削除する質問のセクションをクリックして、下側に表示される削除(ゴミ箱)アイコンをさらにクリックします。
【質問の順番を変える】
質問の順番は簡単に変更できます。
削除する質問のセクションをクリックして、上側に表示されるアイコンにマウスを乗せてドラッグ&ドロップします。
Google フォームのビジュアルを変更したい場合は、右上のカスタマイズアイコン(パレットのマーク)をクリックします。
申込フォームが作成できたら、最後に設定で回答可能なユーザーを設定します。
Google Workspace のアカウントで作成した場合、デフォルトの状態では同じドメインのユーザーに限定されています。
だれでも回答できるようにするためには右上の設定アイコン(歯車マーク)をクリックして、 「ログインが必要」 の下のチェックボックスを外して、保存をクリックしましょう。
申込フォームが公開できるようになったら、Google サイトに埋め込みます。リンクさせるだけでも OK ですが今回は申込フォームより目立たせるためにページに埋め込みを行います。
Google フォームがきれいに埋め込まれました。
Google フォームが公開されて申込が始まったら、どれだけ申込が入ってるか確認を行います。
確認方法は下記2つの方法があります。
【Google フォーム上で確認する場合】
Google フォームの 「回答」 タブをクリックすると、申込一覧が表示されます。
【スプレッドシートで確認する場合】
回答者が Google フォームから記入した回答はスプレッドシートに自動的に書き出されます。スプレッドシートから内容を確認するには下記の手順で行います。
スプレッドシートが作成されました。作成されたスプレッドシートは Google ドライブに保存されます。
コンテンツが完成したら、サイトを公開しましょう。
Google サイトは下記の手順で公開します。
ウェブアドレス → 任意の URL を設定します。セミナーの内容に沿った URL を設定しましょう。
サイトを閲覧できるユーザーはデフォルトでは同じ企業のユーザーに限定されています。一般公開するためには、管理 → リンク → 公開済みサイト → 公開に設定します。この設定にすれば誰でもインターネット上で作成したサイトを閲覧できるようになります。
※制限付きにすれば、追加された Google ユーザーのみ閲覧が可能になります。
設定が終わったら 「完了」 → 「公開」 を手順に沿ってクリックします。
公開を停止するには、右上の 「公開」 ボタンのプルダウンをクリックして 「公開を停止」 をクリックします。
自分以外のユーザーを共同編集者に割り当てたい場合は下記の手順で行います。
ホームページの作成と聞くとハードルが高いように感じる人も多いかもしれませんが、Google サイトならドキュメントを編集するような感覚でホームページ制作ができます。
今回はオンラインセミナーのページを作成しましたが、お店のホームページやポートフォリオサイトも手軽に作成可能。
Google サイトで、はじめてのホームページ制作にチャレンジしてみましょう。
(注意)
※ Google サイトの新規開設は新バージョンしか選択できません。
下記のスケジュールで 「以前の Google サイト」 はサービスを終了します。