SWELL / WordPress ・ 自サイトの公開改修（2026年10月4日）
記事を探す入口は短く、詳しい話はレビューへ。パパノモノのトップと3つの独立ページを、SWELLの標準ブロックとページ限定CSSで組み直しました。
対象はトップ・愛用品一覧・パパの装備・用途検索ハブ。2026年10月3日に4ページを公開してホームを切り替え、10月4日に記事導線と画像配信を整えました。設計の理由と、公開後に確認できた範囲を記録します。
課題：長い資料のように見え、同じ商品が繰り返される
編集型トップの初期案では、大きな写真と商品説明を各所で繰り返していました。「長い資料っぽい」「同じ商品が反復する」という指摘を受け、トップで読む量と、記事へ進むための情報を整理しました。
設計：場面・索引・本文の役割を分ける
トップのPICK UPは3記事を主役に保ち、GEARは3つの場面入口に短縮。カテゴリと実使用レビュー、家族紹介と愛用品の表はPCで横に組み、狭い幅では縦に並べます。空のカテゴリを本文から外し、表は詳細を読み直す場所ではなく、記事を選ぶ索引にしました。
愛用品一覧は写真の入口3件と11商品の4列表。装備ページは3場面・4記事・写真3枚を維持して説明の重複を削除。用途検索はWordPress標準検索と4用途、記事がある2カテゴリで構成しています。
Before / After：説明を減らし、入口を残す
Before
改修前の公開トップは記事一覧とサイドバーが中心。編集型トップの初期案でも、商品カードと要約が重複していました。
After
公開後のトップは短い案内とPICK UPから記事へ。画像の下に続くGEARは小さな場面入口にし、カテゴリとレビューは横組み、愛用品は索引で案内します。
画像は両方とも1440px表示、共通ヘッダー直下の1224×800px。改修前と公開後のトップの入口構成を比較しています。GEARの同一セクション比較や速度比較ではありません。下の数値は別の実装記録に基づきます。
狭い画面では表の中を横にスクロールできます。キーボードではTabで表へ移動し、左右キーで操作できます。
| 対象 | 変更後・比較 | 条件 |
|---|---|---|
| トップのGEAR | 3場面の入口、全体約197.3px高 | PC幅1440pxの下書き実表示。変更前の高さは未計測 |
| トップの索引 | 4列・8行、文字12px | 安全上の条件と詳しい記事へのリンクを残す |
| 装備ページ本文 | 1,361字 → 357字（約74%減） | 旧試作とWP用コンパクト版の表示文字。style・コメント・altを除外 |
| 装備のブロック数 | 59 → 35 | 3場面・4記事・写真3枚を維持 |
SWELL標準と、追加したページ限定CSS
Group・Columns・Image・Heading・Paragraph・Buttons・Table・List・Searchなどの標準ブロックを使い、編集できる本文構造を残しました。CSSはページ内のクラスに限定し、青グレーの配色、横組み、小さな写真、余白、CTA、表のスクロールとfocusを調整しています。
装備ハブと検索ハブにフロント側のJavaScriptは追加していません。トップのフッター補完用JavaScriptは公開時に外し、お問い合わせは共通フッターメニューへ。表のキーボード操作とリンク名の補完は残しました。新しいDB・プラグインの導入やテーマ本体の変更はありません。
公開したページと、運用を軽くする変更
トップから、愛用品一覧・パパの装備・用途から探すへ進める構成にしました。共通メニューにも3ページを置き、記事がないカテゴリはメニューから外しています。
PICK UPはSWELL標準の投稿リストで選んだ3記事を表示。タイトル・画像・URLを投稿から取得する形にし、同じ情報をトップへ手で写す手間を減らしました。最新記事も公開日の新しい順で3件を表示し、未公開記事は含めていません。
記事本文には、別の用途へつながる「次に読む」を7導線追加。3記事では既存の結論を冒頭カードへ整理しました。商品の使用経験や注意点を増やすのではなく、すでにある判断材料へ早く届くための変更です。
画像配信：愛用品一覧の3枚を限定改善
愛用品一覧の3画像を、同じ写真の既存縮小画像とWordPress標準のsrcset配信へ変更しました。モバイルのPageSpeed Insightsでは3画像のリソースサイズが1,861.2 → 397.0 KiBに減少。LCPは8.745秒から5.851秒、再測定で5.888秒になりました。スコアは70 → 71 → 70でほぼ変わらず、CLSは各回0、Speed Indexは悪化しています。
2026年10月4日 UTC、https://papanomono.com/favorites/ を公式PageSpeed Insightsで測定。Moto G Power、Lighthouse 13.5.0、低速4G、初回読み込み、1ページセッションのラボ値です。変更前／変更後／再測定。実ユーザーデータはなく、サイト全体や一般ユーザーの速度改善を保証する値ではありません。無変更トップにもスコア変動があり、キャッシュ状態は未確認です。
公開後の検証：1440 / 390 / 320px
公開後の4ページを内蔵ブラウザの1440 / 390 / 320pxで確認。ページ全体の横はみ出しがなく、画像と主要リンクが表示され、狭い画面では表の内部だけが横にスクロールすることを確認しました。標準検索から実記事へ到達し、スマホメニューの開閉も検証しています。
保存後の本文再読込みと標準ブロックの解析を確認。Cookieを送らないHTTP取得では4ページと内部リンクが200を返し、canonicalが正式URLと一致し、noindexが付かないことを確認しました。画面の表示検証はログイン状態のブラウザで行い、匿名ブラウザの描画確認とは区別しています。ビジュアルエディターのキャンバスが空白になる環境のため、画面上のブロック警告は未確認です。
残っている確認と、成果の限界
実機Safari、指でのタッチ操作、スクリーンリーダー、実ユーザーのCore Web Vitalsは未検証です。売上・購入率・SEO順位の改善も確認していません。今回の結果はページ構成・公開導線・限定した画像配信の実装記録です。
比較画像は自サイトの実表示から、管理バーやログイン名を含まない領域を撮影しました。商品・本文は生成画像で描き直していません。Afterの背景は既存のAI生成装飾で、画面内の表示を残しています。