Google Site を使って個人サイトを作るのは今でも時代に合っていますか？
新しい Google サイトでの個人サイト作成経験と設定方法
2022年7月17日更新
現在、自分で作成した ZMediumToMarkdown ツールを使って Medium の記事をまとめてダウンロードし、Markdown 形式に変換して Jekyll に移行しています。
- 手取り足取りの無痛移行ガイドはこちら 🚀🚀🚀🚀🚀
===
起源
昨年転職した際に、少し無駄遣い気味に個人履歴書のリンク用として ドメイン を登録しました。半年が経ち、そのドメインをもっと有効活用して情報を増やしたいと思い、また Medium に投稿した記事のバックアップ用の第二のサイトも探していました。
期待する機能
-
カスタムページの作成が可能か
-
Mediumと同様のスムーズな執筆インターフェース
-
インタラクティブ機能（いいね／コメント／フォロー）
-
SEO構造が良好
-
軽量で高速読み込み
-
自分のドメインを設定可能
-
侵入性が低い（広告の侵入性、サイトの表示）
-
構築が簡単
サイト構築の選択
-
自分で構築した WordPress
以前にサーバーとドメインを借りて、WordPressで個人サイトを作成しました。設置から自分好みのデザインに調整し、プラグインをインストールしたり、不足しているプラグインを自作したりしましたが、その後は執筆する意欲がなくなりました。また、動作が重く感じ、読み込み速度やSEOもMediumに劣るため、さらに調整する気力もなくなりました。 -
Matters/簡書…など
Mediumのプラットフォームに似ていますが、収益化を考えていないため、適していません。 -
wix/weebly は商用サイト向けすぎて、無料版の広告が強すぎます。
-
Google Site（本記事）
-
Github Pages + Jekyll
-
まだ探しています >>> ご意見をお待ちしています
Google Siteについて
大体2010年頃に旧版のGoogle Siteを使ったことがあります。当時は個人サイトの-> ファイルダウンロードセンターページとして使っていました；記憶は少し曖昧ですが、その頃のレイアウトは重くて、インターフェースも使いづらかったとだけ覚えています；10年経って、このサービスはもう終了していると思っていましたが、偶然ドメイン投資家がドメインパーキング用のページとして販売連絡先を載せているのを見かけました：
第一印象で「わあ！ビジュアルがいい、ドメイン販売のためにページを作ったんだ」と思いました。
左下のカーソルをよく見ると、「わあ！これが Google Site で作られている」と気づきました。10年前に使っていたインターフェースとは全く違い、調べてみると Google Site はサービスを終了しておらず、2016年に新バージョンをリリースしていました。もうすぐ5年経ちますが、少なくともインターフェースは時代に合っています！
完成品の展示
何も言わずに、まず私の作った完成品を見てください。もし「心が通じ合う」と感じたら、ぜひ使ってみてください！
試してみませんか？
読む時間を節約するために、まず結論を述べます；私はまだより適したサービスを探しています。機能の更新は続けられていますが、Google Site は私にとって重要な点でいくつか満たせない部分があります。以下に使用中に感じた致命的な欠点を挙げます。
致命的な欠点
-
コードハイライト機能の欠点
機能はCode Block の背景色が薄くなるのみで色分けはされません。Gist を埋め込む場合は Embed JavaScript (iframe) を使うしかありませんが、Google Site は特別な対応をしておらず、高さがページの縮小に合わせて変わらないため、空白が多すぎたり、スマホの小画面では内外にスクロールバーが表示され、とても見づらくなります。 -
SEO 構造はほぼゼロ
「驚きましたか？予想通りですか？」Google 自身のサービスの SEO 構造は💩のようで、head meta（description/tag/og:）のカスタマイズは一切できません。SEOのインデックス順位はさておき、自分のサイトを Line や Facebook などのSNSに貼っても、プレビュー情報が全くなく、醜いURLとサイト名だけが表示されます。
利点
1.侵入性が低く、左下に浮かぶ感嘆符のみで、クリックすると「Google コラボレーションプラットフォーム 不正利用を報告」が表示されます
2. インターフェースが使いやすく、右側のウィジェットをドラッグするだけで簡単にページを作成できる
wixやweebly、またはcakeresumeのような感じですか？レイアウトやパーツをドラッグ＆ドロップして、入力するだけで完成します！
3. RWD対応、内蔵検索、ナビゲーションバー
4. ランディングページ対応
5. トラフィックに特別な制限はなく、容量は作成者の Google Drive の容量上限に準じます
6. 🌟 自分のドメインを紐付け可能
7. 🌟 GA分析の訪問者を直接連携可能
8. 公式コミュニティ で意見を集め、継続的にメンテナンスと更新を行っています
9. お知らせのサポート
10. 🌟 Youtube、Googleフォーム、Googleスライド、Googleドキュメント、Googleカレンダー、Googleマップを簡単に完璧に埋め込み、PC・スマホのレスポンシブ対応もサポート
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 Site 設定ページに戻る
右上の「歯車（設定）」をクリックし、「カスタム URL」を選択して、割り当てたいドメイン名または使用したいサブドメインを入力し、「割り当て」を押します。
割り当てが成功したら、設定ウィンドウを閉じ、右上の「 公開 」をクリックして公開します。
ここも少し待つ必要があります…DNSレコードの反映を待っています。。。
7. 新しいブラウザを開いてURLを入力し、正常に閲覧できるか試してください
もし 「ページを開けません」 と表示されても慌てないでください！少し待ってみて、1時間以上経っても開けない場合は設定に間違いがないか確認してください。
完了！
サブページ、ページパスの設定
ナビゲーションバーの目次のサブページは自動的に集約表示されます
設定方法は？
右側で「ページ」タブに切り替えます。
新しいページはドラッグ＆ドロップで既存のページの下に移動するとサブページになります。または「…」をクリックして操作します。
属性を選択してページのパスをカスタマイズできます。
入力パス名（例: dev -> http://www.zhgchg.li/dev）
ページヘッダーとフッターの設定
1.ヘッダー設定
マウスをナビゲーションバーに移動し、「ヘッダーを追加」を選択してください。
ヘッダーを追加すると、マウスを左下隅に移動させることで画像の変更、タイトル文字の入力、ヘッダータイプの変更ができます。
2. フッター設定
マウスをページの下部に移動し、「フッターを編集」を選択するとフッター情報を入力できます。
注意！フッター情報は全サイト共通で、すべてのページに同じ内容が適用されます！
左下の「目のアイコン」をクリックして、このページのフッター情報の表示・非表示を切り替えることもできます
サイトの favicon、ヘッダー名、アイコンの設定
favicon
サイトタイトル、ロゴ
設定方法は？
右上の「歯車（設定）」をクリックし、「ブランド画像」を選択して設定できます。設定後はページに戻り、「公開」を押すのを忘れないでくださいね！
ページ最終更新情報の表示/非表示、ページ内アンカーリンクのヒント
最終更新情報
ページアンカーリンクのヒント
設定方法は？
右上の「歯車（設定）」をクリックし、「閲覧者ツール」を選択して設定できます。設定後は必ずページに戻って「公開」を押して反映させてくださいね！
GA 分析のトラフィック連携
1.以下のリンクにアクセスして新しいGAアカウントを作成します https://analytics.google.com/analytics/web/?authuser=0#/provision/SignUp
2. 作成完了後に GA トラッキングIDをコピーする
3. Google サイトの設定ページに戻る
右上の「歯車（設定）」をクリックし、「分析」を選択して「GAトラッキングID」を入力してください。設定後は必ずページに戻って「公開」を押して反映させましょう！
サイト全体／ホームページのバナー通知設定
バナー公告
設定方法は？
右上の「歯車（設定）」をクリックし、「お知らせバナー」を選択して設定します。設定後はページに戻って「公開」を押さないと反映されませんのでご注意ください！
バナーのメッセージ内容、色、ボタンのテキスト、クリック先のリンク、新しいタブで開くかどうか、全サイトまたはホームページのみ表示を指定可能。
公開設定
右上の「公開 ▾」
変更内容を確認して公開できます。
検索エンジンのインデックス登録を許可するかどうかを設定でき、毎回公開前に内容確認ページを表示するかどうかを解除できます。
Javascript/HTML/CSSの埋め込み、大量の画像
Gist を例として
しかし、前述の致命的な欠点として、埋め込み iframe はページのサイズに応じて高さを自動調整できません。
挿入方法は？
「埋め込み」を選択してください
埋め込みコードの選択
JavaScript/HTML/CSS を入力でき、カスタムスタイルのボタン UI を作成できます。
また「画像」を選択して挿入すると、複数の画像を挿入でき、上記の私の城市一隅ページのように、ウォーターフォールレイアウトで表示されます。
埋め込んだ Google フォームがページ上で直接入力できない？
この理由は、フォームの質問に「ファイルのアップロード」項目があるため、ブラウザのセキュリティ上の問題で iframe を使って他のページに埋め込むことができない からです。そのため、アンケート情報だけが表示され、記入ボタンをクリックすると新しいウィンドウで記入画面が開きます。
解決策はファイルアップロードの問題を取り除くだけで、ページ内で直接入力できるようになります。
ボタンコンポーネントのURLにアンカーリンクを入力できない
EX: #lifesection はページ上部に置いて、目次ナビゲーションやページ下部のGoTopボタンに使いたいです。
公式コミュニティで調べたところ、現在はできません。ボタンのリンクは1. 外部リンクを新しいウィンドウで開く、または2. 内部ページを指定するしかないため、私は後でサブページを使って目次を分割しました。
関連記事
Post Mediumから変換されたもの by ZMediumToMarkdown.
コメント