【非エンジニアでも大丈夫】ホームページ制作ツール「Googleサイト」で5分でサクッと簡単にホームページを作ってみた（無料）

# はじめに
つい先日、ITとは無縁の知り合いとこんな会話をしました。

知人：「ホームページって簡単に作れるんだね。」
私　：「簡単ってことはないけど・・・。WordPressとか？勉強したの？」
知人：「わーどぷれす？なにそれ？ポチポチして30分とかで作れたよ。」
私　：「え？は？（普段HTMLとか苦労して書いてるし30分とか絶対嘘だ）えっと・・・ブログとか？」
知人：「違う。ちゃんとしたホームページ。Googleサイトってやつ使った。」
私　：「へー。今度見てみるよ。」

～数週間後～

家でポチポチ

私　：「あ、ほんとだ・・・。」

ということで実際に5分で作った方法を説明します。

※ちなみに5分で作ったサイトはこちらです。
https://sites.google.com/view/shinkai-qiita/%E3%83%9B%E3%83%BC%E3%83%A0

# Googleサイトにアクセス
**Googleアカウント**を持っていることが前提です。
**Googleアカウント**でログインしている状態で以下のURLにクリックします。

[Googleサイト](https://sites.google.com/)

すると**「Welcome」**と歓迎してもらえます。迷わず**「OK」**をクリックしましょう。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/33e8c9da-27e1-9215-f38c-4b816e7f844e.png)

# テンプレートの選択
次にテンプレートの選択です。
私は左端の**「空白」**を選択しました。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/c02183c8-3dd5-69c7-d26f-400892f30ef3.png)

すると**「空白テンプレート」**といえどタイトル枠がすでに準備されていました。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/9f014999-8091-c975-0092-b479dd2b3a5d.png)

ここまで1分

# レイアウトの作成
画面右側のレイアウト枠から画像3つのレイアウトを選択しました。
すると左側のプレビュー兼編集画面にレイアウトが即時反映されました。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/ced1f8bf-484d-8a71-ba51-153eee248d52.png)

ここまで来てなんのホームページを作ろうか考えていなかったことに気づきました。
お試しということで今回は**「Qiitaの自分の記事を紹介するサイト」**にすることに決めました。

急いで[いらすとや](https://www.irasutoya.com/)から使えそうな画像を3つダウンロード。

# コンテンツの編集
画像の選択や、テキストの挿入はかなり直感的に行えました。
非エンジニアの人でもあまり迷うことはないと思います。さすがGoogle。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/58dd5e38-93fe-5633-163f-3ab2ac7acfb6.png)

画像とテキスト（リンク）を入力してみました。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/67649a10-779f-d895-00b5-abbf19ea5f2d.png)

ここまででメイン部は完成。3分半くらい経過しています。

# サイト名・タイトルの入力
ページ左上のサイト名とページ中央のタイトルを入力します。
これでホームページのレイアウト作成は完了です。

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/3f947f25-fe1d-f428-159f-3716c5790595.png)

# 公開
まずページ右上の**「公開ボタン」**をクリックします。

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/0b464d67-d1e3-d410-1017-8fa8cac8a9dd.png)

**「ウェブアドレス」**に自分のサイトのURLにしたい文字列を入力し、**「公開ボタン」**をクリックします。

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/3aa9303b-db12-3a77-bfab-57e1a60e5bf8.png)

以上でホームページの作成と公開が完了しました！
5分でサクッと簡単にホームページが作成できてしまいました。

# PCブラウザから確認
画面右上の**「公開」**ボタン横の矢印を選択し、**「公開したサイトを表示」**をクリックします。

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/c53230d5-b513-b34a-412a-a1ea627f8a6e.png)

こんな感じになりました。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/b01100e8-fc32-4309-32ed-9184fc13ad53.png)

# スマホブラウザから確認

スマホからだとこんな感じです。ちゃんとスマホに適した表示になっています。

<img width="400" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/ee4b65b3-8222-577d-e811-e5873f28f760.png">

# まとめ
本当に5分でホームページを作れてしまいました。

他にもGoogleマップやカレンダーを埋め込んだり、youtubeの動画を埋め込んだりと高機能でした！

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203022/de58b31e-c586-1168-5884-87161ef00e73.png)


まだまだやれることは多そうなので色々といじってみるつもりです。
すごいGoogle！

[5分で作ったサイトです。](https://sites.google.com/view/shinkai-qiita/%E3%83%9B%E3%83%BC%E3%83%A0)