IT とは無縁の小さなお店でホームページを運用する際に Google サイトという選択肢
自分の父と叔父が自営業を営んでおり、自分が Web 系のエンジニアということもあり、そのお店のホームページを整備することになりました。
Web サイトを公開する方法は様々ありますが、その中でも Google サイト（Google Sites）を利用する選択をしました。
導入の背景、導入するに当たり検討した事、実際運用してみてどうかを書いていきます。
前提情報
お店
父と叔父が家族で経営している自営業のお店。 IT とは無縁のお店だが一応ホームページはある。（ただし15年ぐらい前に作られたもの）
潤沢にお金があるわけではないので、ホームページの運用にお金を掛けたくはない。
店主の IT スキル
Google のアカウントを持っていて、色々な Web サービスを利用している。今の 20 代ぐらいの人たちと相違ないぐらいには IT スキルはある。（50歳超えなので、その年代では確実にできる方）
HTML ＋ CSS を書くことは出来ないが、ボタンをポチポチ押してホームページを作る事ぐらいは可能。
ホームページを整備する背景
スマートフォンに対応したい
現在、ほとんどの日本人は一人に一台（以上）スマートフォンを持っています。そして、そのスマートフォンを使って、お店をネットで調べる事が当たり前の時代になりました。
お店側としては「スマホで見やすくしたい」「検索結果の上位に表示されたい」という要望があります。
古き良きホームページ
前述の通り、 IT とは無縁のお店ですが、一応ホームページはあります。”阿部寛さんのホームページのような”と言うとイメージしやすいでしょうか。
ただし、 CSS 崩れがあったりしますし、当然、スマートフォンに対応していないです。
さて、これらをまとめると
- スマートフォン対応化
- CSS 崩れの改修
- SEO 的に問題がありそうな箇所の修正
を行う必要がありそうです。
レガシーでメンテナンスコストが高い
この古き良きホームページをよく見ると<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">という宣言から書き始められている HTML 4 の時代のものでした。
また HTTPS には対応していないです。
聞く話では、ホームページ自体はホームページビルダーというソフトウェアを使って作られており、このソフトウェアもだいぶ古いです。（おそらく Flash 全盛期の時代のもので、初代 iPhone ですら発売されていたかどうか、といった感じです。）
さて、このままスマートフォン対応に突き進むと流石に辛いです。
そのため、ホームページの改修だけではなく、それらを継続的にメンテナンスできる環境になるよう、全体的にリプレイスを行うことにしました。
ホームページの運用はエンジニアじゃない人が行う
リプレイスするにあたり、ただ作ったものを納品するだけであればシュッと作って GitHub Pages などにホスティングすれば良いのですが、運用するのは田舎町にある小さなお店の店主です。
店主はその後も「ニュース」や「お休み情報」などを更新できるようにする必要があります。
運用の事を考えると HTML + CSS で作成するのは現実的ではなく、エンジニアじゃない人が触ってもわかるツールで作るように検討する必要があります。
背景のまとめ
これまでの背景をまとめると
- ホームページをスマートフォンに対応させる（ついでに細かい修正も）
- ホームページの作成ツールからリプレイスする
です。
いい感じのホームページの作成ツールがあれば、自動的にスマートフォン対応もクリアできます。
検討項目
ホームページの作成ツールも様々あるので、今回の要件をリストアップしていきます。
必須
- 無料で使えること
- （独自ドメインなどにもお金を掛けたくはない）
- それ自体が Web サービスであること
- ソースコードを直接書く必要がない事
- 直感的に編集できると嬉しい
- 自動でスマートフォン対応
- サービスのメンテナンスが行われている事
- ドキュメントがしっかりされていると嬉しい
- 保存がバージョン管理されていること
- 誤って上書き保存した時でも戻す事が可能
あると嬉しい
- 導入が簡単であること
- そのサービスのアカウント作成から公開までに掛かる工数が少ない
- テンプレートなどあると嬉しい
- サービスのコミュニティが活発であること
- ググれば情報が出ること
- 共同編集や下書き状態でのプレビューができる
- アカウント権限周りがちゃんとしている
- HTTPS 対応
結果
最終的に Google サイトと、Wixで悩みましたが、 Google サイトにしました。
評価ポイントとしては、導入コストが低いのに抑えるべきところをちゃんと抑えている点です。
もともと Google のアカウントを持っており、テンプレートから簡単に作成出来ました。
更に、自分を含む他のユーザーを招待して、適切に権限付与できる事が良かったです。これにより、「なんかよくわからないけど、ホームページが壊れた」と言われたときに、リモートでも確認や編集をすることが出来ました。
導入ロードマップ
0. Google アカウントの準備
アカウントが無い場合は作る必要があります。
このときの Google アカウントは、なんちゃら for business とかではなく、普通のアカウントで大丈夫です。
1. プロトタイプの作成
とりあえず自分のアカウントで Google サイトで作成します。
何だかんだこれが一番キツかったのですが、もともとあったページからコンテンツ（テキスト）をコピーして、 Google サイトの編集画面に貼り付けました。
ビジュアルエディタなので、エンジニアじゃない人にとっては便利ですが、エンジニアの自分としてはお辛い作業でした。
あと、テキストを画像で貼り付けている箇所もあり、それらを手打ちしていたりしました。
2. 店主が管理する Google サイトに移行
先程作った Google サイトに、非公開のまま店主を招待しました。
店主にそのサイトをコピーさせて、店主がファイルのオーナーになるようにしました。
（ Google サイトは、 Google Documents のように Google Drive 上にファイルのような形で保存されるので、サイトをまるごとコピペ出来ました。）
3. コンテンツの整備
情報に間違えがないか確認をしてもらいました。
また、 Google サイトの編集画面に慣れてもらうためにフォントや画像を変えたりしてもらいました。
4. 新ホームページの公開
Google サイトでは、https://sites.google.com/view/{任意の文字列}/のように指定してサイトを公開出来ます。
今回、独自ドメインは設定していませんが、ちゃんとやるなら設定したほうが良いと思います。
5. 旧ホームページの閉鎖
旧ホームページには、トップページに「サイトを移行しました（URL）」と書いて他のページを削除しました。
本当は 301 でリダイレクトをしたかったのですが、ホスティングしているサービスの情報が少なすぎて諦めました。
その場合、 JavaScript でリダイレクトすることが SEO 的に正解かと思われますが、”ホームページビルダー”というソフトを使う必要があり、諦めました。
（自分はそのお店の PC に常に触れるわけではないので、基本的に旧ホームページの操作は店主に任せる形になります。かと言って店主に JavaScript コードを書かせることは無理だろうという判断です。）
6. Google Map 上のウェブサイトのリンクを変更
Google ビジネス プロフィールというサービスに登録して、マップ上のウェブサイトを変更します。
こちらは既にお店で登録していたので、ウェブサイトを変更は店主に行って貰いました。
7. Google Search Console からインデックス登録をリクエスト
インデックスに登録されていないと検索結果に出ないので、 Google Search Console からインデックス登録をリクエストします。
この時、入力された Web サイトの所有者であることを証明する必要があります。おそらく Google サイトを使う場合は Google Analytics で検証する方法だけが可能かと思われるので、事前に Google Analytics を設定しておく必要があります。
これについては、後ほど問題としても記述しています。
Google サイトを使ってみて出会った問題
そもそも Google サイトで作ったサイト（しかもドメインはsites.google.com）は Google の検索結果に出るのか？
Google Sites Examplesなどで紹介されているページは本当に使っているのか？と疑問に感じます。
同時に、今回と同じような環境（ドメインにお金を掛けられないお店のホームページ）というものは、ちゃんとインデックスに登録されるのか？と疑問でした。
この疑問を解決するには少々のググり力が必要で、
-
site:sites.google.comで検索 - ツールから
日本語のページを検索を選択 - 適当に期間を設定
こちらで検索することでいい感じのサイトが出てきます。
ここで出てきたお店などの名前をコピペして検索し、検索結果に出ればインデックス登録を確認できます。
確認したところ、ほぼ全て検索結果の一番上に出てきました。
なかなか Google にインデックスされない問題
インデックス登録されることは確認されましたが、作ったホームページが数週間経っても Google の検索結果に出てきませんでした。
SEO などに精通している人にとっては常識かもしれないですが、新規でサイトを作った際は Google のクローラーにちゃんと伝える必要があるようです。
クローラーに伝えるには Google Search Console からインデックス登録をリクエストすればよいのですが、その前に Web サイトの所有者であることを証明する必要があります。
所有者の証明に Google Analytics を使うので、まずは Google Analytics のアカウントを作成 ＆ Google サイトに設定をします。
とはいえ、これを詳しく解説していると１つの記事が書けてしまうので、他の記事をご参考ください。
Google Search Console では、プロパティを追加で URL プレフィックスの方に公開したサイトの URL （https://sites.google.com/view/{任意の文字列}/）を入力し、” Google Analytics アカウントを使用する”から確認を押します。
所有者確認が完了したら、” URL 検査”から公開したサイトの URL （https://sites.google.com/view/{任意の文字列}/）を入力します。
” URL が Google に登録されていません”と表示されていれば、”公開 URL をテスト”のボタンからリクエスト可能かテストして、パスすれば”インデックス登録をリクエスト”のボタンを押します。
これで数日〜数週間後にインデックスに登録されるようです。（自分の場合は申請しましたがまだ確認出来ていないです。）
2022/06/09追記
Google 検索にヒットするようになりました。 1 ヶ月ぐらいですね。
Lighthouse の SEO が 100 にならない問題
シンプルなページなので Lighthouse の SEO が 100 になってほしいのですが、 89 止まりでした。
Document does not have a meta descriptionと書いているので、 description の meta タグを設定すればいいのですが、 Google サイトでは meta タグを設定出来ないようです。
これに関しては、 Lighthouse の SEO が 100 になることが本当に正解なのか、わからないので、とりあえず問題はないと見なしています。
おわりに
IT とは無縁の小さなお店を経営している人は、 Zenn というサービスを知らず、この記事にたどり着く事が無いかもしれません。
それでも、もし今後 Google サイトを使ってみようかなと検討している人や、自分の身の回りに似たような境遇のお店がある人に届くと幸いです。
備考
実際に Google サイトで作られているサンプル
参考にしたサイト
Discussion