2009年から運営している音楽ブログ「音楽的、音楽論的」を、全面的にリニューアルしました。

今回のリニューアルでは、デザイン案の検討からHTMLモック、WordPressテーマの実装、ステージング環境での検証、本番への反映まで、生成AIのCodexと対話しながら進めました。

こう書くと、「AIにサイトを作らせた」という話に見えるかもしれません。しかし、実際にやってみて強く感じたのは、生成AIによるWeb制作の中心は、コード生成そのものではないということでした。

何を残し、何を変えるのか。サイトをどの方向へ進めるのか。表示上の違和感をどこまで許容するのか。長年蓄積した記事や広告設定を、どのように守りながら移行するのか。

こうした判断を人間が引き受け、AIと何度も往復することで、ようやく実際に運用できるサイトになります。今回は、その過程を記録しておきます。

「古いデザインを新しくする」だけではなかった

「音楽的、音楽論的」には、楽評、音楽理論、音楽の科学、音楽哲学、音楽美学など、長年にわたって書いてきた記事があります。

したがって、今回の目的は、単純に見た目をきれいにすることではありませんでした。過去の記事を残しながら、現在の自分が何を書きたいのかを、サイトの構造として表現し直す必要がありました。

最初に考えていたのは、J-Popの解説や批評を大きな入口にして、そこから音楽理論、美学、哲学へ読者を案内する構成です。

しかし、モックを作りながら考えているうちに、これは自分の実際の執筆活動と少しずれていると気づきました。私はJ-Popを中心に継続的な批評を書いているわけではありません。直近で書いていたのも、フジロックや海外のカントリー・ミュージックなどについてでした。

そこで方針を修正しました。

J-Popに限定せず、「ヒット曲」「注目されている音楽」「ライブやフェス」を広い入口にする。その先に、批評、音楽理論、科学、美学、哲学の記事がある構成です。

最終的なサイトの言葉は、「いまの音楽を、もっと深く。」になりました。

この変更は、AIが自動的に正解を出した結果ではありません。AIが出した案を実際の画面で見て、「これは自分のサイトではない」「この言葉は少し気取って見える」「J-Popを主役にするのは無理がある」と私が判断した結果です。

生成AIとの制作では、最初の指示を守り続けることより、途中で自分の違和感を言葉にすることのほうが重要なのだと思います。

まず、WordPressを触らずにモックを作った

いきなり本番のWordPressテーマを変更するのは怖かったので、最初は中身のないHTMLモックから始めました。

白と黒を中心にし、余白とタイポグラフィを効かせる。従来の「ブログらしいブログ」ではなく、現代的なカルチャー誌のように見せる。トップページでは話題性のある音楽を大きく扱い、その下に批評や専門記事を配置する。

こうした方向を画面にし、少しずつ実際の記事やアイキャッチ画像を入れました。さらに、トップページだけでなく、個別記事ページのモックも作りました。

ここで重要だったのは、文章で「シンプルなデザイン」と説明するだけでは不十分だったことです。

文字の大きさ、余白、罫線、画像の比率、黒いセクションの分量は、実際の画面を見なければ判断できません。アイキャッチ画像をモノクロにする案も試しましたが、最終的にはカラーのほうが記事の入口として機能すると判断しました。

生成AIは、指示に応じて素早く別案を実装できます。そのおかげで、抽象的な好みを、比較可能な画面へ変えることができました。

モックから「運用できるWordPressテーマ」へ

デザインの方向が固まったあと、モックをWordPressのオリジナルテーマへ移しました。

トップページには、記事を雑誌の誌面のように配置できる仕組みを設けました。投稿画面から、メイン特集、「いまの音楽」、「批評と現場」、さらに話題から理論や哲学へ進むための枠を指定できます。未指定の場所には新着記事が入るようにしています。

個別記事では、カテゴリー、読了時間、カラーのアイキャッチ、見出しから生成する目次、関連記事、前後の記事などを表示します。過去の記事一覧には、年別・月別アーカイブも加えました。デスクトップでは記事の横、タブレットとスマートフォンでは記事一覧の下に配置しています。

ただし、モックが完成しても、WordPressテーマとして完成したわけではありませんでした。

実際のサイトへ入れると、固定ページが意図した表示にならない、過去記事一覧の2ページ目に記事が出ない、フッターのリンク先へ移動できない、黒い背景の上で番号が見えない、といった問題が次々に見つかりました。

これらは、一枚の完成画像を生成するだけでは発見できない問題です。既存データが入ったWordPressでリンクを押し、ページを移動し、古い記事を開いて初めてわかります。

AIとの制作でも、最後に必要なのは地道な動作確認です。

PHP 7.4で、最初のテーマはインストールできなかった

ステージング環境へ最初のテーマZIPをアップロードしたとき、インストールは失敗しました。

テーマがPHP 8.0以上を要求していた一方、サーバーはPHP 7.4.33だったためです。

この時点で、テーマ側の要件を見直し、PHP 7.4に対応させました。生成AIは新しい環境を前提にコードを組み立てやすい一方、現実のWordPressサイトには、長年の運用によって形成された環境があります。

最新の書き方を採用することと、既存環境で安全に動くことは同じではありません。

この経験から、AIを使った実装でも、サーバーのPHPバージョン、WordPress本体、使用中のプラグイン、既存テーマの状態を先に確認する必要があると改めて感じました。

本番の前に、バックアップとステージングを用意した

「音楽的、音楽論的」は2009年から続くサイトです。記事、画像、カテゴリー、URL、広告設定など、失いたくない資産が大量にあります。

そのため、本番サイトを直接変更せず、まずWordPressのファイルとデータベースをローカルへ保存しました。そのうえでXserverにステージング用のサブドメインを設定し、「WordPress簡単移行」でサイトを複製しました。

新しいテーマは、ステージング環境へインストールして確認しました。

トップページだけでなく、最新記事、古い記事、カテゴリー、固定ページ、アーカイブ、ページ送り、スマートフォン表示まで確認します。問題が出るたびにCodexへ状況とスクリーンショットを渡し、修正したテーマZIPを再度インストールしました。

この工程には、華やかさがありません。しかし、長く続いたサイトのリニューアルでは、デザイン以上に重要な部分です。

AIが短時間でコードを書けるようになったからこそ、バックアップ、検証環境、復旧方法といった運用上の安全策が、以前より重要になるのではないでしょうか。変更が速いほど、間違った変更も速く反映されるからです。

AdSenseは「テーマを変えれば終わり」ではない

このサイトではGoogle AdSenseを利用しています。

テーマを変更するときには、広告コードがどこから出力されているかを確認する必要があります。テーマ、プラグイン、自動広告の設定が重なると、広告が二重に表示される可能性があります。

新しいテーマには、AdSenseのパブリッシャーIDや広告スロットを設定できる項目を用意しました。一方、既存の仕組みを使う場合は、テーマ側の設定を空にして二重出力を避けられるようにしました。

また、ドメイン直下の ads.txt がテーマ変更後も表示されていることを実際に確認しました。AdSense管理画面の「広告を表示できる状態」という表示だけでなく、ブラウザから https://musicmusicologic.com/ads.txt を直接開いて確認しています。

最終的に、テーマ更新後の本番サイトでもAdSenseが動作するところまで確認できました。

サイトのリニューアルは、画面が新しくなった時点では終わりません。広告、アクセス解析、フォーム、外部サービスとの連携など、運用を支えていた仕組みまで引き継いで、初めて完了します。

人間が担当したのは、「価値判断」と「責任」だった

今回、Codexは多くのコードを書き、修正案を出し、テーマZIPを作り、手順を整理しました。私一人でゼロから同じ量のコードを書くより、はるかに速く進められたことは間違いありません。

しかし、サイトの方向を決めたのは私です。

J-Pop中心の構成をやめたこと。英語の大見出しが気取って見えると判断したこと。アイキャッチをカラーにしたこと。個別記事のサイドバーを付け、やはり不要だと戻したこと。アーカイブを一覧ページの横へ置き、モバイルでは下へ移したこと。AdSenseの既存資産を守るため、確認を重ねたこと。

こうした判断は、単なる正誤判定ではありません。「このサイトは何なのか」「自分は今後ここで何を書くのか」という価値判断です。

生成AIは、案を大量に出し、すぐ形にし、修正を繰り返すことが得意です。しかし、どの案を採用するか、どの違和感を無視しないか、どの段階で本番へ出すかは、人間が決めなければなりません。

そして本番サイトに何か起きた場合、責任を負うのも人間です。

生成AIとのWeb制作は、「指示」より「編集」に近い

今回の作業を振り返ると、私はAIへ一度だけ完璧な指示を出したわけではありません。

画面を見て、違和感を伝え、案を撤回し、別の方向を試し、実際の記事を入れ、ステージングで壊れている箇所を探し、また直す。その繰り返しでした。

これは、部下に仕様書を渡して納品を待つ感覚より、編集者がデザイナーやエンジニアと同じ画面を見ながら誌面を作る感覚に近いものでした。

生成AIを使えば、専門知識がすべて不要になるわけではありません。しかし、自分の曖昧な構想を動くものへ変え、それを見ながら考え直す速度は大きく上がります。

その速度によって、私は「J-Popを入口にする」という最初の企画が、自分の書き手としての実態に合っていないことにも早く気づけました。デザインを作ることが、編集方針を考え直す作業にもなったのです。

おわりに

「音楽的、音楽論的」は、新しいデザインになりました。しかし、今回本当に更新されたのは、外観だけではなかったのだと思います。

いま話題になっている音楽から入り、批評、理論、科学、美学、哲学へ進んでいく。長年書いてきた専門的な記事を捨てず、現在の音楽とつなぎ直す。そのための器として、サイトを作り直しました。

生成AIは、その過程で強力な共同制作者になりました。ただし、AIに任せたから完成したのではありません。画面を見て何度も「これは違う」「こちらのほうがよい」と判断し、古い資産を守る手順を踏み、本番で動くところまで確かめたから完成しました。

生成AIと一緒にサイトを作るとは、完成品を一度で出してもらうことではありません。

考え、試し、見直し、責任を持って公開する。その往復を、これまでより速く、具体的に行えるようになることです。

今回のリニューアルで、ようやくその意味が少しわかった気がします。