スマートフォンでブログを開いても、案内や更新情報が続き、記事がなかなか見えない。このサイトの改修前は、幅390px・高さ844pxの画面で、記事一覧の開始位置がページ上端から約1907pxにありました。
2026年9月14日、Codexを使って一覧と記事ページを改修しました。自分のサイトをAIと直す開発者に向けて、何を材料にし、何を変え、どこまで確かめたかを残します。
AIには、画面と既存の動きを一緒に見せる
参照した材料は、公開中の一覧・記事画面、表示幅をそろえた配置の計測、既存のテンプレート・CSS・目次のJavaScriptです。記事を探す検索、カテゴリー、目次、ブラウザーの戻る操作も確認対象にしました。
大きかったのは、記事の前にある情報の量です。一覧では案内と更新情報が縦に続き、記事ページでは大きな画像と開いた目次が本文を押し下げていました。本文の左右にも余白が重なっていました。
Codexは参考サイトの構成も調べ、白背景と文字を中心にする案を作成し、実装と表示確認を進めました。生成した画面案は配置を考える資料として使い、架空の記事や画像を実データへ混ぜていません。
移動する情報、残す操作を決める
一覧は大きなカードから、タイトルと小さな画像を並べる形へ変更しました。更新情報はPCでは右側、スマートフォンでは一覧の後へ移動。検索は冒頭に残し、カテゴリーの選択は必要なときに開けるようにしました。
記事ページでは囲みと余白を減らし、画像を小さくして、目次を既定で閉じました。目次部分の実際の差分は次のとおりです。
- <%= article_agenda %>
+ <details class="modern-reading-toc">
+ <summary>この記事の目次</summary>
+ <%= article_agenda %>
+ </details>
既存の目次リンクを包む形なので、見出しIDを作り直さずに開閉できます。加えて、固定ヘッダーの高さを含めて移動位置を計算し、飛び先の見出しが隠れないようにしました。
目次を閉じると本文へ早く進める一方、記事の構成を見るには一操作増えます。何を先に見せるかは、運営者が読者と目的に照らして決める内容です。AIが提案した配置にも、その選択は残ります。
確認できたのは、画面上の距離と幅
390×844pxで確認した値を丸めると、次の変化がありました。
| 確認箇所 | 改修前 | 改修後 |
|---|---|---|
| 一覧の開始位置 | 約1907px | 約553px |
| 記事本文の横幅 | 約308px | 約350px |
| 記事本文の開始位置 | 約1582px | 約570px |
本文は画像のあるFlipper記事での確認です。旧公開画面とローカルには記事データの差があり、全記事で同じ値になるとは限りません。改修後の値は本番でも再確認しました。
検索とカテゴリーの併用、目次、記事間の移動、戻る・進むを確認し、既存テストも通過しました。公開前後の比較対象2記事では、本文と見出しID、ページタイトルなどが一致しています。
これは配置の確認で、利用者に操作してもらうユーザーテストではありません。読了率、アクセス数、作業時間、モデルごとの違いは測っていません。画面を整えても、記事の内容や切り口の価値は別に見直す必要があります。
自分のサイトで再現するなら
まず一覧と代表記事を一つずつ選び、同じ画面幅で「記事が始まる位置」「本文の幅」を記録します。AIにはその画面とコードを渡し、記事を選ぶ・読む操作を優先して、移す情報と残す機能を整理してもらいます。
実装後は、同じ記事・画像・目次の開閉状態で再確認します。検索して記事を開き、目次で移動し、戻るところまで試す。配置の数値と、機能が動いたかを分けて残すと、次の改修を同じ基準から始められます。
確認対象と記録
確認日は2026年9月14日です。一覧の開始位置は記事一覧セクション、本文の開始位置と横幅は記事本文領域を、ページ上端を基準にブラウザー上で確認しました。上の表と差分は、この改修時の作業記録をもとにしています。
現在のブログ一覧で配置や検索を確認できます。この記事に載せた改修前の数値を現在の画面から再取得することはできず、今後の改修でも配置は変わります。