始める人向けマニュアル

このページは、これからGoogleサイトを使い始める人に向けた情報を提供しています。

クラウド型CMSの中でも最も簡単に利用できるのが、Google サイトです。 (2021年4月）

Google サイト

利用するためには、グルーグルのアカウントが必要である点とブラウザとしてグルーグルクロームかファイアーフォックスのどちらかが必要になります。（インターネットエクスプローラーやEdgeなどからは利用＝作成できない）

グルーグルドライブと連動し、グルーグルの他のサービスとの連携が魅力です。また、最近はスマホでの閲覧を考慮してレシポンシブル対応が望まれますが、グルーグルサイトではタブレットやスマホモードでのプレビューも可能になっています。

共同で編集作業を行うのもグルーグルドライブと同様に簡単です。

Google サイトを始めるには

Google のサービスメニューにアクセス、Google サイトのアイコンをクリックします。

https://about.google/intl/ja/products/?tab=wh

グルーグルのアカウントが必要です。お持ちでない場合は事前に取得しておく必要があります。

Google サイトをクリックし、

Googleアカウントでログイン

ログインすると下記のサイトが表示されます。

「新しいサイトを作成」で新規のサイトを作成することになりますが、いくつかのテンプレートが用意されています。

どれかのテンプレートを開いて見ると様子がわかりますので、一度どれかを開いて見てください。

下図はイベントのテンプレートです。

タイトル（見出し）エリアと下に掲載していくコンテンツエリアが表示されています。右側に作成していく操作メニューエリアの表示されます。サイトの構成はこの３つのエリアです。

タイトル部分の左上にこのサイト（ホームページ）の名称が表示され、右上には、メニューが表示されます。

新規作成

順番に作業過程を見ていきましょう。

新規作成すると右図のようにタイトルエリアと操作メニューエリアだけの表示なります。まずは、タイトル＝ホームページの名称を入力します。入力枠の左上の鉛筆マークか枠内をクリックすると入力できます。

枠左右をドラッグすると枠の拡大縮小ができます。入力状態では、左図のように上部に文字調整メニューが表示されます。

左からフォントの種類・大きさ・太字・斜字・下線字・色・ハイパーリンク・配置（左右・中央）、「･･･」は行間などの設定です。

左下の「見出しのタイプ」をクリックするとタイトルエリアサイズなどの変更ができます。「タイトルのみ」がもっと狭く、「バナー」・「バナー大」・「カバー」の順に大きくなります。バナー・カバーの意味は背景と考えてください。見出しタイプ横の画像の変更をクリックすると、アップロード（パソコン内やグルーグルフォトやドライブから）するか画像を選択で用意されているいくつかの背景画像を使うことができます。これについての詳細は、活用編に記載する予定です。

タイトルを入力

見出しタイプを「カバー」、画像を選択で適当なものを入れました。

左上のタイトルも入れておきます。これは全てページで表示されるタイトルになります。

右下の赤丸２か所は、左が画像の明るさ調整と右や画像の位置調整（画像のどの部分の表示させるか）です。

コンテンツエリア

文字や画像などで構成していくコンテンツエリアの横枠は12分割までできる構成になっています。（下図）このような色見本ぐらいには使えますが、次図の6分割でなんとかで、実際は4分割以下ぐらいまでが表現しやすい・見やすいと思われます。

縦のサイズは自由に設定が可能です。

挿入メニュー

ここからは、いよいよコンテンツを作成していきます。

右図の操作メニューを利用します。

「挿入」・「ページ」・「テーマ」の３つのタブ（メニュー）があります。

「テーマ」は背景の配色設定、「ページ」はページの追加と構造の調整（タイトルに表示されるメニューのツリー構造）です。

コンテンツを入力するのが「挿入」メニューです。

上部にある「テキストボックス」と「画像」使うのが基本操作です。テキストボックスで文字を入力し、画像をアップロードして挿入する。パワーポイントと殆ど同様の作業です。

テキストの挿入

「テキストボックス」クリックするとコンテンツエリアにテキストボックスが作られます。ボックスの左右の「・」をドラッグすることで枠幅調整ができます。上下の調整は自動で広がります。

ボックス上部にタイトルと同様のフォントや配置などの調整ボックスが出ています。これを使ってフォントの種類・サイズ・色等と左右の位置や段落と必要に応じて、「･･･」メニューの行間やインデントの調整していきます。（詳細は下図）

画像の挿入

画像をクリックすると、「アップロード」か「選択」が表示されます。「選択」とはgoogleドライブ内からの選択と言うことです。予めgoogleドライブやフォトに必要な画像を入れていると、こちらから利用できます。「アップロード」をクリックすると自分のＰＣのフォルダーが表示されます。画像のあるフォルダーからファイルを指定してアップロードします。

アップロードすると右図のような画面で、上部に調整メニューが一緒に表示されます。左から「切り抜き」・「アンクロップ」・「リンク」・「削除」・「その他」です。現時点での私の経験では、「切り抜き」が名前のイメージと違い、思うように切り抜きが難しいと考えいます。（動作がおかしい）「アンクロップ」はここでは、切り抜きを元にもどるためのようですが、意味がありません。

画像は挿入前に調整しておく必要があります。

画像操作で多いのが、サイズ調整です。５つの「・」マーク中、左右下の「・」をドラッグして拡大縮小調整します。この時にシフトボタンを押しながらクリックすると画像全体が調整できます。シフトボタンを使わないと画像一部が欠けてしまいます。

画像の調整機能はまだまだ問題があるようです。今後の機能アップ改良に期待するところです。

画像のコピペ

googleサイトをお勧めできるポイントが画像のコピペ挿入です。

手元のパソコン内の画像のあるフォルダーを開いて必要なものをドラッグするか、Windowsのショートカット（ctrl+ｃ）でコピーし、Googleサイトの編集画面に貼り付け（Ctrl+ｖ）で画像を挿入することができます。

Windowsの一時記憶（クリップボード）にあるものを貼り付けることになるので、別ソフトを起動し画像を編集しコピー、又はワードやパワーポイント内の画像をコピーして、Googleサイト内で貼り付けることも可能です。

ちょっとした画像をいちいちアップロードしてから挿入は大変です。この機能が非常に便利であり、Googleサイトを活用する意味の大きなところではと考えております。

コンテンツ（テキストや画像など）の位置調整

コンテンツ（テキストボックスや画像など）が入れば、それぞれをドラッグして配置を調整します。

個々のコンテンツが、行内に独立配置か、上下左右に一体化配置（グループ化）かの調整です。

挿入メニューにあるコンテンツブロックがイメージです。

テキストボックスと画像をそれぞれ行全体として独立配置する、行内に左右に配置する、複数のテキストボックス・画像の上下左右に一体化（グループ化）するかになりますす。

ただし、位置やサイズ調整は大雑把なもので思い通りのサイズや位置に調整はできないと考えてください。

テキストボックスと画像とを重ねる、画像同士を重なることも出来ません。これも少し、不便ですが！

これらの点も機能アップで改良を期待しますが、他のCMSでもこのようなことは起こります。他に比べ、アバウト過ぎる点でありますが、その分作り方が簡単です。

コンテンツブロックから挿入する方法もありますが、思いどおりのサイズ調整が「難しい」、「出来ない」点があり。テキストボックスと画像を挿入して配置調整していく練習を繰り返し、慣れることが早道だと思います。

シンプルな位置調整がベターです。

パソコンで見る場合は、複雑なレイアウトにしても表示できます。しかし、パソコン上で左右配置の場合でも、スマホで見ると、テキストと画像は上下配置で表示されることが多い。Googleサイトでは、プレビューでスマホ形式を見ることができます。

レスポンシブルなページ作成を考えると、テキストと画像は上下配置のシンプルな構造がベターです。上下の一体化（グループ化）での編集が、簡単であり、ベターな方法と思います。

その他の挿入メニュー

挿入メニュー下欄にあるメニューの中で役立つものを紹介します。（右図）

折りたたみ可能なテキストは、

折りたたみ可能なテキストをクリックすると、２段になったのテキストが作成されます。上段は常時表示、下段は上段をクリック時に表示される仕組みです。このテキストボックでは、カーソルが当たるとマウスポインターが👉マークになり、クリックすると折りたたみされている下段が展開表示されます。

なお、上端枠右上に「V」マークが表示され、「展開する」が表示、展開後はマークが「^」となり、「折りたたむ」が表示されます。上段の下には横線が表示されます。

この先の「画像カルーセルは」の部分がこの設定をしています。

実際の例としては、目次の展開例があります。

https://sites.google.com/view/hirasen-databank/dantaidata/dantaidata50?authuser=0

目次は、

目次は便利な機能です。目次をクリックするとページトップのタイトル下に目次枠（テキストボックス）が作成されます。ページ内のテキストボックスで目次としたい文字列を文字編集メニュー左端の「標準テキスト」から「見出し」にすることで、目次枠にその文字列が表示され、その位置へのリンクも設定されます。後から挿入したテキストボックスでも、目次欄には順序が適切に反映されます。「小見出し」とすれば、見出しの下にインデントがついた目次となります。

画像カルーセルは、

Googleサイトの目玉かもしれません。ホームページのトップページタイトルでよく使われている画像のスライドショー機能です。（この枠は「画像カルーセル」の例です。この枠部分をクリックすると説明が表示されます。）

画像カルーセルをクリックすると下図の画像挿入画面になります。「+」をクリックして「画像を選択」かアップロードします。画像が横スライドし次の画像を表示する機能なので、最低2枚以上の画像が必要です。右上の設定メニューをクリックし、4項目の設定を行います。「点を表示」とはスライド進捗状況の表示です。「自動再生」をチェックし「再生速度」を調整します。「説明」は必要の応じて設定します。全ての設定できれば、右下の挿入をクリックすると出来上がります。

ボタンは、

ボタンは、ページ移動やリンクのための背景色のある文字枠が作れます。PDFを張り付ける場合のボタンにも利用できます。

分割線は、独立した横線です。この枠前後が例です。線の長さ・太さは変更できません。色は背景色によります。

プレースホルダーは、コンテンツの配置する枠を作成するものです。

コンテンツエリア内でマウスをダブルクリックすることで、右図のような丸いアイコンメニューが表示され、クリックすることで挿入メニューからでなくてもコンテンツ枠が作れます。こちらの操作が便利です。

その他にもGoogleの色々なサービスをコンテンツとして配置できます。それぞれは、応用編で解説していく予定です。

ページ

ページは、新規ページ作成やページの複製と、サイト内での各ページの構成(ツリー形式＝位置や親子関係）を調整し、タイトルのメニューへの表示方法を調整します。

メニュー下部の「+」で新規ページを作成します。また、作成したページを複製（ページのコピーを作成）することができます。（ページ名の右端に現れる縦3列マークをクリックするとサブメニューが表示されます。下右図）

タイトル以外でも同じレイアウトを使う場合は複製作成してから編集すると便利です。

サイトのページの構成状態が表示されます。

右横図はこのサイトのページ構成です。ホームと同じラインにあるものが、トップのタイトルのメニュー表示され、その次のレベルにあるものは、タイトルメニューでカーソルが当たると表示されます。

「練習ページＡ」のマークに斜めの線が入っています。このページは非表示（メニュー時は表示されない）で隠しページなります。

タイトルにカーソルが当たると右奥に縦三点マークが出てます。クリックして表示されるメニューから「ナビゲーションに表示しない」を選択します。（右奥図）

メニューの親子関係の調整は、ページをドラッグしてメニューのレベル位置を調整します。少しマウス操作が微妙で、難しいのが難点です！

ページのプロパティで詳細を入力

メニューに表示される名前が、ブラウザーのURL欄に表示されるアドレス（公開名以下の「／」以下の名前）になります。メニュー名は日本語で良いのですが、URL欄は英字以外（かな漢字交）では、コピペすると文字が「％・％・％・・・」とのような文字化けした表示になります。これを避けるために、

ページ名のサブメニューのプロパティを開き、「詳細」をクリックして「カスタムパス」に半角英数字で入力します。このカスタムパスがURL欄に表示される文字になります。トップページは,「home」・「top」など、日本語名をローマ字表記か英訳した名前にし、半角英数字で入力します。

テーマ

テーマには、現在のところ右奥図のように、「シンプル」・「アリストテレス」・「ディプロマット」・「Vison」・「レベル」・「インプレッション」の６種類です。

それぞれで、色とフォントの選択ができます。テーマを選択することで、カラーとフォントメニューが表示されます。〇で表示されるカラー以外も右端〇をクリックするとカラー調整が出てきます。（右下図）個々に試してみてください。

まだまだ調整できるテーマ設定も少ないようです。この調整機能ももっと充実されていくこと期待しています。

保存と復元

Google サイトには、保存ボタンなど保存メニューがありません。上部に表示されるメニュー（下図）を見ていただくとわかりますが、「変更内容はすべてドライブに保存・・」とで自動的に保存される仕組みです。（ちょっと不安ですね）

その横にある左右の向きの矢印をクリックすることで、編集のやり直しや再編集することができます。今行った編集が失敗（思う操作）した場合は、「直前の操作を元に戻す」で編集前状態に戻せます。この操作は結構必要になり、便利です。画像の挿入位置が思い通りいかないなど場合など頻繁使うことがあります。（一般的なソフトにある機能です）

これは直前の操作に限られますが、以前のものに戻す場合は、「その他（縦三点マーク）」メニューに「変更履歴」があり、クリックすると右枠に表示される履歴（タイムスタンプ）から必要なものを選択することで、過去の状態に戻すこともできます。戻したい履歴をクリックして出る縦三点マークをクリックします。「この版を復元」で戻すことができます。

プレビュー

出来上がりは、プレビュー画面で確認します。プレビュー画面では、図が右下に表示されます。最初はPCモード（大画面）です。その横がタブレットモード、左端がスマホモードでの表示が確認できます。

公開

右上の公開ボタンの「▼」が公開オプションで、右下図のメニューがあります。

公開設定が下図です。ウェブアドレスに設定したい名称を入力します。完成したアドレスは、https://sites.google.com/view/名称

これが、公開するホームページのアドレスになります。このサイトの名称は、https://sites.google.com/view/gsmanabiです。

設定が完了するば、公開ボタンをクリックで公開されます。

以降、編集したものを公開する時に毎回押すことになります。

以上で完成です！いかがでしょうか？簡単なコンテンツでトライしてみてください。

ここからは、活用マニュアルを見てください。

Page updated

Google Sites

Report abuse