Google Siteで個人サイト構築｜最新機能活用と設定手順を解説

閲覧数: 22,580+

正體中文 简体中文 English 日本語

本記事は AI による翻訳をもとに作成されています。表現が不自然な箇所がありましたら、ぜひコメントでお知らせください。

記事一覧

---

Google Site を使って個人サイトを作るのは今でも時代に合っていますか？

新しい Google Site 個人サイトの作成経験と設定ガイド

更新 2022–07–17

現在、自分で作成した ZMediumToMarkdown ツールを使って Medium の記事をまとめてダウンロードし、Markdown 形式に変換して Jekyll に移行しています。

zhgchg.li

• 手取り足取りの無痛移行ガイドはこちら 🚀🚀🚀🚀🚀

===

起源

去年転職したときに、少し「無駄遣い」して個人履歴書のリンク用に ドメイン を登録しました；半年経って、そのドメインをもっと活用して情報を増やそうと思い、また Medium に投稿した記事のバックアップとして第二のサイトを探していました。

期待する機能

• カスタムページの作成可否

• Medium と同様の滑らかな執筆インターフェース

• インタラクティブ機能（いいね／コメント／フォロー）

• SEO構造が優れている

• 軽量で読み込みが速い

• 自分のドメインを設定可能

• 侵入性が低い（広告の侵入性、サイトの表示）

• 構築が簡単

サイト構築の選択肢

1. 自分で構築した WordPress
   以前にサーバーとドメインを借りて、WordPressで個人サイトを作りました。設置から好みのレイアウト調整、プラグインの導入や不足分の自作まで完了しましたが、その後に執筆する気力がなくなりました。さらに動作が重く感じられ、読み込み速度やSEOもMediumに劣るため、調整に時間をかける気力も失いました。

2. Matters/簡書…など
   Mediumのプラットフォームとほぼ同じで、収益化を考えていないので適していません。

3. wix/weebly は商用サイト向けすぎて、無料版は広告が強すぎます。

4. Google Site（本記事）

5. Github Pages + Jekyll

6. まだ探しています >>> ご意見をお待ちしています

Google Site について

大体2010年頃に旧版のGoogle Siteを使ったことがあります。当時は個人サイトの→ファイルダウンロードセンターページとして利用していました。記憶は少し曖昧ですが、その時のレイアウトは重く、インターフェースも使いにくかったことだけ覚えています。10年経って、このサービスはもう終了していると思っていましたが、偶然ドメイン投資家がドメインのランディングページとして販売連絡先を載せているのを見かけました：

第一印象は「わあ！視覚的に良いし、ドメイン販売のためにページを作ったのか」と思いました。
よく見ると左下のマウスカーソルに「わあ！これは Google Site で作られている」と気づきました。
10年前に使っていたインターフェースとは全く違い、調べてみると Google Site はサービスを終了しておらず、2016年に新バージョンをリリースしていました。
もうすぐ5年経ちますが、少なくともインターフェースは時代に合ったものになっています！

完成品の展示

何も言わず、まずは私が作った完成品を見てください。もし「心が通じ合う」と感じたら、ぜひ使ってみてください！

首頁

個人簡歴ページ

街の一角（滝のような写真表示）

記事目次（Mediumへリンク）

私に連絡する（Googleフォーム埋め込み）

試してみませんか？

節約するために、まず結論を述べます；私はまだより適したサービスを探しています。機能の更新は続いていますが、Google Siteには私にとって重要な点で満たせない部分があり、以下に使用中に感じた致命的な欠点を挙げます。

致命的な欠点

1. コードハイライト機能の欠点
   機能は Code Block の背景が灰色になる のみで色分けされません。Gist を埋め込む場合は Embed JavaScript (iframe) を使うしかありませんが、Google Site は特別な対応をしていないため、高さがページのサイズ変更に合わせて変わらず、空白が多すぎたり、スマホの小画面では内外にスクロールバーが二重に表示され、非常に見栄えが悪く読みづらいです。

2. SEO 構造はほぼゼロ
   「驚きましたか？予想通りですか？」Google 自身のサービスの SEO 構造は💩のようで、head meta（description/tag/og:）を一切カスタマイズできません。SEO のインデックスやランキングはさておき、自分のサイトを Line や Facebook などの SNS に貼っても、プレビュー情報が全くなく、醜い URL とサイト名だけが表示されます。

利点

1. 侵入性が低く、左下に浮かぶ感嘆符のみで、クリックすると「Google コラボレーションプラットフォーム 不正利用の報告」が表示される

2. インターフェースが使いやすく、右側のウィジェットをドラッグするだけで簡単にページを作成できる

wixやweebly、またはcakeresumeのように？レイアウトやパーツをドラッグ＆ドロップして、入力するだけで完成します！

3. RWD対応、内蔵検索、ナビゲーションバー

4. ランディングページ対応

5. トラフィックに特別な制限はなく、容量は作成者の Google ドライブの容量上限に準ずる

6. 🌟 自分のドメインを紐付け可能

7. 🌟 GA解析で訪問者を直接追跡可能

8. 公式コミュニティ は意見を集め、継続的にメンテナンスと更新を行っています

9. お知らせのサポート

10. 🌟 Youtube、Googleフォーム、Googleスライド、Googleドキュメント、Googleカレンダー、Googleマップを無痛で完璧に埋め込み可能、かつPC/スマホのRWDに対応

11. 🌟 ページ内容は JavaScript/Html/CSS の埋め込みをサポート

12. URLがシンプルでわかりやすい（http://example.com/ページ名/サブページ名）、ページパス名をカスタマイズ可能

13. 🌟 ページレイアウトにガイドラインと自動整列機能があり、とても親切

ドラッグしたコンポーネントの位置にガイドラインが表示される

適用サイト

私は Google Site は非常に軽量なウェブサービスにしか適していないと感じます。例えば、学校のサークル、小さなイベントのウェブサイト、個人の履歴書などです。

いくつかの設定チュートリアル

使用中に遭遇した問題とその解決例をいくつか挙げます。他はほとんどWYSIWYG操作なので、特に記録することはありません。

個人ドメインの設定方法は？

1. http://google.com/webmasters/verification にアクセスする
2. 「プロパティを追加」をクリックし、「あなたのドメイン」を入力して、「続行」をクリックする

3. ご利用の「ドメインサービスプロバイダー」を選択し、「DNS設定検証文字列」をコピーしてください。

4. ドメインサービスプロバイダーのサイトへ移動 (ここでは Namecheap.com を例にしていますが、ほとんど同じです)

DNS 設定ブロックに新しいレコードを追加し、タイプは「TXT Record」、ホストに「@」、値にコピーしたばかりのDNS設定検証文字列を入力して、追加を送信します。

新しいレコードを追加し、タイプは「CNAME Record」、ホストには「www（または使用したいサブドメイン）」、値には「ghs.googlehosted.com.」を入力して追加を送信します。

また、リダイレクト先を http://zhgchg.li から http://www.zhgchg.li に変更することもできます

ここで設定を完了したら、少し待ってください…DNSレコードの反映を待ちます。。。

5. Google マスターに戻り、認証を押します

もし 「リソースの検証に失敗しました」 と表示されても慌てないでください！少し待ってから再度確認してください。1時間以上経っても解決しない場合は、設定に誤りがないか再確認しましょう。

ドメイン所有権の確認に成功しました

6. ご自身の Google サイト設定ページに戻る

右上の「歯車（設定）」をクリックし、「カスタムURL」を選択して、割り当てたいドメイン名または使用したいサブドメインを入力し、「割り当て」を押します。

割り当てが成功したら設定ウィンドウを閉じ、右上の「 公開 」をクリックして公開します。

ここも少し待ちます…DNSレコードの反映を待っています。。。

7. 新しいブラウザを開いてURLを入力し、正常に閲覧できるか試してみる

もし 「ウェブページを開けません」 と表示されたら慌てずに、少し待ってみてください。1時間以上経っても開けない場合は設定に誤りがないか確認しましょう。

完了！

子ページ、ページパス設定

ナビゲーションバーの目次のサブページは自動的に集約表示されます

設定方法は？

右側の「ページ」タブに切り替えます。

新しいページはドラッグ＆ドロップで既存のページの下に移動するとサブページになります。または「…」をクリックして操作します。

選択属性でページのパスをカスタマイズできます。

入力パス名（例: dev -> http://www.zhgchg.li/dev）

ページヘッダーとフッターの設定

1.ヘッダー設定

マウスをナビゲーションバーに移動し、「ヘッダーを追加」を選択してください

ヘッダーを追加した後、マウスを左下に移動すると画像の変更、タイトル文字の入力、ヘッダータイプの変更ができます。

2.フッター設定

マウスをページの下部に移動し、「フッターを編集」を選択すると、フッター情報を入力できます。

注意！フッター情報はサイト全体で共通しており、すべてのページに同じ内容が適用されます！

左下の「目のアイコン」をクリックして、このページのフッター情報の表示・非表示を切り替えられます

サイトの favicon、ヘッダー名、アイコンの設定

favicon

サイトタイトル、ロゴ

設定方法は？

右上の「歯車（設定）」をクリックし、「ブランド画像」を選択して設定できます。設定後は、ページに戻って「公開」を押すのを忘れないでください！

ページ最終更新情報の表示/非表示、ページ内アンカーリンクのヒント

最後の更新情報

ページアンカーリンクのヒント

設定方法は？

右上の「歯車（設定）」をクリックし、「閲覧者ツール」を選択して設定できます。設定後は必ずページに戻り、「公開」を押して反映させてください！

GAのトラフィック解析の連携

1.前往 https://analytics.google.com/analytics/web/?authuser=0#/provision/SignUp で新しい GA アカウントを作成する

2.作成後に GA トラッキングIDをコピーする

3.Google サイトの設定ページに戻る

右上の「歯車（設定）」をクリックし、「分析」を選択して「GA トラッキング ID」を入力するだけで設定できます。設定後はページに戻って「公開」を押すのを忘れないでください！

サイト全体／ホームページのバナー通知設定

バナー通知

設定方法は？

右上の「歯車（設定）」をクリックし、「お知らせバナー」を選択して設定します。設定後はページに戻り、「公開」を押して反映させるのを忘れないでください！

バナーのメッセージ内容、色、ボタンの文字、クリック先リンク、新しいタブで開くかどうか、全サイトまたはトップページのみ表示を指定できます。

公開設定

右上の「公開 ▾」

変更内容を確認して公開できます。

検索エンジンのインデックス登録を許可するかどうか設定でき、毎回公開前に内容確認ページをスキップできます。

Javascript/HTML/CSSの埋め込み、大量の画像

Gist の例

しかし、前述の致命的な欠点の通り、iframe の埋め込みは画面サイズに応じて高さが自動調整されません。

挿入方法は？

「埋め込み」を選択してください

埋め込みコードの選択

JavaScript/HTML/CSS を入力でき、カスタムスタイルのボタンUIとして使用可能です。

また「画像」を選択すると複数の画像を挿入でき、上記の私の城市一隅ページのようにウォーターフォールレイアウトで表示されます。

埋め込みの Google フォームはページ上で直接入力できませんか？

この理由はフォームの質問に「ファイルアップロード」項目があるため、ブラウザのセキュリティ上の問題で iframe を他のページに埋め込むことができないためです。そのため、アンケート情報のみが表示され、「記入」ボタンをクリックして新しいウィンドウで内容を入力する仕様になっています。

解決策はファイルアップロードの問題を取り除くだけで、ページ内で直接入力できるようになります。

ボタンコンポーネントのURLにアンカーを入力できない

EX: #lifesection はページ上部に置いて、目次のナビゲーションやページ下部のGoTopボタンとして使いたいです。

公式コミュニティを調べたところ、現在はボタンのリンクが以下のどちらかしかできません。1. 外部リンクを新しいウィンドウで開く、または 2. 内部ページを指定する。そのため、私は後でサブページを使って目次を分割しました。

関連記事

• [生産性ツール] ChromeをやめてSidekickブラウザに乗り換えました

ご質問やご意見がありましたら、こちらからご連絡ください 。

Post は ZMediumToMarkdown によって Medium から変換されました。

---

🍺 Buy me a beer on PayPal

👉👉👉 Follow Me On Medium! (1,053+ Followers) 👈👈👈

本記事は Medium にて初公開されました（こちらからオリジナル版を確認）。ZMediumToMarkdown による自動変換・同期技術を使用しています。

Improve this page on Github.