長年運用してきたWordPressブログのテーマを、自分専用のものへ作り替えました。

これまでは「Cocoon」を使ってきました。機能が豊富で、ブログを安定して続けるうえで長く助けてもらったテーマです。しかし、記事が増え、これからのブログの見せ方を考えるなかで、「もう少し自分らしく、今の感覚に合うデザインにしたい」という思いが強くなりました。

そこで考えたのが、既製テーマを探し直すのではなく、Codexと一緒に自分でWordPressテーマを作ることでした。

結果として、白黒を基調に余白を大きく取り、カラーのアイキャッチが映える、ウェブマガジンのようなテーマを形にできました。もちろん、すべてをAIに任せたわけではありません。今回の制作で重要だったのは、プログラムの骨格はCodexに組んでもらい、見た目や使い勝手、公開してよい状態かどうかは人の目で確かめる、という役割分担でした。

Cocoonへの不満ではなく、ブログの現在地が変わった

Cocoonを長年使えたこと自体が、その完成度の高さを示していると思います。今回の変更も、「Cocoonがよくなかったから」ではありません。

ブログを始めた頃と現在とでは、記事の蓄積も、扱うテーマも、見せたい雰囲気も変わりました。既製テーマの設定を調整し続けるより、ブログの内容に合わせて構造から設計したほうが、いま欲しいものに近づけるのではないかと考えました。

目指したのは、ゴシック体、白黒の骨格、広い余白を使いながら、記事の写真やアイキャッチが色として立ち上がるデザインです。サイドバー中心の一般的なブログというよりも、FEATURE、LATEST、CATEGORYという流れで記事に出会える、現代的なウェブマガジンをイメージしました。

Codexに任せたのは、テーマの「骨格」を作る仕事

WordPressテーマは、見た目だけを作れば終わりではありません。トップページだけでなく、個別記事、記事一覧、カテゴリーなどのアーカイブ、検索結果、404ページ、ヘッダー、フッター、コメント、スマートフォン用メニューなど、さまざまな画面と動作が必要です。

今回、こうしたテーマの骨格となるプログラミングは、Codexに担当してもらいました。

トップページには、Main Feature、最新記事3件、Editor’s Pick、カテゴリーへの導線を配置しました。Main FeatureとEditor’s Pickは別の記事を指定できるようにし、公開記事のある全カテゴリーを見られるページも用意しました。PCとスマートフォンの両方に検索への入口を置き、記事一覧のURLはこれまでのものを維持しています。

自分の希望を言葉で伝えると、Codexが必要なファイルやコードへ落とし込みます。途中で表示や動きに違和感があれば、その状態を伝えて修正してもらいます。この往復によって、漠然としていた「もっとおしゃれにしたい」が、具体的な構造へ変わっていきました。

ここで感じたのは、AIを使うことで、プログラミングの専門知識が十分でなくても、自分のブログに必要な仕組みを考える側には回れるということです。コードを一行ずつ書けなくても、「何を残したいか」「どう見せたいか」「何が使いにくいか」を判断する仕事はできます。

最後に必要なのは、やはり人の目だった

一方で、コードが完成したことと、安心して使えるテーマになったことは同じではありません。

レイアウトの間隔は自然か、写真の見え方は狙いどおりか、記事への導線は迷わないか、スマートフォンでも窮屈になっていないか。こうした感覚的な部分は、最終的に実際の画面を人が見なければ判断できません。

さらに今回は、トップ、個別記事、記事一覧、カテゴリー、検索結果、404ページ、スマートフォンメニューを一つずつ確認しました。Main FeatureとEditor’s Pickへ別の記事を指定し、表示が正しく切り替わるかも試しました。

小さな問題も実画面で見つかりました。たとえば、キーボード操作を助けるためのスキップリンクが通常時にも見えてしまったため、普段は非表示にし、Tabキーでフォーカスしたときだけ現れるように修正しました。これはコードだけを眺めて終えていたら、見落としていた可能性があります。

AIは実装を高速化してくれますが、「自分はこれをよいと思うか」「読者にとって自然か」「本番へ出して大丈夫か」という判断まで手放す必要はありません。むしろ実装の負担が軽くなることで、人は確認と判断に、より多くの時間を使えるようになります。

いきなり本番には入れず、戻せる状態を作った

WordPressのテーマ変更では、見た目が崩れるだけでなく、既存の記事、画像、URL、メニュー、計測や広告の設定へ影響する可能性があります。そのため今回は、いきなり本番サイトで新テーマを有効化しませんでした。

まずWeb領域とデータベースをバックアップし、XServer上にステージング環境を用意しました。ステージングとは、本番サイトとは別に作るテスト用の複製環境です。そこで新テーマを導入し、主要な画面や動作を確認しました。

さらに、新テーマから以前のCocoon Childへ戻し、もう一度新テーマを有効化するところまで試しました。新しいものが動くことだけでなく、問題が起きたときに戻せることも確認したかったからです。

この工程も、Codexから手順や注意点の助言を受けながら進めました。ただし、画面を開き、設定を選び、動作を確かめたのは自分です。AIの提案をそのまま信じるのではなく、自分の環境で成立しているかを確認することが大切でした。

XServerへのアップロードは、自分で行った

最終的なXServerへのアップロードと本番への反映も、今回は自分で行いました。

もちろん、何をバックアップすべきか、どの順序なら安全か、どこを確認すべきかについては、Codexの助言を得ています。それでも、最後に操作するのは自分です。自分のブログの状態を見ながら、一つずつ進めました。

この体験には、完成したデザイン以上の意味がありました。以前なら「テーマを自作する」「サーバーへアップロードする」と聞くだけで、専門家だけの仕事に感じていたと思います。今回は、Codexが技術的な見通しを示し、必要なコードを作ってくれたことで、自分で判断しながら公開までたどり着けました。

AIが全部やってくれたという感覚ではありません。自分一人で全部を書いたわけでもありません。設計の希望を伝え、実装を受け取り、画面を見て修正し、安全性を確認し、最後は自分の手で反映する。人とAIが、それぞれ得意な仕事を受け持った制作でした。

「作れる」の意味が変わってきた

生成AI以前の「自分でテーマを作る」は、多くの場合、自分でPHP、CSS、JavaScriptを学び、コードを書くことを意味していました。もちろん、その知識の価値は今も変わりません。

しかし現在は、自分の目的を整理し、AIへ正確に伝え、出てきたものを検証し、必要な修正を判断することも、「作る」の重要な一部になっています。

今回、私はCocoonを長く使ってきた自分のブログを、いまの自分に合う形へ作り直しました。テーマの骨格はCodexがプログラミングし、最後の品質は自分の目で確かめ、XServerへの反映も自分で行いました。

その結果、かなりいい感じのテーマができました。そして何より、「自分には難しそうだ」と思っていた領域でも、AIの力を借りながら自分で選び、自分で確認し、自分で完成させられることが分かりました。

AI時代のものづくりで大切なのは、すべてを自動化することではないのだと思います。任せられる仕事は任せながら、最後に何をよしとするかは、人が引き受けることです。その組み合わせが、今回のブログリニューアルを実現してくれました。