ホームページとアクセス解析

このホームページ（naruoffice.com）の作りと、アクセス解析（Google アナリティクス、略して GA4）を入れた話です。このサイトは、作る・公開する・お問い合わせを受け取る・公開前に点検する・読まれ方を測る、までを個人で組んで、いまも動かしています。それぞれをどう考えて作ったかと、アクセス解析でつまずいたことを、順に書きます。ホームページの制作を頼もうか考えている方にも、自分のサイトにアクセス解析を入れようか迷っている方にも、判断の材料になればうれしいです。

このサイトは何のためにあるか

このサイトは、制作を頼もうか考えている方が「この人に頼んで大丈夫か」を確かめに来る場所として作りました。言葉で「作れます」と書くより、実物を見ていただくほうが早いと考えたからです。

そのため、制作実績にはブラウザでそのまま遊べるゲームや、作った道具の紹介を載せ、いくつかは作り方を制作記事に書いています。一部は準備中・非公開ですが、遊べる作品は実際に動かして確かめていただけます。トップページの見出しを「見せるだけでなく、触って確かめられる実績を。」にしたのも、この考えからです。

自分の作品のほかに、依頼を受けて作ったサイト（HIK金属さまの公式サイト）もあり、制作実績のページで紹介しています。

どう作って、どう公開しているか

このサイトは、素の HTML と CSS で作っています。大きな仕組み（フレームワーク）は使っていません。サーバーには、できあがったページのファイルを置いているだけで、サーバーの上で動くプログラムやデータベースは置いていません。文字の形（フォント）や天気の表示、お問い合わせの受け付け、アクセス解析には、外のサービスを使っています。

本文は白い背景に大きめの文字で読みやすくし、トップの見出し部分だけ、星や月が動く夜空にしています。動きは控えめにして、端末で動きを減らす設定にしている方には、動きが止まるようにしています。

公開先はロリポップのレンタルサーバーで、SSL（アドレスが https で始まり、通信が暗号化される仕組み）を付けています。

手元で変更を確かめたら、GitHub（コードを保管しておく場所）に送ります。送ると、自動でサーバーにファイルが上がる流れにしています。サーバーに手でファイルを置く作業が無いので、置き忘れや、古いファイルで上書きしてしまう心配が減ります。

見た目は、スマートフォン・タブレット・パソコンの3つの幅で確かめています。同じページでも、画面の幅が変わると、文字の折り返しやボタンの並び方が変わるからです。

記事は、WordPress で書けるようにしました。ただし WordPress は、Local（パソコンの中で WordPress を動かせるアプリ）を使って自分のパソコンの中に置いているだけで、公開されるのは今までどおりの HTML のページです。WordPress を入れる時に、やめることも前提にして、いつでも元に戻せる形で組みました。WordPress をやめても、サイトはそのまま動き続けます。

お問い合わせを受け取る仕組み

お問い合わせは、サイトに置いた自前のフォームから受け取っています。フォームは独立したページにして、入力欄を大きくとりました。送信されると LINE に通知が届くので、メールを開かなくても、すぐに気づけます。

あわせて、内容に合わせた返信メールの下書きを AI が作ります。ただし、自動では送りません。下書きを読んで、直して、送るかどうかを決めるのは自分です。

フォームには、機械的な送信を静かに弾く仕組みも入れています。短い間に続けて送られた時や、1日の件数が多すぎる時には、受け付けを止める上限もあります。作り方は、LINE通知とAI返信下書きの仕組みの記事に詳しく書きました。

公開した後に壊れないための点検

このサイトには、公開する前にサイト全体を自動で点検する仕組みを入れています。変更を送ると、サーバーに上げる前に点検が走り、点検で問題が1つでも見つかれば、公開をそこで止めます。

点検しているのは、たとえば次のようなことです。

• 全部のページで、上の見出し部分（ヘッダー）と下の部分（フッター）がそろっているか
• 新しい記事が、検索エンジン向けのページの一覧（サイトマップ）に載っているか
• 検索に出さない設定のページが、知らないうちに紛れ込んでいないか

どれも、人が覚えておくだけでは抜けやすい種類のことなので、機械に任せています。この点検は手元で動かすだけでなく、サーバーに上げる直前にも必ず通る作りにしました。手元で点検し忘れた日でも、点検している種類の問題があれば、公開の前に止まります。公開した後に問題が見つかった時のために、1つ前の状態へ戻す手順も書き残しています。

見た目を作ることは、どの方法でもできます。違いが出るのは、公開した後に壊れにくいかどうかという裏側だと考えて、ここに手をかけています。ホームページを頼んでいただく場合も、見た目だけでなく、公開した後に壊れにくいところまで含めて作れます。

アクセス解析（Google アナリティクス）を入れました

公開した後に、どのページがどう読まれているかを知るために、Google アナリティクス（GA4）を入れました。入れたこと自体より、入れる前に決めたことのほうが大事だったので、そちらを中心に書きます。

何を知るために入れたか

記事やページを良くする材料として、知りたかったのは次の4つです。

• どのページ・どの記事が読まれているか
• 検索やほかのページなど、どこから来ていただいたか
• お問い合わせが送られたか
• 制作実績で、作品のどのボタン（遊ぶ・記事を読むなど）が押されたか

送らないものを、先に決めた

入れる前に、まず「送らないもの」を決めました。お名前・メールアドレス・お問い合わせの内容です。お問い合わせについて送るのは、「送信が完了した」という事実だけにしています。広告のための機能も使っていません。先に線を引いておくと、あとで設定を足したり変えたりする時に、その線を越えていないかを確かめる物差しになります。

説明と実際の動きを、同じ日にそろえた

何を送っているかは、プライバシーポリシーの「アクセス解析について」に項目ごとに書き、止め方もあわせて載せました。そのうえで、アクセス解析を動かし始めるのと、プライバシーポリシーを書き換えるのを、同じ公開に入れました。仕組みだけが先に動いて、説明は「導入していません」のまま、という時間を作らないためです。

自分の閲覧は数えない

確かめるために自分で何度もサイトを開くので、そのままでは、読まれ方の数字が自分の分でふくらみます。そこで、自分のブラウザに「このブラウザでは数えない」という印を付けられるようにしました。印はブラウザの中に保存されるので、ふだん使うブラウザで付けています。同じ印は、数えられたくない方のための止め方として、プライバシーポリシーにも載せています。

アクセス解析で、つまずいたこと

入れる時につまずいたことを2つ書きます。どちらも、これから入れる方が同じ所で迷わないための記録です。

初期の設定では、フォームの操作も送られる状態だった

GA4 には、ページの読み進め具合やリンクのクリックなどを自動で数える機能があり、初期の設定のままでは、フォームを操作し始めたことなども Google に送られる状態でした。これでは、プライバシーポリシーに書いた、お問い合わせについて送るのは「送信が完了した」という事実だけ、という説明と食い違います。公開する前の確認でこれに気づき、フォームの操作を数える設定だけをオフにして、説明と実際の動きをそろえました。自動で数える機能は便利ですが、自分で書いた説明より多くのことを送っている場合があります。

お問い合わせの送信が、レポートに出るまで時間がかかった

公開した後、テストでお問い合わせを送ると、その場の動きを見る画面（リアルタイム）には送信が出ました。ところが、あとから集計を見るレポートの画面には、すぐには出てきませんでした。時間帯（タイムゾーン）や除外の設定を見直しても原因は見つからず、しばらく時間をおいてから見ると、出てきていました。処理の遅れでした。入れた直後にレポートに出なくても、壊れているとは限らず、反映に時間がかかることがあります。

まとめ

見た目だけでなく、公開した後に壊れにくいことと、読まれ方を正しく測ることまでを、ひとつながりで組んでいます。アクセス解析も、入れただけで終わらせず、何を知りたいか・何を送らないかを先に決め、プライバシーポリシーの説明と実際の動きをそろえてから入れました。

作った作品は制作実績のページで見られます。ホームページの制作や、この記事で書いたことについてのご相談は、お問い合わせのページからお願いします。

（この記事の文章の下書きはAIですが、人の観点からも見て修正し書いています。）