WordPressから方針転換へ#

スタート時点では、自身のブログに相乗りする形で WordPress で運営していました。

ただ、

1. 予約機能のような動的な仕組みは持たせない
2. 個人店レベルなので、そもそもアクセス数は少なめ

という前提だったので、ブログも含め Astro + Firebase Hosting の静的サイトのほうがコストも抑えられて合っている、と判断して乗り換えました。

静的サイトにしてよかったのはこの2点です。

• 維持費がほぼ0 … サーバーを常時動かす必要がなく、ランニングコストがかからない
• 今後のリニューアルがしやすい … WordPressを挟まないという仕組み的に、AIエージェントに「ここをこう直して」と頼みやすく、手直しのハードルがとても低い

コストも抑えられて、なおかつ手直しもしやすい。 静的サイトはすごくぴったりでした。

技術スタック#

ざっくりこんな構成です。

Astroは「基本は静的だけど、必要なところだけ動きを足せる」のが選んだ理由です。お店紹介・メニュー・アクセスといったほぼ変わらないページと相性がよく、お知らせのような一部だけ動きをつけたい箇所にも対応できました。

ホスティングはFirebaseにしました。コマンド一発で公開でき、無料枠で十分まかなえる規模なので、運用がとても楽です。

デザインAI、最初は専用ツール → すぐ上限 → Claudeへ#

正直、ここが一番伝えたかった部分です。

最初は「Web専用のデザインAI」でデザインを起こそうとしました。見栄えの良いものは出るのですが、無料の利用枠がすぐに上限に達してしまい、試行錯誤の途中で手が止まってしまいました。

そこで「ダメ元で」と思い、Claude にデザインとサイトづくりを丸ごと頼んでみたところ、これが想像以上に良い仕上がりでした。

具体的に良かった点：

• 「月明かりのような優しさ」というサロンのコンセプトを伝えると、ダークネイビー × ゴールドの上品な雰囲気にまとめてくれた
• 文字のグラデーション、ふわっと現れるアニメーション、スクロールに追従するヘッダー、スマホ用メニューなど、「それっぽい演出」も一緒に組み込んでくれた
• 細かい調整も「もう少し優しい印象に」「ここは余白を広めに」といった言葉での注文に応えてくれる

「専用ツールじゃないと良いデザインは出ない」と思い込んでいたのですが、コンセプトとイメージを具体的に伝えれば、汎用的なAIでも十分すぎるものが出てくる、というのは大きな収穫でした。

工夫した点：お知らせを身内が自分で更新できるように#

静的サイトの弱点は「内容を変えるたびに作り直し（再公開）が必要」なこと。でも、お知らせはお店の人がエンジニアの手を借りずにサッと更新したいはずです。

そこで工夫したのが、お知らせだけはGoogleスプレッドシートに書き込めば、サイトに自動で反映される仕組みです。これなら、身内は使い慣れたスプレッドシートに1行追加するだけでお知らせを更新できます。

イメージとしてはこんな表をスプレッドシートに用意しておくだけ。

サイト側は、表示するときにこのスプレッドシートを読みに行って、新しいお知らせを自動で並べてくれます。仕組みとしてはGoogleが用意しているデータ取得の口を使っているだけで、特別なサーバーやデータベースは不要。追加コストもゼロです。

この方式のいいところ・注意点をまとめると：

• 👍 身内はスプレッドシートに書くだけ。サイトの作り直しは不要
• 👍 サーバーもデータベースも持たなくていい（=無料・楽）
• ⚠️ スプレッドシートの中身は実質公開情報になるので、外に出して困らない内容だけ載せる

「全部を作り込むのではなく、更新したい一箇所だけ外（スプレッドシート）に逃がす」という割り切りが、小さなお店のサイトにはちょうど良かったです。

まとめ#

• 動的機能が要らず個人店レベルの規模だったので、WordPressから静的サイト（Astro + Firebase）へリニューアル
• 結果、維持費はほぼ0、そしてAIエージェントで今後の手直しがしやすい形に
• デザインは専用AIの利用上限を機に Claude へ。コンセプトを言葉で伝えれば実用十分な仕上がり
• お知らせは Googleスプレッドシート連携で、コードを触らない身内でも更新できるように

コードに詳しくなくても、AIエージェントと「やりたいこと・困りごと」を言葉でやり取りしながら、ちゃんと運用できるサイトが作れた——というのが今回の一番の収穫でした。同じように身内やお店のサイトを頼まれた人の背中を押せたら嬉しいです。