さよならWordPress——生成AIでウェブサイトをリニューアルした話
もう何年も、個人事業のウェブサイトをWordPressで運用してきた。ウェブサイトをつくるならWordPressだろう、と当然のように思っていた。他の仕組みを調べるのもおっくうで、WordPressくらいしか知らなかった。
ただ、サイトの更新が滞っているのは分かっていた。デザインを直したい、文章を差し替えたい——そう思っても、管理画面を開いて手作業であれこれ操作するのが面倒で、つい後回しにしてしまう。時間もないし手間もかかる。正直なところ、半ば放置していた。
ここ数年、仕事で生成AIを使う場面が増えてきた。であれば、ウェブサイトの管理にも使えないだろうか。AIにチャットで指示を出して、サイトを更新できるような仕組みにできないか。そんなことを考え始めたのが、今回のリニューアルのきっかけだった。
Claudeに相談してみた
まず、Claudeに相談してみた。
返ってきた提案は、Astroという静的サイトジェネレーターとVercelというホスティングサービスを組み合わせる方法だった。コードをGitHubにプッシュすれば、自動でサイトが更新される仕組みが作れるという。SEO的にはWordPressだから良いわけでもなく、それよりコンテンツの質や更新頻度の方が重要だという説明にも納得感があった。
事業主として無料のサービスに自社サイトを置いて大丈夫なのかなど、いくつかの懸念もClaudeに相談して一つずつ解消した。生成AIへの相談は、専門家への壁打ちに近い感覚だった。人間の専門家に頼むよりもハードルが低い。まず生成AIで進めてみて、ダメなら外注すればいいやと考えた。
3つの壁打ち
リニューアルは、大きく3つのことを並行して進めた。デザイン、技術、コンテンツだ。
デザインが一番苦労した。自分にはデザインの知見がなく、「こういうサイトにしたい」という完成イメージもなかった。そこで、まずブランディングの方向性からClaudeと話すことにした。一般的なコンサルタントのイメージではなく、穏やかで誠実な印象にしたい。そういう抽象的なイメージを伝えると、カラーパレットを複数パターン提案してくれた。
最初は暖色系のパレットを選んだ。しかし、実際にウェブサイトに載せてみると、しっくりこない。結局、青緑系に変更することにした。このとき感じたのは、生成AIだと色の変更が一発でできるという利点だ。WordPressなら、自分で一つひとつ色を調整し直す作業が必要だっただろう。
ロゴマークも、「つなぐ」というコンセプトを伝えて複数案を出してもらい、重なる円のモチーフに決めた。特徴セクションのイラストは、グラフィックレコーディング風のテイストで画像生成AIを使って作った。すべて、AIとの対話の中で手探りで形にしていった。
技術面は、Claude Codeを使ってAstroでサイトを構築し、GitHubからVercelに接続する方式とした。元エンジニアなのでこの部分は楽勝で、大きな問題なく進められた。初回コミットから本番公開まで約10日間だった。技術的な構成に関心のある方は、末尾の補足を参照いただきたい。
コンテンツでは、まずウェブサイト全体のトーンガイドを作るところから始めた。このサイトの読み手は、検索でたどり着く人ではなく、名刺を交換した相手がQRコードから訪問する人だという前提を置いた。それによって、文章のトーンや情報の粒度が決まっていった。
別途整理していた自分のポジショニングをもとに、特徴を導き出し、サービスメニューとして整理した。もともと「コンサルティング」以上の具体的なメニューがないに等しかったので、この作業から始める必要があった。個別の説明文だけでなく、サイトのトップから最後までの動線全体も含めて、生成AIと相談しながら構成を決めた。
自分の中にある考えが、AIとのやり取りを通じて少しずつ言葉になり、実体に近づいていく。その感覚は、なかなか得がたいものだった。
できあがったもの
こうしてリニューアルしたサイトがこちらだ。
旧サイトからのコラム記事の移植も、生成AIに「移植して」と依頼すれば済んだ。今は、AIにチャットで指示を出せば、サイトが更新される状態になっている。構築したばかりではあるが、WordPressの管理画面を触っていた頃と比べて、すでに圧倒的に楽だと感じている。
コストの面でも、今回は普段から使っているClaudeのサブスクリプション（MAXプラン、$100/月）の範囲内で完結した。デザイナーや制作会社に外注していたら、この金額では収まらなかっただろう。
ただし、安くできたからといって、簡単だったわけではない。技術的な仕組みはAIに任せればそれなりに形になる。しかし、デザインをどうするか、コンテンツとして何を伝えるかは、自分で考え抜かなければならなかった。これは外注しても同じことだ。発注する側として「どんなデザインにしたいか」「何を伝えたいか」を決める大変さは変わらない。AIが代わってくれるのは、その先の制作作業であって、考える部分ではない。
4月から「はじめまして」の機会が増えるのを前に、自分の考えを知ってもらうための場所を整えておきたかった。今回のリニューアルは、そのための準備だった。
技術的な補足
関心のある方向けに、今回の移行の技術的な構成をまとめておく。
- フレームワーク: Astro v5（静的サイト生成）
- ホスティング: Vercel（無料プラン）
- ソース管理: GitHub
- 問い合わせフォーム: Formspree（無料プラン）
- CSS: フレームワーク不使用（素のCSS）
- コラム記事: Markdownファイルで管理（Astro Content Collections）
WordPressからの移行では、既存の17記事をMarkdownに変換し、旧URLから新URLへの301リダイレクトを21件設定した。ドメインはConoHa WINGで管理したまま、DNSの向き先だけVercelに変更している。
コードをGitHubにプッシュすると、Vercelが自動でビルド・デプロイする。サイトの更新は、生成AIに指示を出してコードを修正し、GitHubにプッシュするだけで完了する。