一晩でサイト6つを作り直した記録

ひとりでサイトを作り、運営しながら、その日の作業を残していく日誌の1本目です。今回は2026年10月18日17時22分から翌0時50分まで、ひとつのリポジトリ(モノレポ)にあるサイト6つをまとめて手直しした話です。

数字で見る一晩

git の履歴から測った値です。

自分で運営しているのは site30cut(このサイト)、Calcmoa、文字数カウント、韓国の祝日カレンダーの4つで、残りの2つはカフェのお客様と出張カーコーティングのお客様のサイトです。

1. ページが1枚なら、検索で見つかる場所も1か所

最初の問題は単純でした。ホーム1枚にすべてを載せていたため、どの検索語でも行き着く URL はホームだけでした。そこでサイトごとに、紹介・流れ・料金・FAQ・お問い合わせといったテーマ別の下層ページを4言語(韓国語・英語・日本語・繁体字中国語)で用意しました。あわせてサイトマップの更新日(lastmod)と RSS も広げました。NAVER は RSS を、Google は主にサイトマップを読むためです。

同じ時間に、Search Console と GA4 を読み取り専用で照会するスクリプトも作りました。表示はあるのに順位が低い、またはクリックがないページを拾い、次に何を補強するかを決めるのに使います。結果の数字は、データがたまったら次の日誌で扱います。

2. 同じメニューを6回作らない

出張カーコーティングのお客様のサイトで先に作った左側の開閉メニュー(グループのアコーディオン、メニュー検索、同義語・韓国語の初声検索、ESC・フォーカストラップ)が使いやすかったので、共通パッケージに移しました。今は各サイトの nav.config.ts にグループと同義語を書くだけで、6サイトが同じように動きます。

入力の案内も同じように整理しました。計算機・文字数ツール・休暇プランナーがそれぞれ持っていた「空欄・範囲外・不正な数値」の案内を共通の form-kit にまとめ、動作と文言はそのまま残しました。

3. 文章のかわりに動く図解

説明の段落が長いと読み飛ばされます。そこで制作の流れは5段階のタイムラインに、ローン計算の結果は元金・利息のドーナツに、連休はカレンダーの帯に変えました。元の文章は消さずに「詳しく見る」の中にたたんであります。アニメーションは画面に見えている間だけ動き、OS で「視差効果を減らす」をオンにしている人には止まった場面を見せます。

4. 絵文字をアイコンへ

メニューや図解のあちこちで使っていた絵文字は端末ごとに形が違い、正直なところ自動で作ったように見えました。Lucide のアイコン115種(ISC ライセンス)に置き換え、共通の Icon コンポーネントひとつを6サイトで共有しています。

5. 小さくても抜かせないこと

• PWA 第1段階: 6サイトにウェブマニフェストとアイコンを入れました。サービスワーカーはあえて入れていません。インストール条件に不要で、キャッシュが古い画面をつかんだままになる危険のほうが大きかったからです。
• 画像の出典: お客様サイトの写真をブランドロゴやナンバープレートが写らない無料写真に替え、各サイトの紹介ページに出典と撮影者を記しました。
• モバイルの横はみ出し: 登場アニメーションの待機位置のせいで 390px の画面が 426px に広がる問題を overflow-x: clip で防ぎました。

次にやること

新しい下層ページが実際に検索に載るかどうかは、数日後に Search Console のデータで確かめます。この日誌もその数字とともに続けます。サイトの作り方が気になる方は制作の流れとポートフォリオもどうぞ。