「ホームページは業者に頼まないと作れない」「よくわからないけど難しい」そんなイメージをお持ちの方も多いのではないでしょうか。
実は、Googleが提供するサービス「Googleサイト」を使うことで、誰でも無料で簡単にホームページを作れます。HTMLやCSSといった専門知識や、サーバー準備の必要もありません。
本記事では、Googleサイトの基本的な使い方と、ホームページの作成~公開までの流れをご紹介します。
目次
Googleサイトとは
Googleサイトとは、Googleが提供しているホームページ作成ツールです。
「使える機能はシンプルでいい」「試しにホームページを作ってみたい」といった初心者の方におすすめのサービスです。
Googleサイトで作れるホームページ例
以下のサイトは実際にGoogleサイトで作成したホームページです。
![](https://b.qrqrq.com/wp-content/uploads/2023/02/0bb36e17aa75bdb7bd14b48cce8e27b1-1024x517.png)
- FAQ
- 社内ポータル
- メニュー
- LP
- 個人のサイト
- 学校新聞
- 掲示板
- サークル、部活
など、幅広い用途のホームページが作れます。
ホームページを作成〜公開するまでの流れ
Googleサイトの基本的な使い方と、ホームページを作り公開するまでの流れをご紹介します。
STEP1.ホームページ作成
新しいホームページを作成します。
1から作成することも可能ですが、用意されているテンプレートを使うことで、簡単にデザイン性の高いホームページが作れます。
今回はテンプレートを利用します。
Googleサイトにアクセス
![](https://b.qrqrq.com/wp-content/uploads/2023/02/49503796699cfcfb5d1b38823f147d69-1024x561.png)
テンプレートギャラリーをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/974f24def6cf20aabb962fddc7203ed3-1024x561.jpg)
好きなテンプレートを選択
![](https://b.qrqrq.com/wp-content/uploads/2023/02/0f1ecf08799430e72573a040ef9374b4-1024x486.jpg)
ホームページの大枠が完成しました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/872b28f4e1ca17ffb2189331c007bb88-1024x561.jpg)
STEP2.タイトル設定
ホームページのタイトルを設定します。
タイトル部分をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/872b28f4e1ca17ffb2189331c007bb88-1-1024x561.jpg)
任意のタイトルを入力
![](https://b.qrqrq.com/wp-content/uploads/2023/02/36470db0fcba16d1552b74d9b3f4a698-1024x561.jpg)
タイトルが設定できました
STEP3.画像追加・差し替え・編集
画像の追加・編集方法をご紹介します。
画像追加
ホームページ内に新しく画像を追加します。
挿入タブの「画像」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/59e56ceb613c7104c004088657db80c8-1024x561.jpg)
「アップロード」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/3f47ecfa755cb55c9cd68771020aab55-1024x517.jpg)
ホームページ内に追加したい画像を選択し「開く」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/7e082d146c047207ec027ed08d694681.jpg)
画像が追加できました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/061c6d6191046bd3a5f15c2086faacfd-1024x517.jpg)
画像差し替え
追加済みの画像を違う画像に置き換えます。
差し替えたい画像を2回クリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/f2b2bc10e2d293b1b3dc836d9c9b172a-1024x604.jpg)
左上に表示される︙をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/b09027bb61264c060bdb91a7993bd66c-1024x567.jpg)
「画像を置換」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/e78ae7cbed866ce3a108780e5df7d5a7-1024x566.jpg)
新しく表示したい画像を選択
![](https://b.qrqrq.com/wp-content/uploads/2023/02/37574f409bd6b3ea3bb6a2bbffe7bd92.jpg)
違う画像に置き換えることができました。
![](https://b.qrqrq.com/wp-content/uploads/2023/02/0a511c298ff2672ec3baae04dff2781f-1024x565.jpg)
画像編集
追加済みの画像をトリミングします。
トリミングアイコンをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/f16046ceb742633b9d17be5a1943217c-1024x565.jpg)
位置を調整するときは画像をドラッグしてください。
画像の拡大率を変更したいときは、スライダーで調整しましょう。
![](https://b.qrqrq.com/wp-content/uploads/2023/02/b454d3ff3e3b58b1f3ed206ae96c7747-1-1024x566.jpg)
画像の位置・大きさを調整し、チェックマークをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/4162b83e42433dc6b425f6066c8f9a64-1-1024x486.jpg)
画像が編集できました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/8713d821b64b751a772830a468ff1fda-1024x565.jpg)
STEP4.テキスト追加・位置調整
テキストの追加・編集方法をご紹介します。
テキスト追加
テキストを追加します。
挿入タブの「テキスト ボックス」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/43404aaaaa1eea536d2b808e07e6435d-1024x517.jpg)
テキストボックスが追加できました。
![](https://b.qrqrq.com/wp-content/uploads/2023/02/457d636fd911639e2184d6725cd56a23-1024x380.jpg)
テキストを入力
![](https://b.qrqrq.com/wp-content/uploads/2023/02/0ff3edae3d749883a1ebf430e6770540-1024x379.jpg)
ホームページ内に新しいテキストを追加できました。
テキスト位置調整
テキストの表示位置を調整します。
以下の状態で、画像の横にテキストを移動する方法をご紹介します。
![](https://b.qrqrq.com/wp-content/uploads/2023/02/9861a4c84fc11e9855605c3a0514da73-1024x486.jpg)
位置調整したいテキストをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/d05e5fb5e9b8b5328e0fe6f5215f19c7-1024x486.jpg)
左端の丸をドラッグし、横幅を調整
![](https://b.qrqrq.com/wp-content/uploads/2023/02/82d9f57dd790084f99d2cc072c1cd807-1024x486.jpg)
![](https://b.qrqrq.com/wp-content/uploads/2023/02/7822cf7d9af6d9f978db333c69fb54e8-1024x433.jpg)
テキストの横幅が調整できました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/50fd9318a0b7c97202a6c90d9f234ed9-1024x438.jpg)
テキストボックスを画像の横へドラッグ
![](https://b.qrqrq.com/wp-content/uploads/2023/02/36f84af5305c183030a40802373c7e9f-1024x435.jpg)
テキストの位置を調整できました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/dae75b8bd4057a1308eb725b7a26bc4f-1024x440.jpg)
STEP5.コンテンツ ブロックを追加
コンテンツ ブロックとは、画像やテキストの配置テンプレートのことです。コンテンツ ブロックを使うことで、クオリティの高いページを作りやすくなります。
ここではコンテンツ ブロックの追加方法をご紹介します。
「コンテンツ ブロック」内の好きなブロックをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/1808c1321e1b4aacbff27ff592f48dc5-1024x561.jpg)
コンテンツ ブロックを挿入できました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/4a12a5db609859633ca9603bce0429b9-1024x486.jpg)
コンテンツ ブロックの画像やテキストを編集しましょう。
STEP6.ページ編集・追加・削除
トップページ以外のページを編集・追加・削除する方法をご紹介します。
ページ編集
すでに追加済みのページを編集します。
ページタブをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/f51f73994549a60579e7a7c914068138-1024x486.jpg)
編集したいページをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/ad21f49380b7cc63e86751aeb4e0e183-1024x486.jpg)
編集したいページに移動しました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/bf06cd474930c61679e6bcbfdc186acc-1024x521.jpg)
STEP2〜STEP5の操作を参考に、ページを編集してください。
ページ追加
ページタブ下の+アイコンにカーソルを合わせる
![](https://b.qrqrq.com/wp-content/uploads/2023/02/1faeb629c2cab7de11a826db8bcd0e61-1024x518.jpg)
「新しいページ」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/0465521b01ef6a45ad20a35033aa555d-1024x517.jpg)
新しいページ名を入力し「完了」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/6baa8355ac684b7dd7a7c9cc3e3ee21d-1024x517.jpg)
新しいページが追加されました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/d3fb3ac05dd805fafbe496ab443d28c4-1024x486.jpg)
ページ削除
削除したいページの端に表示されている丸3つのアイコンをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/f7a17384980c5cd2d5c553edcebe3f89-1024x479.png)
「削除」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/4d21ff1fbc8440b215f3b1a525ffdc4a-1024x486.png)
ページを削除できました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/c12fd7205705b5ff8072d7243a94ace2-1024x486.png)
STEP7.テーマ変更
テーマを変更することで、ホームページのイメージカラーや雰囲気を変えられます。
テーマタブをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/72d8042c46d15317249189e825099aaf-1024x486.jpg)
任意のテーマを選択
![](https://b.qrqrq.com/wp-content/uploads/2023/02/460328ec4deba149be900ec3d6f63c37-1024x486.jpg)
テーマカラーを選択
![](https://b.qrqrq.com/wp-content/uploads/2023/02/d2d85a3e2847d4075799bb70956a9c7a-1-1024x486.jpg)
サイトのテーマを変更できました。
STEP8.編集者の追加
複数人でホームページを作成・運営する場合は、共同編集者を追加しましょう。
右上のアイコンをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/e291bdc2759ab53925932c74e0a5dc18-1024x517.jpg)
共同編集者のメールアドレスを入力
![](https://b.qrqrq.com/wp-content/uploads/2023/02/4444fdabfe45fd5a1735a72a14d301b9-1024x486.jpg)
表示された候補をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/08f354282659ce0a7ddad845378b0034-1024x486.jpg)
「送信」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/3736d9050925f7bb144082ffaf125911-1024x486.jpg)
編集者権限を持つユーザーが追加できました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/36b63d0fdc90415caa7c6d090397136e-1024x486.jpg)
STEP9.公開前準備
STEP8では編集できるユーザーを設定しました。
STEP9では、ホームページの公開時に該当ページへアクセスできるユーザーを設定します。この設定を利用することで、プライベートなサイトを作ることもできます。
特定のユーザーにのみ公開する場合
ホームページ公開後、管理者によって権限を付与されたユーザーだけがホームページを見られるようになります。
学校内での運用や社内ポータルなど、限られた人にだけ公開したい場合におすすめの設定です。
右上のアイコンをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/e291bdc2759ab53925932c74e0a5dc18-1-1024x517.jpg)
公開対象のユーザーのメールアドレスを入力
![](https://b.qrqrq.com/wp-content/uploads/2023/02/8c02ecabe18890c57c8032a6e9ec3709-1024x486.jpg)
候補をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/9ac347e97b987e652b9fc6e6930bbe6f-1-1024x486.jpg)
「編集者」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/336219a3c4571fd491b7b7f98e3b6399-1024x486.jpg)
「公開済みアイテムの閲覧者」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/7df6f7b2d7d1fda099d0ef87d969058b-1024x486.jpg)
「共有」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/2f3786909fe5a498715cc52c58a11151-1024x486.jpg)
特定のユーザーにのみ公開されるように設定できました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/0c53050bd2bcbd4cb212991ee3eb08dd-1024x561.jpg)
また、ユーザーのメールアドレスとして、メーリングリストのアドレスも指定可能です。団体に対してホームページを公開したい場合はメーリングリストの利用がおすすめです。
メーリングリストはGoogleグループで設定できます
URLを知っている人全員に公開する場合
ホームページ公開後、URLを知っているユーザーなら誰でもホームページを見られるようになります。
レストランのメニュー表や個人のサイトなど、不特定多数の人に公開したい場合におすすめの設定です。
右上のアイコンをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/e291bdc2759ab53925932c74e0a5dc18-2-1024x517.jpg)
公開済みサイトの横の「制限付き」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/257940e419099e839c228aa78f1b267c-1024x486.jpg)
「公開」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/0057c2ead600b0e6a2e223e53795f2e3-1024x486.jpg)
「完了」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/79b1707fc138906cbb4b22a3b3e96b6b-1024x486.jpg)
公開対象を設定できました。ホームページ公開後は、URLを知っている人は誰でもページを見られます。
STEP10.公開
完成したホームページを公開しましょう。
右上の「公開」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/04/48715680b76e78f4222d174a4ccf96b3-1024x486.jpg)
ホームページにアクセスするためのウェブアドレスを設定
![](https://b.qrqrq.com/wp-content/uploads/2023/02/e6b6db260d5c2b3afc6e7771a9273231-1024x521.jpg)
右端にチェックマークが表示されていたら「公開」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/975275cecda1d4206ad48e05bfdb3e6a-1024x521.jpg)
使用できない場合は「この名前は既に使用されています。」と表示されます。その場合は違うアドレスを設定してください。
![](https://b.qrqrq.com/wp-content/uploads/2023/02/f1404c3c6ec30691c59371750bb007cd-1024x486.jpg)
「公開」ボタンの横に三角のアイコンが表示されていたら、公開完了です
![](https://b.qrqrq.com/wp-content/uploads/2023/02/8a148bdb9e3d31e046f7a4d0b07b25c6-1024x441.jpg)
補足:公開したホームページを非公開にするには
「ホームページの内容を変更したい」「公開設定を間違えていた」などの理由で、一度公開したホームページを非公開にしたい場合は、以下の手順でホームページを非公開にできます。なお、サイトの編集や再公開は引き続き操作可能です。
「公開」ボタンの横の三角アイコンをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/e59c3d34089749b5bb3086ec973bc512-1024x441.jpg)
「公開を停止」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/a8dcfea781ac0cb39197c3cb4be2f352-1024x463.jpg)
「OK」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/abe15e0d15d8d5f1003f4e7b5e583873-1024x486.jpg)
非公開に切り替わりました
![](https://b.qrqrq.com/wp-content/uploads/2023/02/383c1329039492b5565c056bfeda09a3-1024x486.jpg)
公開したホームページはQRコードで共有
公開したホームページにアクセスしてもらうためには、QRコードが有効です。
ホームページのURLでQRコードを作成し、ポスターや名刺などに掲載しましょう。
![](https://b.qrqrq.com/wp-content/uploads/2023/02/f1d730bf3151ebf7d5b190a687a94f07-1024x494.png)
以下に、URLからQRコードを作成する手順をご紹介します。
STEP1.「公開」ボタンの横の三角アイコンをクリック
「公開」ボタンの横の三角アイコンをクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/e59c3d34089749b5bb3086ec973bc512-1-1024x441.jpg)
STEP2.「公開設定」をクリック
「公開設定」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/2426c8811ce9d97252c845145ed01aa6-1024x405.jpg)
STEP3.URLをコピー
URLをコピー
![](https://b.qrqrq.com/wp-content/uploads/2023/02/1b56f4573a366f5a326f691ef9d4e27c-1024x561.jpg)
STEP4.QRコードを作成
クルクル マネージャーにアクセス
![](https://b.qrqrq.com/wp-content/uploads/2023/02/202de07b8b65dd078b85499894e59c60-1024x517.jpg)
クルクル マネージャーにアクセス
STEP3でコピーしたURLをペーストし「作成」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/9abd78fc5832a6ab22730ef6eab7b702-1024x486.jpg)
任意の保存形式を選択し「ダウンロード」をクリック
![](https://b.qrqrq.com/wp-content/uploads/2023/02/41c97d47552f46045b235c344d75cbd4-1024x486.jpg)
ホームページのURLでQRコードの作成ができました。
Googleサイト利用時に気をつけるべきポイント
Googleサイトでは無料で簡単にホームページを作れます。
一方で、注意しなければいけないポイントが3つあります。ひとつずつ解説しますので、本格的にホームページを運用する前にご確認ください。
- 利用規約を確認する
Googleサイトには利用規約が存在します。違反するとホームページに制限がかかったり、アカウントを停止されたりする可能性があります。運用の前に利用規約を十分確認しましょう。 - できることに限りがある
Googleサイトは無料で簡単に利用できるサービスですが、細かなカスタマイズや作れるページ数に制限があります。具体的には以下のような特徴がありますので、注意しましょう。- 閲覧できるブラウザに制限がある(Chrome、Firefox、Internet Explorer、マイクロソフト Edge、Safari)
- ページ作成は5階層まで
- 細かなデザインの変更ができない
- Googleサイトのバージョン変更に注意する
Googleサイトがバージョン変更した場合は、最新のバージョンにあわせてホームページをリニューアルしましょう。最新のバージョンに対応せず放置していると、ホームページが見られなくなってしまう可能性があります。
まとめ
Googleサイトを利用することで、無料で簡単にホームページを作ることができます。
ホームページを公開したら、ホームページのURLをQRコードにして掲載しましょう。
Googleサイト利用時には以下の3つのポイントに気をつけましょう。
- 利用規約を確認する
- できることに限りがある
- Googleサイトのバージョン変更に注意する
関連記事
クルクル チャンネルでは、無料で顧客にメッセージ配信できます。
以下に導入企業の事例をご紹介します。