こんにちは、ゆるりんです。
前回の記事で、ホームページの固定費を手放す選択肢として「Googleサイト」を紹介しました。今回はその続きで、実際にGoogleサイトでホームページを作る手順をまとめます。
パソコンが得意でなくても大丈夫。文字や写真を置いていく感覚で作れるので、まずは試しに1ページ作ってみるところから始めてみてくださいね。
始める前に用意するもの
| 用意するもの | 内容 |
|---|---|
| Googleアカウント | Gmailを使っていれば、そのアカウントでOK |
| 載せたい文章 | 紹介文、営業時間・開催日、料金、連絡先など |
| 写真 | 教室やお店の様子、ロゴなど（スマホの写真で十分） |
| サイトのアドレス案 | 「sites.google.com/view/○○」の○○に入れる英字（例：教室名のローマ字） |
文章は、先にメモ帳などに書き出しておくと、作業がぐっとラクになりますよ。
Googleサイトの作り方｜6ステップ
ステップ1：Googleサイトを開いて、新しいサイトを作る
Googleアカウントでログインした状態で「Googleサイト（sites.google.com）」を開きます。「新しいサイトを作成」の「＋」を押すと、白紙のサイトができます。テンプレートが表示されている場合は、雰囲気の近いものを選んで始めることもできます。
※画面は2026年10月時点のものです。
ステップ2：サイト名とトップページを作る
左上の「サイト名」と、トップページの大きな見出し（タイトル）を入れます。トップページには「どんな教室・お店か」が一目で分かる一文と写真を置くのがおすすめです。
ステップ3：文章・写真・地図などを入れる
画面右側の「挿入」メニューから、文章（テキストボックス）や画像を入れていきます。Googleのサービスもそのまま埋め込めるのが便利なところ。
| 入れられるもの | こんなときに便利 |
|---|---|
| Googleマップ | お店や会場の場所を案内したい |
| Googleカレンダー | 行事予定・開催日を載せたい |
| Googleフォーム | 申し込み・お問い合わせを受け付けたい |
| YouTube | 教室の様子やお店の紹介動画を見せたい |
| ドライブのファイル | 配布資料・おたよりを載せたい |
ステップ4：ページを増やす
画面右側の「ページ」メニューから、ページを追加します。最初は次の4ページくらいで十分です。
- お知らせ：最新情報、休みのお知らせ
- 料金・内容：コースやメニュー、会費など
- アクセス：地図、住所、駐車場
- お問い合わせ：Googleフォームを埋め込む
ステップ5：テーマで色と文字をそろえる
画面右側の「テーマ」から、サイト全体の色や文字のスタイルを選びます。ページごとにバラバラに色を変えるより、テーマでそろえたほうがすっきり見えますよ。
ステップ6：プレビューで確認して、公開する
画面上部のプレビュー（目のアイコン）で、パソコン・スマホでの見え方を確認します。問題がなければ、右上の「公開」ボタンを押します。
※画面は2026年10月時点のものです。
公開の画面では、次の3つを設定します。
| 項目 | 設定のポイント |
|---|---|
| ウェブアドレス | 「sites.google.com/view/○○」の○○を決める。短く、覚えやすい英字に |
| サイトを閲覧できるユーザー | 一般に公開するなら「全員」。会員だけに見せたい場合は範囲を絞る |
| 検索の設定 | 検索結果に出したくないときだけ「検索エンジンに表示しないようリクエストする」にチェック |
表の作り方｜Googleサイトには「表」の機能がない
Googleサイトには、Wordやブログのような「表を挿入」の機能がありません。料金表や時間割など、表を載せたいときは、次の3つのどれかで工夫します。
| 方法 | やり方 | 良い点 | 注意点 |
|---|---|---|---|
| スプレッドシートを挿入 | 「挿入」メニューの「スプレッドシート」から、Googleスプレッドシートを選ぶ | 表の中身はスプレッドシートで直せる | 枠線やシートの見た目がそのまま出るので、表示する範囲・列の幅・色をシート側で整える工夫がいる。共有設定も必要 |
| 埋め込みコード（HTMLの表） | 「挿入」メニューの「埋め込む」→「埋め込みコード」に、HTMLで書いた表を貼る | 色や文字の大きさを自由に決められる | 枠の高さは幅に合わせて縮むため、スマホでは表が切れたり、枠の中でスクロールが必要になる。枠の大きさはドラッグで調整する |
| 表を画像にして貼る | 表を作って画像にし、画像として入れる | いちばん簡単で、見た目が崩れない | 直すたびに画像を作り直す。スマホでは文字が小さくなり、検索にも読まれにくい |
表は、パソコンではきれいでもスマホで崩れやすいところ。公開する前に、プレビューのスマホ表示で必ず確認してみてくださいね。
PDFなどの添付ファイルの貼り方｜Googleドライブを使う
Googleサイトでは、画像はそのまま入れられますが、PDFやWordなどのファイルを、ページに直接アップロードすることはできません。ファイルは、いったんGoogleドライブに入れてから使います。
- ファイルをGoogleドライブにアップロードする
- ドライブの共有設定を「リンクを知っている全員」（閲覧者）にする：これを忘れると、サイトを見た人がファイルを開けません
- サイトに入れる：入れ方は2通り（下の表）
| 入れ方 | 見え方 | 向いているもの |
|---|---|---|
| 「挿入」メニューの「ドライブ」から選ぶ | ページの中に、ファイルのプレビュー枠が表示される | チラシや案内など、1〜2ページの資料（スマホでは枠が小さく読みにくいことも） |
| ボタンやリンクに、ファイルのリンクを貼る | 押すと、ファイルが別の画面で開く | 申込書や規約など、印刷・保存してほしい資料 |
- 個人情報が入ったファイルは載せない：共有を「リンクを知っている全員」にすると、リンクを知っている人は誰でも見られます
- 中身を差し替えるときは「版を管理」：ドライブでファイルを右クリック→「版を管理」から新しいファイルをアップロードすると、リンクが変わらないので、サイトを直す必要がありません
「ファイルが開けない」と言われたら、まずはドライブの共有設定を確認してみてくださいね。
公開したあとに知っておきたいこと
- 直したら、もう一度「公開」を押す：編集しただけでは、公開中のサイトには反映されません
- みんなで更新できるようにする：「共有」から、役員や講師を「編集者」として追加できます
- お問い合わせはGoogleフォームで：メールアドレスを直接載せずに、問い合わせを受け付けられます
- アクセス数を見たいとき：設定からGoogleアナリティクスの測定IDを入れると、見られた数などが分かります
「直したのに変わらない！」というときは、たいてい「公開」の押し忘れです。慌てずにもう一度押してみてくださいね。
つまずきやすいポイントと対処法
| 困ったこと | 原因と対処 |
|---|---|
| 直したのに、サイトに反映されない | もう一度、右上の「公開」を押す |
| 検索しても出てこない | 公開直後は時間がかかることも。検索の設定でチェックを入れていないかも確認 |
| アドレスが長くて覚えにくい | 独自ドメイン（www.○○.com）を設定する |
| スマホで見ると崩れる | プレビューでスマホ表示を確認し、画像や文字の量を調整する |
| PDFが開けないと言われる | Googleドライブで、そのファイルの共有を「リンクを知っている全員」にする |
| 他の人が編集できない | 「共有」で、その人を「編集者」に追加する |
独自ドメインの使い方や、Google Workspaceが必須ではないことは、前回の記事で詳しくまとめています。
一般的なホームページでできて、Googleサイトではできないこと
HTMLで作る一般的なホームページ（WordPressなどで作るサイトも含む）でよく使われている工夫でも、Googleサイトでは再現できないものがあります。作り始める前に知っておくと安心です。
| やりたいこと | 一般的なHTMLのサイト | Googleサイト |
|---|---|---|
| 「ページの先頭に戻る」ボタンを、画面の端に常に表示する | ○ JavaScript・CSSで画面の端に固定できる | ×（常に表示されるボタンは作れない） |
| スクロールに合わせて文字や画像が動く演出（JavaScriptの動き） | ○ | ×（自分で書いたプログラムは枠の中でしか動かず、ページ全体には効かない） |
| 背景に動画を流す | ○ | ×（YouTube動画を「埋め込む」ことはできる） |
| 自分で書いたCSSで、デザインを細かく調整する | ○ | ×（テーマ・色・フォントを選ぶ範囲） |
| ページごとに、検索結果の説明文やSNSで共有したときの画像を設定する | ○ | △（細かい設定はほとんどできない） |
| 表を作る（表の挿入） | ○ | △（表の機能はない。スプレッドシート・埋め込み・画像で代用） |
| PDFなどのファイルを、ページに直接アップロードする | ○ | △（Googleドライブに入れてから使う） |
| ブログ機能（記事一覧・カテゴリー・タグ） | ○（WordPressなど） | × |
| コメント欄 | ○ | × |
| ネットショップ（カート・決済） | ○ | × |
| 外部サービスのパーツ（アクセスカウンター、アフィリエイトのリンクパーツなど）を貼る | ○ そのまま貼れる | △（枠の中で表示されるため、高さの調整が必要だったり、正しく動かないものもある） |
Googleサイトでは、自分で書いたプログラム（JavaScript）は、自動で小さな枠（iframe）の中に入れて動かす仕組みになっています。そのため、ページ全体に効く工夫（常に表示されるボタンや、スクロールに合わせた動きなど）は作れません。
こうした工夫がどうしても必要なら、一般的なホームページ作成サービスやWordPressのほうが向いています。お知らせや案内が中心のサイトなら、Googleサイトでできることで十分なことがほとんどです。
まずは「それがなくても困らないか」を考えてみてくださいね。たとえば先頭に戻るボタンがなくても、ページを短めに分けておけば、スマホでも読みやすくなりますよ。
自分で作るのが難しいときは
「最初の作成だけ手伝ってほしい」「独自ドメインの設定だけお願いしたい」という場合は、スキルマーケットで単発で頼むのもひとつの方法です。毎月の保守契約にしなければ、固定費にはなりません。
まとめ｜まずは1ページ作ってみる
Googleサイトは、無料で、パソコンが得意でなくても作れるホームページ作成ツールです。
- 文章と写真を用意する
- テンプレートからサイトを作り、文章・写真・地図を入れる
- ページを増やして、テーマで見た目をそろえる
- プレビューで確認して公開する
まずは「お知らせ」1ページだけでも作ってみると、思ったより簡単なことに気づくはず。覚えやすいアドレスにしたくなったら、独自ドメインも検討してみてくださいね。
