2025年12月26日補足: 本記事はGoogle Sitesで作成された過去サイトから移転したものです。一部、スタイルが反映されていません。
ふと個人サイトをつくりたくなり、つくってみました。特筆すべきは、Google Sitesでつくっているという点です。エンジニアなのに。
……というのはジョークですが、あまり見かけませんね。Web系のエンジニアにおいては、気になるフロントエンド技術を試すついでに個人サイトをつくる、といったケースをよくお見かけします。私も最近Remixに入門していたので、当初はRemix × Cloudflare Pagesあたりでつくろうかなとおもっていました。
しかし、たいしたことも書かないし凝ったことをしようともおもっていないので、なるべく管理工数を減らしたいなと思い始めました。そこで最初に目を向けたのはNotionページの独自ドメイン運用です。今日では、個人による個人サイトとしての利用のみならず、ヘルプページ, 採用ページとして企業さんが利用されているケースも多いですね。
Notionで文章を書きそれをそのまま公開することができる簡便さは魅力的です。また、特段工夫をせずとも端正な見た目を担保できる点もいいですよね。
しかしその簡便さとのトレードオフで、どうしてもスタイルに「Notionぽさ」が出てしまいます。今回私の場合は、そこからあと二三歩だけ見た目にこだわれればとおもい、Notionは不採用としました。
そして登場するのが今回使用したGoogle Sites(日本語名 : Google サイト)です。「懐かしい」とすらおもう方もいらっしゃるかもしれません。Wikipediaを見るとリリースは2008年、16年前とのことです。そんな老舗のGoogle Sitesを2024年に新規採用した所感を、以下に書き連ねていきます。
真っ先に特筆したいのが、Google Sitesは2023年からNoto Sans JPが使えるようになっているということです。Google Sitesは他のGoogle系プロダクトであるGoogle SlidesやGoogle Docs同様、Google Fontsの一部を使用することができます。昨年からそのリストにNoto Sans JPが加わりました。これによって、Google Sitesでつくるサイトの見た目にさらに「きちんと感」を出せるようになったと感じています。
次に書いておきたいのが、「意外といろいろできた」ということです。先述のNoto Sans JP同様、様々なWebフォントを使用できますし、任意の色を使用できるハイライトや、code blockまであったのは期待以上でした。さすがにシンタックスハイライトはできないですが、複数行表示も可能です。
alice
bob
carol
設置したオブジェクトごとにスタイルを設定するだけでなく、グローバルに適用される「テーマ」を編集することも可能です。下記画像はその設定の一部です。
上記画像を設置して気が付きましたが、代替テキストも設定できました。やりおる。
その他挿入オプションも、様々用意されています。特にGoogle製プロダクトとの連携が豊富ですね。
Google Analyticsとの連携や、Faviconの設定も可能です。メタディスクリプションの設定はできなさそうですが、そもそもやることを減らすために選んだ手段です。むしろちょうどいいでしょう。
「ナビゲーションに表示」を有効にすることで、自動的にヘッダーメニューもしくはサイドメニューを作成してくれます。ページをシンプルに保ちたかったため、今回このサイトでは使用していません。
その代わり今回は、手動で古典的なパンくずリストを作成してみました。リンク先候補も出してくれて使いやすいです。
その他機能をいくつか紹介すると、
- Google Docs等にもある編集履歴画面
- 公開前に、前回との差分を表示
- スマホ, タブレット, PCサイズのプレビュー機能
- Google Docs等のファイル共有と同じやり方で、公開後のサイトを特定のユーザーのみ閲覧できるよう設定可能
- 検索エンジンに載せない設定が可能
「意外といろいろでき」ましたね。
思い立ったときにWYSIWYGでさくっと更新でき、履歴管理もされ、ホスティングの管理も不要で、無償。……ありがとう！！！
以上、Google Sitesを使ってみた所感でした。
なお、今回ドメインはCloudflareで管理しています。以下備忘録。
- Google Sitesとの連携は、wwwサブドメにCNAMEレコードを設定して行います
- 「DNSのみ」に設定する必要あり
- プロキシするとERR_TOO_MANY_REDIRECTSとなります
- AレコードでAPEXドメインとフェイクのIPを登録して、ページルールにてAPEXドメインはwwwサブドメへ301リダイレクトするよう設定しています
- httpからhttpsへのリダイレクトはGoogle Sitesの方で行ってくれているようです