新しい Google サイトでできること

社内プロジェクトの拠点、チームサイト、一般公開のウェブサイトなどを、デザイナー、プログラマー、IT スタッフの力を借りずに構築できます。

新しい Google サイトを使用すれば、簡単にウェブサイトを構築できます。コンテンツを必要な場所にドラッグするだけで、動画、画像、カレンダー、プレゼンテーション、ドキュメント、フォルダ、テキストなど、すべての重要な情報を 1 か所にまとめることができます。作成したウェブサイトは、組織全体または世界中のユーザーと簡単かつ安全に共有できます。

必要なもの:

account_circle G Suite アカウント

schedule 10 分

注: 新しい Google サイトは、パソコンやモバイル端末のほとんどのブラウザで表示できます。ただし、現在のところ新しいサイトのコンテンツを編集できるのは、パソコンで Chrome または Mozilla® Firefox® ブラウザを使用する場合に限られています。

なし
1.1

サイトの作成

次のいずれかを選択します。

注: Google サイトのすべてのファイルは、ドライブに保存されます。ドライブを使用してファイルを整理する方法について詳しくは、ドライブのスタートガイドをご覧ください。

新しいサイトを作成
1.2

サイトに名前を付ける

新しいサイトを作成すると、他のドライブのファイルと同じように、そのファイルがドライブに追加されます。サイトのすべての変更内容は自動的に保存されますが、ユーザーが公開するまでサイトは公開されません。

サイトの各部に名前を付けるには:

  1. サイトのドキュメント名 - サイトを管理するために固有の名前を入力します。サイトのドキュメント名は、サイトの作成者にのみ表示されます。
  2. サイト名 - サイト名は、見出しに表示されます。サイトの公開後は、ウェブまたはモバイル ウィンドウのタイトルバーに表示されます。サイト名を表示するには、ウェブサイトに 2 ページ以上のウェブページが含まれている必要があります。
  3. ページのタイトル - サイト内の各ページには、ページの上部に表示されるタイトルがあります。ページのタイトルは、ナビゲーション メニューにも表示されます。
サイトに名前を付ける
1.3

レイアウトを選択する

右側の [レイアウト] をクリックし、セクションに別のレイアウトを選択します。

なし
1.4

背景画像、見出しのタイプ、テーマを選択する

サイトのテーマを選択します。各テーマには、背景、配色、フォントがあらかじめ設定されています。フォント、色、背景は後で調整できます。また、サイトの作成後でもテーマを変更できます。変更するには、元に戻すアイコン undo またはやり直すアイコン redo をクリックします。

  1. 背景画像を変更するには:
    1. Google サイトに移動し、サイトを開きます。
    2. 背景画像にカーソルを合わせ、
      画像を変更アイコン image をクリックします。
    3. 次のいずれかを行います。
      • パソコンから画像をアップロードするには、[アップロード] をクリックします。
      • ギャラリーまたは別の場所から画像を選択するには、[画像の選択] をクリックします。
    4. (省略可)元の背景画像に戻すには、リセット アイコン refresh をクリックします。
  2. 見出しのタイプを変更するには:
    1. 背景画像にカーソルを合わせ、見出しのタイプアイコン サイトの見出し をクリックします。
    2. 次のいずれかを行います。
      • カバー
      • バナー(大)
      • バナー
      • タイトルのみ
  3. テーマとフォント スタイルを変更するには:
    1. 右上にある [テーマ] をクリックします。
    2. テーマを選択し、色を選択します。
    3. [フォント スタイル] をクリックし、スタイルを選択します。
背景とテーマを選択する
1.5

ページを追加、並べ替え、ネストする

ページを追加するとコンテンツを増やすことができます。ページをネストすることで、関連する情報をまとめることができます。ネストしたページは、別のページのサブトピックとして表示されます。

1 ページを追加するには:

  1. 右上にある [ページ] > 作成アイコン add をクリックします。
  2. 次のいずれかを選択します。
    • 新しいページを追加するには、[ページを追加] サイトにページを追加する をクリックします。ページに名前を付け、[完了] をクリックします。
    • URL を追加するには、リンクを追加アイコン insert_link をクリックします。

2 ページの並べ替えやネストを行うには:

  1. [ページ] をクリックします。
  2. ページを並べ替えるには、そのページをリスト内で上下にドラッグします。
  3. ページをネストするには、そのページを別のページの上にドラッグします。
  4. (省略可)ページのネストを解除するには、そのページをリストの下部にドラッグします。

注: ページをネストできるのは、5 階層までです。また、ホームページとして設定されているページをネストすることはできません。

3 ページの設定を選択するには:

[ページ] の下でページを選択し、横にあるその他アイコン more_vert をクリックして次のいずれかを行います。

  • ホームページとして設定します。
  • ページを複製します。
  • ページ名を変更します。
  • サブページを作成します。
  • ページやサブページを非表示にします。ホームページとして設定されたページを非表示にすることはできません。
  • サイトからページを削除します。ホームページとして設定されたページを削除することはできません。
ページを追加、並べ替え、ネストする
1.6

サイトのナビゲーションを設定する

複数のページがある場合は、サイトへの訪問者はナビゲーション メニューを使用して、ページ間を移動します。デフォルトでは、ナビゲーション メニューはサイトの上部に表示されます。トップページの右上をクリックし、メニューを表示します。

必要に応じてナビゲーション メニューを左側に移動できますが、表示する場所を変更するには、サイトに 1 つ以上のページが必要です。

ナビゲーション モードを選択するには:

  1. サイト名にカーソルを合わせ、ナビゲーションの設定アイコン settings をクリックします。
  2. ナビゲーション モードを選択します。
  3. 左側のメニューを表示するには、メニュー アイコン menu をクリックします。
  4. (省略可)ナビゲーション メニュー内でページを移動するには、ページを追加、並べ替え、ネストするをご覧ください。
サイトのナビゲーションを設定する
2

サイトの更新とカスタマイズ

次に、画像やインタラクティブなコンテンツでウェブサイトをカスタマイズする方法について説明します。

このセクションの内容:

2.1

サイトにコンテンツを追加する

右側で、コンテンツを追加するページを選択して次のいずれかを行います。

  1. コンテンツを追加するページ上の場所をダブルクリックします。
  2. または、[挿入] をクリックして、追加するコンテンツを選択します。
サイトのコンテンツを挿入する

format_size

タイトルやテキストを追加します。

code

音楽や動画などのコンテンツをウェブから直接追加します。

image

写真、デザイン、その他の画像を追加します。

drive

ファイルを(ドライブから)埋め込むか、ドライブに保存されているフォルダのコンテンツを埋め込みます。ドライブ内のファイルが変更されると、同じ変更がサイトにも自動的に表示されます。

crop_7_5

サイト内の他のコンテンツまたは外部 URL にリンクされているボタンを追加します。

maximize

(横方向の)分割線をページに追加します。

video_youtube

YouTube の動画(商品広告や企業広告など)を追加します。

event

カレンダー(チームや予定のカレンダーなど)を追加します。

location_on

地図(オフィスの場所、予定の場所、カスタムマップなど)を追加します。

drive_document drive_presentation drive_spreadsheet drive_form drive_chart

ドキュメント、スライド、スプレッドシート、フォーム、グラフから任意のコンテンツをサイトに追加します。ソースファイルのコンテンツが変更されると、サイトのコンテンツも自動的に更新されます。

2.2

テキストを編集する

テキストやページのタイトルを編集するには、ボックス内をクリックして入力します。または、テキスト ボックスの上にあるツールバーで別の設定を選択します。

編集オプション:

なし

タイトルと見出し

タイトルと見出し

タイトル arrow_drop_down

あらかじめ設定された見出しを選択します。その他の書式設定を表示するには、[標準テキスト] を選択します。

タイトルと見出し

format_align_left

テキストの配置を変更します。

タイトルと見出し

link

選択したテキストのリンクを挿入します。

タイトルと見出し

delete

タイトルまたはテキスト ボックスを削除します。

タイトルと見出し

標準テキスト

タイトルと見出し

format_bold format_italic

選択したテキストに太字または斜体を適用します。

タイトルと見出し

format_list_bulleted format_list_numbered

番号付きリストまたは箇条書きリストを追加します。

タイトルと見出し

more_vert

その他の項目が表示されます。

タイトルと見出し

code

Code テキスト スタイルを使用します。

タイトルと見出し

strikethrough_s

選択したテキストに取り消し線を適用します。

タイトルと見出し

format_clear

選択したテキストのすべての書式をクリアします。

2.3

セクションを編集する

セクションにカーソルを合わせると編集できます。

  • 各セクションの背景を変更する - スタイル アイコン palette をクリックしてスタイルを選択します。画像アイコン image を選択して背景画像を追加することもできます。
  • セクションを移動する - 新しいコンテンツを挿入すると、そのコンテンツは新しいセクションまたは既存のセクションに追加されます。セクションを上下に移動するには、セクションを移動アイコン drag_indicator をクリックし、任意の場所にセクションをドラッグします。
  • セクションを複製する - セクションのコピーを作成アイコン content_copy をクリックします。セクションをコピーして、サイト内の別のページに貼り付けることもできます。
  • フッターを追加する - ページの下部にスクロールして、
    フッターを追加アイコン add_circle をクリックします。サイト内のすべてのページにフッターが表示されます。フッターにカーソルを合わせて編集アイコン create をクリックすると、フッターを編集できます。特定のページのフッターを非表示にするには、そのページのフッターにカーソルを合わせ、このページのフッターを非表示アイコン remove_red_eye をクリックします。
なし
2.4

画像を編集する

画像のサイズを変更するには:
画像を選択し、画像の端または隅をドラッグします。Shift キーを押したまま画像をドラッグすると、縦横比を維持できます。

画像を移動するには:
セクション内の別の場所か新しいセクションに画像をドラッグします。画像は、ハイライト表示された任意の領域に配置できます。

注: 現在のところ、画像をテキスト ボックス内に配置することはできません。

画像を切り抜くには:

  1. 画像を選択し、切り抜きアイコン crop を選択します。
  2. 点をスライドさせてズームを調整します。
  3. 表示する部分を変更するには、画像をドラッグします。
  4. 完了アイコン done をクリックします。
  5. (省略可)画像の切り抜きを解除するには、アンクロップ アイコン crop_free をクリックします。

画像を置き換えるには:

  1. 画像を選択します。
  2. その他アイコン more_vert > [画像を置換] > [アップロード] または [画像を選択] をクリックし、新しい画像ファイルを選択します。

画像に代替テキストを追加するには:
代替テキストは、ユーザーがサイト内の画像にカーソルを合わせたときに表示されます。

  1. 画像を選択し、その他アイコン more_vert > [代替テキストを追加] をクリックします。
  2. 説明を入力して [適用] をクリックします。
画像を編集する
2.5

ロゴを追加する

ロゴは、上部のナビゲーション バーのサイト名の横に表示されます。

  1. ページヘッダーの上部にカーソルを合わせ、ロゴを追加アイコン image をクリックします。
  2. アップロード アイコン file_upload または選択アイコン image をクリックします。
  3. ロゴを選択し、[開く] または 選択 をクリックします。
  4. (省略可)ページヘッダーの色を変更するには、[背景] にある下矢印アイコン arrow_drop_down をクリックし、色を選択します。
  5. (省略可)ロゴを基にテーマの色を選択するには、[ロゴの編集] ウィンドウでテーマの色を選択します。

注: ロゴファイルに指定できるファイル形式は .jpg、.png、.gif です。最適な結果を得るには、ロゴの高さを 112 ピクセル以上にしてください。

なし
2.6

他のウェブサイトからコンテンツを追加する

以下のアイテムを埋め込むことができます。

  • ウェブサイト
  • Google Apps Script や App Maker を使用したウェブアプリ
  • Google データスタジオのレポート

追加するウェブサイトの種類によっては、そのサイトを自分のサイトに表示する方法をカスタマイズできる場合があります。また、プレビューや動的に更新されたコンテンツを表示する設定を利用できる場合もあります。更新を確認するには、コンテンツを追加した後で再ログインが必要となる可能性があります。

別のウェブサイトからコンテンツを追加するには:

  1. サイトを開き、右側にある [挿入] > [埋め込み] をクリックします。
  2. 次のいずれかを行います。
      • URL - 埋め込む URL(リンク)を貼り付けます。[ページ全体] か [プレビュー] を選択し、[挿入] をクリックします。
      • 埋め込みコード - 埋め込むサイトの HTML コードを貼り付けるか入力し、[次へ] > [挿入] をクリックします。

    注: コンテンツを追加したりプレビューしたりできない場合は、ウェブサイトのオーナーにお問い合わせください。

コンテンツを移動する
2.7

コンテンツを移動、サイズ変更する

挿入したコンテンツはすべて、キャンバス グリッドにコンテンツの「タイル」として追加されます。タイルはグリッドに自動整列されるため、簡単に移動、配置、編集できます。

サイトのコンテンツを移動するには:

  1. 移動するコンテンツにカーソルを合わせ、移動アイコン open_with を表示させます。
  2. コンテンツをハイライト表示された領域にドラッグします。

サイトのコンテンツのサイズを変更するには:

  1. サイズを変更するコンテンツを選択します。
  2. 青い丸をドラッグし、サイズ変更します。

オブジェクトをグループ化するには:

テキスト ボックスと画像の上下配置をグループにまとめることができます。

  1. 写真やテキスト ボックスをサイトページに追加します。
  2. テキスト ボックスをオブジェクトの上半分または下半分にドラッグして、青い線を表示させます。
  3. グループ化されたオブジェクトの順序を変更するには、変更するグループをクリックします。
  4. 並べ替えるオブジェクトをクリックし、キーボードで Up キーまたは Down キーを押します。

オブジェクトをグループ解除するには:

  1. テキスト ボックスや画像をグループ解除するには、解除するグループをクリックします。
  2. グループから削除するオブジェクトをクリックし、そのオブジェクトをグループ外へドラッグします。
なし
3

共有と共同編集

サイトでの作業中いつでも、そのサイトを組織内のユーザーと共有してコンテンツを共同編集できます。

このセクションの内容:

3.1

サイトを共有して共同編集する

  1. 次のいずれかを行います。

    • Google サイトからサイトを共有するには、ユーザーを追加アイコン person_add をクリックします。
    • Google ドライブからサイトを共有するには、ドライブ内でサイトのファイルを選択し、共有アイコン person_add をクリックします。
  2. サイトの共有相手を選択します。

    • 組織全体の権限を設定するには、[アクセスできるユーザー] で [変更] をクリックし、共有設定を選択して 保存 をクリックします。その後、サイトへのリンクをコピーして、メールやチャットに貼り付けます。
    • 特定のユーザーの権限を設定するには、[招待] に、組織内のユーザーの名前かメールアドレスを入力し、送信 > 完了 をクリックします。
  3. ユーザーの権限を変更します。

    • 権限を付与するには、ユーザーの名前の横にある下矢印 arrow_drop_down をクリックし、権限レベルを選択します。
    • 権限を削除するには、ユーザーの名前の横にある下矢印 arrow_drop_down をクリックし、削除アイコン close をクリックします。
  4. (省略可)編集者によるサイトの公開や、サイトアクセス権限の変更、新しいユーザーの追加を制限するには、[編集者によるアイテムの公開、アクセス権の変更、新しいユーザーの追加を禁止します] をオンにします。変更を保存 > 完了 をクリックします。

コンテンツを共有する
4

サイトのプレビューと公開

新しいサイトを公開する前にサイトをプレビューできます。完成したサイトは、組織内のみに公開したり、広く一般に公開したりできます。

このセクションの内容:

4.1

サイトをプレビューする

モバイル端末でサイトを表示すると、コンテンツは画面に収まるように自動的に調整されます。さまざまな端末でサイトがどのように表示されるかをプレビューできます。

サイトをプレビューするには:

  1. プレビュー アイコン visibility をクリックします。
  2. さまざまな端末でサイトがどのように表示されるかを確認するには、次のいずれかを選択します。
    • スマートフォン
    • タブレット
    • 大画面
  3. プレビュー画面を終了するには、閉じるアイコン close をクリックします。
サイトをプレビューする
4.2

サイトを初めて公開する

サイトを初めて公開するときは、サイトの名前を追加してサイトの URL を完成させます。サイトの名前に使用できる文字は、小文字、数字、ダッシュ記号に限られます。URL の先頭に含まれる組織のドメインは変更できません。サイトは公開後も編集できます。ただし、新たに変更した内容を表示するにはサイトを再公開する必要があります。

サイトを公開するには:

  1. 公開 をクリックします。
  2. URL の末尾に名前を追加します。「support」や「admin」など、一部の単語は使用できません。使用できる場合、URL の末尾に紫色のチェックボックスが表示されます。
  3. [サイトを閲覧できるユーザー] の下にある [管理] をクリックします。
  4. [他のユーザーと共有] ウィンドウで、オプションを選択します。
    • 下書き - ドメイン内のユーザーまたは特定のユーザーにサイトの下書きバージョンの編集を許可するには、[変更] をクリックします。
    • 公開済み - ドメイン内のユーザーまたは特定のユーザーに公開済みのサイトの表示を許可するには、[変更] をクリックします。
  5. 公開 をクリックします。サイトの URL にアクセスして、サイトが正しく公開されていることを確認します。

注: サイトを公開した後は、リンクをコピーアイコン insert_link > リンクをコピー をクリックし、そのリンクをチャットやメールに貼り付けることで、公開済みのサイトを共有できます。

サイトを公開する
4.3

サイトの URL を変更する

サイトの URL はいつでも変更できます。ただし、URL を変更すると、古い URL のブックマークが無効になります。

サイトの URL を変更するには:

  1. 公開 の横にある下矢印アイコン arrow_drop_down > [公開設定] をクリックします。
  2. 新しい URL を入力します。
  3. 保存 をクリックします。
公開設定
4.4

サイトの公開を停止する

サイトをオンラインで利用する必要がなくなったら、サイトの公開を停止できます。サイトのオーナーは、引き続きサイトのコンテンツにアクセスして更新できます。また、サイトを同じ URL や別の URL でいつでも再公開できます。他のユーザーが非公開のサイトにアクセスすると、エラー メッセージが表示されます。

サイトの公開を停止するには:

公開 の横にある下矢印アイコン arrow_drop_down > [公開を停止] をクリックします。

サイトの公開を停止する
4.5

サイト内を検索する

Google サイトのウェブサイトに複数の公開済みページがある場合、公開済みバージョンで目的のコンテンツを検索できます。

  1. Google サイトのウェブサイトにアクセスし、右上にある検索アイコン search をクリックします。
  2. 検索語句を入力して、Enter キーをクリックします。
なし

次のステップ

今すぐ試す
トレーニングを続ける

チームサイトを作成したり、ファイルを埋め込んだり、Google アナリティクスを追加したりできます。