こちらでは大変ご無沙汰しております
10年程前にWordPressの勉強がてら自作テーマでサイトをリニューアルしたものの、色々クリア出来なかった課題が残り面倒になって放置しながら年末に記事を更新するくらいの運用でここ数年はほぼ放置、どこかでしっかりリニューアルしないとなと思いながら幾星霜
そんな最中仕事でAIを用いてWordPressサイトを構築したところ、思いの外簡単に仕上がってしまったのでこれはチャンスとばかりにサイトリニューアルに着手
とは云えそれなりに苦労もあったのでここに記したいと思います
前提として今回用いたAIは、デザイン及び画像生成をChatGPT、それ以外をClaude Codeが担当
オフィシャルサイトは私のポートフォリオと活動情報、ブログを軸に構成してましたが、10年前と大きく変わった点としてはレトロゲーム活動に取り組んで大量のコンテンツを抱えていた事
これを使わない手はないので、軸のひとつとして組み込む様にしました
その他はカテゴリの整理やおそらく今後更新はなさそうな音楽レビュー『兄弟米』を非表示にした事（こちらも過去のコンテンツ量はそこそこなものなので次のフェーズで移設したいと思うけど）
構成が見えてきたところで次はデザイン
よく「AIで簡単にハイクオリティなデザインができる！」みたいな謳い文句を見るけど、あれはほぼ誇張でプロセスにはそこそこ試行錯誤があると思っている（工程が確立される中で簡略化出来る事はあると思うが）
AIサイト生成のノウハウを調べていく過程で「Webサイトの顔である1stビューはしっかり作り込むこと、ここだけはデザイナーが人力でやる事も推奨」と云う解説を見て腑に落ちた
私も経験的にAI一発出しで良い感じになるイメージはあまりない
と云う訳でリファレンスと素材を用意してまずは1stビューのビジュアルをChatGPTで制作
ぱっと見悪くはないけど、グランジ色が濃くレイアウトやらフォントやらイメージから離れていて何度か調整を繰り返す事に
この時点で自分の写真をを1stビューでは用いない事を判断
最終的にテキスト要素を一緒に生成すると上手くいかない感じがしたので、背景だけを作成してそこから要素を構成していくプロセスに変更
音楽とデザインの要素をコラージュしたメインデザインの生成を依頼
これがそこそこ上手くいって全体の軸が決まる
nord（シンセサイザー）を加える様に指示したのだけど、モノトーンの中でそこだけ赤を残しているのも気に入った
実際にレイアウトを考えていこうと思ったが、ここまで背景がごちゃごちゃすると文字要素が置けないと思い、中央に文字エリアを加えて1stビューのデザインが確定
調整の過程でAI生成だけでなく、自分でPhotoShopを使ってデザイン調整する場面もありました
メインビジュアルに基づいてページ全体をChatGPTで生成したが、あまりにもダサくて断念
そこでClaude Codeでメインビジュアルを元に直接生成する様に指示
レイアウトが単調にならない様に工夫を加える様にしたら割と上手くまとまりました
最近はかなり派手なアニメーションを効かせたサイトなども見受けられるけど、取り急ぎ安定基盤が作れれば良いと考えていたのであまりそこに時間は掛けずに進めました
Claude Codeに指示して簡易的なアニメーションは追加したけど
全ページのデザインとモックアップの構築が完了したところでWordPressの実装へ
ここは経験済みだったので割と楽にいけるだろうと考えていたが、意外な落とし穴があった
これまでのコンテンツは活かしたかったのでそれを引き継ぐ形で構築を進めたが、そこでのトラブルが多発
ベースの構築はすんなりいったけど、今回の制作で一番時間を要したのは旧構成を引き継いでの新構成反映だったかと
レビュワーエージェントを立てていてもここの精度がなかなか上がらず、目視と個別指示を繰り返しました
WordPressなので見た目だけでなく運用も含めたチェックと仕様決めが必要で、Claude CodeにはChromeのプラグインでブラウザ操作を可能にしながら進めたけど結構手こずるシーンが多かった
構築とは別で苦労したのが既存コンテンツの整理
レトロゲーム関連の情報をNotionでまとめてClaudeとMCP接続しながら進めたが、多くはInstagramの投稿から拾ってこないといけないのでここが少々苦労したところ
日頃からコンテンツのデータベース管理が出来ているとAIを介しての作業がスムーズになるなと実感
画像の最適化も意識しておかないとなのでWordPressのプラグイン『ShortPixel Image Optimiser』を導入
通常の運用であれば無料枠でも賄えるけど、初期構築に於いては画像全範囲に適用しなければいけなかったので一旦有料契約
iPhoneで撮影したheicファイルもwebp形式に変換してくれるのは便利
そんな感じで土台の構築は割と早かったけど、修正作業に多くの時間を費やす事になりました
ゼロからの立ち上げならもっと早く作業が終わるとは思うけどリニューアルは仕様をしっかり立てないと後々困るので気をつけましょう
あと、修正に関しては個別で指示をしているとAIが場当たり的な修正を繰り返してカオス化するので注意
その場合は体系的な構造に修正する様に指示すると是正されます
その他SEOやAIOなどの基本的なチェックや指示もお忘れなく
この辺はスキルでどうにかなるのかもだけど、今回の制作では全て私が指示とチェックを与えた感じでした
そして最後の最後でロゴが気になってしまい、そこはいつも通りIllustratorで手動作成（ChatGPTでも試してみたけど全然イメージとかけ離れていた）
と云った感じで完全AIにはせずにデザイナーらしく必要な箇所は手動を交えて制作しました
多分その方が現時点ではオールAIを目指すより効率が良いと思う
