2026年10月10日、医学・科学・投資・育児について発信するこのブログ「Y-bow」のデザインをリニューアルしました。今回の作業では、GPTとの対話に加え、Codexのブラウザ操作機能を使ってWordPressやサーバーの管理画面を確認し、実際の設定とページの編集まで進めました。
WordPressとテーマのSWELLはそのままです。既存の記事、画像、カテゴリー、記事URLを維持しながら、トップページと共通の表示を整えています。
この記事では、何を変えたのか、どこでつまずいたのか、AIに任せられたことと人の操作が必要だったことを、今回の作業に沿って紹介します。アイキャッチ画像と本文の下書きも、AIを使って作成しています。
リニューアルで目指したのは、記事を見つけやすいWebマガジン
Y-bowでは、医学や健康、宇宙や科学、投資、育児など、複数の分野の記事を扱っています。記事が蓄積するほど、トップページで「何が読めるサイトなのか」「どこから読み始めればよいのか」を伝えることが大切になります。
今回は、白を基調にネイビーとグレーを合わせ、文字と余白を中心にした落ち着いたデザインを目指しました。医学・科学・投資・育児の4分野への入口を用意し、関心のある記事へ移動しやすくする方針です。
最初にGPTへ伝えた条件は、次のようなものでした。
- WordPressとSWELLを維持する。
- 既存の記事・画像・URL・カテゴリーを原則として変えない。
- 最初は調査だけを行い、公開サイトを変更しない。
- バックアップと復元方法を確認し、可能なら検証環境を使う。
- デザインを確認してから実装し、PCとスマートフォンの表示を確かめる。
- テーマやプラグインの更新・削除、既存記事の変更は無断で行わない。
「おしゃれにして」という依頼に加えて、守ってほしいものと作業の順序を具体的に伝えました。既存のブログを改修する際には、この条件整理が実装の判断基準になります。
トップページ、記事一覧、本文をどう変えたか
4分野への入口をトップページに配置
新しいトップページの紹介文は「知ることを、暮らしの力に。」です。その下に、医学・健康、科学・宇宙、投資・お金、育児・教育の入口を配置しました。
さらに、注目記事、新着記事、分野別の案内、著者紹介を組み合わせています。最新の記事を並べるだけでなく、初めて訪れた方にもブログの内容が伝わる構成にしました。既存カテゴリーの名称や記事の所属を一括で変更することはしていません。
ヘッダーとフッターの導線を整理
ヘッダーとスマートフォンのメニューを整理し、各分野や著者情報へ移動しやすくしました。フッターにも分野への入口とサイトの基本情報をまとめています。
共通サイドバーは、著者情報・検索・人気記事・カテゴリーの4つに絞りました。共通の広告枠、埋め込みツイート、重複する部品などは表示を停止し、設定自体は退避しています。記事内にもともとある商品紹介やアフィリエイト部分は維持しました。
読む画面にも手を入れる
カテゴリーの記事一覧はPCで3列、スマートフォンで1列にし、画面幅に合わせて情報量を調整しました。本文は文字の大きさ、見出し、余白を整え、スマートフォンでも読み進めやすい表示を目指しています。
実装はWordPressの標準ブロックとSWELLの機能を中心に行い、追加CSSは約5KBに収めました。独自の大きな仕組みを増やさず、今後も管理画面から調整しやすい構成を選んでいます。
現在のデザインは、Y-bowのトップページでご覧いただけます。
GPTは提案だけでなく、管理画面の編集まで担当した
今回使ったのは、対話による文章やコードの作成に加え、Codexで利用できるブラウザ操作です。画面の表示を読み取り、設定項目や編集欄を操作し、保存後の状態を確認する方法で作業しました。
GPTが担当したのは、公開サイトの調査、ページ構成と配色の提案、トップページの作成、共通表示の調整、検証環境の問題調査、公開後の表示確認、作業記録の整理などです。提案されたCSSを私がすべて手作業で貼り付ける形ではなく、ブラウザを通じた実装まで進められました。
一方、WordPressやConoHaへのログイン、画像認証、新しい認証情報の設定、保護機能に関わる変更の承認、デザインと本番反映の判断は私が行いました。パスワードをチャットに送るのではなく、自分で認証画面へ入力する進め方です。
今回の経験では、AIによる調査・編集と、人による認証・判断を組み合わせることが実用的でした。管理画面の状態や接続環境によっては、AIだけでは次の操作へ進めない場面もありました。
実作業は一直線ではなかった
サイトコピー先にWordPressのインストール画面が出た
検証用のサイトをコピーしたところ、ログイン画面ではなくWordPressのインストール画面が表示されました。見た目だけでは、新しくインストールすればよいようにも見えます。
調査すると、サーバーのサイトコピーに使われた登録情報と、実際に本番で使われていたデータベースの接続先に相違がありました。新規インストールは行わず、稼働中のデータを基に検証用データベースを作り直して復旧しました。
ここで必要だったのは、画面の指示どおり進めることではなく、既存データがどこにあるかを確かめることでした。検証環境を作った後も、記事や設定が正しくコピーされているか確認が必要だとわかりました。
保存しても古い表示が残った
管理画面で変更した内容と、閲覧画面の表示が一致しない場面もありました。追加のオブジェクトキャッシュが古い状態を保持していたことが原因の一つです。
検証環境で確認したうえで、承認を経て追加キャッシュを削除せず退避し、SWELL標準の表示キャッシュを使う構成に整えました。保存できたかだけでなく、一般の閲覧画面に変更が出ているかも確かめています。
また、空にした広告領域が再び表示される問題もありました。テーマ内に過去のウィジェット配置が残り、自動的に復元されていたためです。現在の配置と復元用の配置を揃え、管理画面を再表示しても設定が維持されることを確認しました。
セキュリティ機能やログイン待ちで止まることもある
設定の保存がWAFに止められる場面や、サーバー管理画面のログインが期限切れになる場面もありました。必要な操作を確認し、私の承認や再ログインを挟んで作業を進めています。一時的なWAFの除外は解除し、防御が戻っていることを確認しました。
このリニューアルは、指示を一度出したら何も確認せず完成する作業ではありませんでした。エラーが出たときには対象と原因を調べ、変更を小さく区切って確認する必要がありました。
既存記事とURLを守り、公開後の表示を確認
今回の改修では、259件の公開済み記事の本文やURLを一括変更していません。トップページも既存のページを更新し、トップのURLは従来どおり維持しました。WordPress、テーマ、プラグインの更新や削除も実施していません。
作業前後には、全体バックアップの正常終了を確認し、稼働中の本番データベースと旧デザインの設定を保存しました。戻す方法も整理しています。ただし、バックアップからの復元テストそのものは実行していません。
公開後はトップページ、科学カテゴリー、既存の記事を代表例として、次の点を確認しました。
- PCと、幅390px・320pxなどのモバイル表示でレイアウトを確認。
- 確認したトップページに横方向のはみ出しがないことを確認。
- メニュー、検索、記事の目次、ページ先頭へ戻る操作を確認。
- 対象ページのcanonicalが本番URLで、検証サイトのリンクやnoindexが混入していないことを確認。
- 既存のGA4計測タグが本番に残っていることを確認。
すべての記事を個別に検査したわけではなく、スマートフォン実機での検証もまだ行っていません。速度スコアやCore Web Vitalsの測定、GA4のレポートへのデータ到達確認も今後の課題です。デザインを変更したことだけで、表示速度や検索順位、アクセス数が改善したとは判断できません。
次はアクセス状況を見ながら改善していく
今回のリニューアルは、今後の改善の出発点です。医学・科学・投資・育児のどの記事が読まれているか、トップページから記事へ移動してもらえているか、モバイルで読みにくい箇所がないかを、アクセス状況と実際の表示から確認していきたいと考えています。
サーバーのアクセス集計には管理画面の処理やボットも含まれます。そのため、数字の増減を見る際は、GA4やSearch Consoleで何が計測できているかを確認し、比較する期間や条件を揃える必要があります。
記事の更新についても、本文の下書き、見出しの整理、アイキャッチ画像の作成、WordPressへの入稿を組み合わせて進められます。今回の記事も、その方法で作成しています。ただし、事実確認や表現の確認、公開するかどうかの判断は、引き続き運営者が担います。
特に医学・科学・投資の記事では、AIが書いた説明をそのまま採用せず、出典やデータの時点、主張の範囲を確かめることが必要です。このブログでも、その確認を前提に更新を続けていきます。
GPTと一緒に、既存ブログを改修できた
今回、WordPressとSWELLを維持し、蓄積した記事を残したまま、トップページから共通表示までリニューアルできました。ブラウザ操作を利用できる環境では、GPTは提案に加えて実装や入稿の作業も担当できます。
その一方で、データベース、キャッシュ、過去の設定といった既存サイト特有の問題には調査と確認が必要でした。守る条件を先に伝え、検証環境とバックアップを用意し、人が必要な判断を行うことが、今回の作業を進める土台になりました。
これからも、読みたい記事を見つけやすく、落ち着いて読めるブログを目指して、表示とアクセス状況を確かめながら少しずつ改善していきます。
※この記事は、2026年10月10日のリニューアル作業記録を基に、AIで本文とアイキャッチ画像の下書きを作成したものです。アイキャッチはイメージイラストで、実際の管理画面を示すものではありません。
コメント