安否確認にも役立つ災害情報サイトを作る（その1）

G Suiteの登録と初期設定が完了したところで、今回からはいよいよ実際の社内ポータル作成手順を解説していこう。HTMLに関する知識がなくても簡単にWebサイトを構築できるので、皆さんも記事を見ながらぜひ一緒に取り組んでいただきたい。

なお、社内ポータルの作成の中心となるGoogleサイトでは、2018年3月現在で「新しいGoogleサイト」と「以前のGoogleサイト」の2種類が選べるようになっているが、本連載では両方の手順を順番に紹介していく。今後ナビゲーションが統一される可能性もあるので、その点だけご注意いただきたい。

万が一の際に役立つ災害情報サイト

本連載で解説のメインとなる「Googleサイト」は、「Googleカレンダー」や「Googleドキュメント」など連携する各種アプリケーションの組み合わせにより、HTMLに関する知識がなくても簡単にWebサイトを構築することができるツールだ。今回はまず手始めに、各種情報配信や安否確認などが行える災害情報サイトを作ってみたい。 日本では近年、2011年の「東北地方太平洋沖地震（東日本大震災）」に代表される大規模な地震・津波、さらには台風や大雪など、さまざまな自然災害が発生している。そこで企業では、従業員およびその家族、周辺住民の生命を守り、なおかつビジネス面での迅速な復旧を行うためにも、日頃から災害に関する備えが必要不可欠といえる。その一環として、各種情報配信や安否確認などが行える災害情報サイトは非常に有効。また、こうした災害情報サイトの作成経験は、パンデミック対策などにも流用することができる。

基本情報の入力やテーマ設定を行う

それでは実際に、G Suiteで災害情報サイトを作成していこう。まずはG Suite管理コンソールを開き、右上の「Googleアプリ」アイコンから「サイト」をクリックする。左上の「作成」からは、前述の通り「新しいGoogleサイトを使用」と「以前のGoogleサイトを使用」の2種類が選べるようになっているが、今回は最初に「新しいGoogleサイト」での作成方法を紹介しよう。 Googleサイトが開いたら、サイト名やページタイトルなどの基本情報を入力。あとはテーマを選択したり、災害情報サイトとして必要なものを組み合わせていけばよい。ここでは最初の手順として、基本情報の入力とテーマ設定を行ってみよう。

• 

  Googleサイトを利用するには、まずG Suiteの管理コンソールにアクセス。右上の「Googleアプリ」から「サイト」をクリックする

• 

  左上の「作成」から「新しいGoogleサイトを使用」をクリック

• 

  左上にある「無題のサイト」にサイト名を、「ページのタイトル」にページタイトルを入力する

• 

  タイトル部分はオンマウスで「画像を変更」と「見出しのタイプ」が表示される。見出しのタイプは「バナー（大）/バナー/タイトルのみ」が選択できる。今回はデフォルトの「バナー」を使用した

• 

  テーマの設定は、右上の「テーマ」から行える。テーマは「シンプル/アリストテレス/ディプロマット/ビジョン/レベル/インプレッション」の6種類で、それぞれフォントスタイルとアクセントカラーが選択可能。この中から、今回はディプロマットを選択してみた

• 

  ヘッダー部分のオンマウスで表示される「ロゴを追加」からは、企業やブランドのロゴを追加できる

• 

  ロゴの背景色選択に加えて、ワンクリックでテーマにロゴの色を反映することもできる

テキストボックスで「お知らせ」を作成する

基本情報の入力を終えたら、テキストボックスで社員に対する「お知らせ」を作成する。右上の「挿入」から「テキストボックス」をクリックすると、ページタイトルの下部にテキストボックスが表示される。あとは「お知らせ」と入力した文字を指定し、スタイルを「見出し」に変更。「箇条書き」をクリックして必要な情報を入力すれば、簡単にお知らせが作成できる。 なお、テキストボックスのサイズは、左右に表示された青い丸印をドラッグすることで変更が可能。テキストボックス自体の位置についても、ドラッグ＆ドロップで自由に入れ替えられる。フォントサイズは「タイトル/見出し/小見出し/標準テキスト」の4種類から選択でき、「左揃え/右揃え/中央揃え」などの配置、「番号付きリスト」と「箇条書き」、リンクの挿入、標準テキストの場合は「ボールド/斜体」による装飾も可能だ。

• 

  右上の「挿入」から「テキストボックス」をクリックすると、ページタイトルの下部にテキストボックスが表示される

• 

  スタイルや装飾機能を使いながら、お知らせ欄を仕上げていく。このようにリンクの挿入も簡単に行える

災害時避難場所の地図を表示する

続いては、お知らせの右側に災害時避難場所の地図を表示してみよう。Googleサイトでは、G Suiteの各種アプリケーションを簡単に埋め込めるが、この災害避難場所の表示もGoogleマップを利用したものだ。実際に操作してもらうと分かりやすいが、「新しいGoogleサイト」は「以前のGoogleサイト」と比べて、各オブジェクトの移動やサイズ変更がマウス操作だけで簡単に行えるようになっている。

• 

  右上の「挿入」から「地図」をクリック

• 

  地図上で目的地を指定し「選択」をクリック。この際、縮尺もサイトでの表示に反映されるので、何度か試しながら調整するとよいだろう

• 

  テキストボックスの右側が空くようにドラッグ＆ドロップでサイズを調整する

• 

  地図をドラッグ＆ドロップでテキストボックスの右側へ移動する

• 

  同様の方法で、地図上部に「災害時緊急避難場所」を入力したテキストボックスを移動し、全体のサイズを整える

Webサイトを埋め込み表示する

災害時避難場所が表示できたら、防災に役立つ情報としてGoogleが提供する「防災マップ」をサイト上に埋め込んでみよう。Googleサイトでは、簡単な操作でさまざまなWebサイトを埋め込み表示することが可能。表示方法についても、Webサイトのページを動的に更新しながら表示する「ページ全体」と、Webサイトの静的な説明と一緒にリンクを表示する「プレビュー」の2種類から選択できる。

• 

  右上の「挿入」から「分割線を追加」をクリックすると、分割線が表示される。コンテンツ内容を区切りたい場合に便利だ。続いて「挿入」から「埋め込み」をクリック

• 

  埋め込み対象のURLを貼り付けると、「ページ全体」と「プレビュー」の選択肢が表示される。今回は「ページ全体」を選んで「挿入」をクリック

• 

  これで「防災マップ」が表示された。必要に応じてサイズを調整しよう

今回は災害情報サイト作成を通じて、Googleサイトの基本的な使い方から地図やWEBサイトの埋め込み表示などを解説した。それでは次回も引き続き、安否確認用のフォームやリストの作成方法などを紹介していこう。