表示速度と画像・動画

M06 対象: Shopify店舗 課題: 商品ページで状態や付属品を伝える 提案(未検証) 本人承認が必要

必要な機能を残したまま、不要なscriptと画像の転送を減らします。labの計測をfieldのp75や売上改善の証明にしません。動画の自動再生は使いません。

店舗側の対策です。 対象は読者のShopify店舗の設定・theme・商品データです。変更前の監査、最小の差分、UXの回帰確認、本人承認の順で進めます。 このサイト(メディア)自身のSEOや構造化データは別のコードで管理しているので、ここに書いた店舗側の手順は当てはめず、読者がShopify利用者であってもメディアをShopifyへ移すことはしません。

12モジュールはどれも提案の段階で、実店舗での実装と検証はまだ行っていません。実績はまだありません。掲載順位・AIでの引用・売上の改善は保証しません。

1. 何を確認するか

対象templateとアプリscript、画像サイズ、field/lab値を採取

  • 対象templateで読み込むappのscript、画像の寸法とファイルサイズ、動画の読み込み方を採取します。
  • fieldの値(Search Consoleやreportで本人が取得できる範囲)とlabの値を分けて記録します。取得できない値は未確認とします。
  • LCPになる画像がlazy指定になっていないか、寸法の指定がありCLSを起こしていないかを見ます。

2. 何を変えるか

必要な機能を残して不要なscript/画像転送を減らし、寸法・srcset・posterを指定

  • 使っていないappのscriptを止め、画像には寸法・srcset・適した形式を指定します。
  • 動画にはposterを付け、利用者の操作で再生します。自動再生はなしです。
  • 変更はappの有効・無効の差分として記録し、機能ごとに戻せるようにします。

3. UXの守り

高速化のために商品写真・絞り込み・動画確認を消さない。自動再生なし

  • 高速化のために商品写真・絞り込み・動画の確認を消しません。
  • キーボード操作と拡大表示(200%)で、主要な情報と操作が欠けないことを確かめます。

4. テスト

スマートフォンの低速条件でLCPとCLSを計測し、キーボード操作、動画の起動後、appの有効・無効の差分を記録します。

  1. mobile低速条件のLCP/CLS
  2. keyboard
  3. 動画起動後
  4. アプリ有効/無効差分

未実測の項目はpassにしません。実行した環境と日付を記録し、PC・スマートフォン・キーボードの差分を残します。

5. 納品物

before/after条件付き計測。labをfield p75や売上改善の証明にしない

  • 変更前後の計測結果。条件(端末・回線・日時・labかfieldか)を付けて渡します。
  • appのscript一覧と、止めた場合の影響。

無料・標準機能で足りる場合

Shopifyの標準機能と既存の設定で足りる場合は、アプリを追加しません。足りるなら、それで終わりです。既存appが同じ役割を持つなら、その出力を確かめてから重複を外します。

対象外

  • labの改善をfieldのp75や売上の改善として報告しません。
  • Shopifyが管理するネットワーク層やCDNの設定は変更の対象になりません。

本人承認が必要な操作

次の操作は、本人が対象と範囲を確かめて承認した後に行います。承認の前はローカルとpreviewで作業を続け、本番の設定・theme・データには触れないまま、差分と戻す手順だけをそろえておきます。承認は一件ずつです。

  • appのscriptを本番で停止する
  • 画像・動画の一括変換を行う
  • themeの読み込み順を変えて本番へ反映する
すべてのモジュールに共通する承認項目
  • 本番themeへ反映して公開する
  • 本番の商品データやmetafieldを一括で更新する
  • robots・sitemap・discovery fileを変更する
  • sales channelやAI向けチャネルを有効化する
  • 既存appを停止・削除する

Claude Codeでの作業順

  1. 本番権限を使わず、提供されたexport・themeのコピー・模擬データで棚卸しします。
  2. 現行の公式資料と対象versionを確認し、標準で足りることと不足を分けます。
  3. 最小差分のpatch、テストデータ、戻す手順をそろえます。
  4. PC・スマートフォン・キーボードで表示とデータの差分を記録します。未実測の項目はpassにしません。
  5. 本人が対象の変更を承認した場合だけ、本番手順へ進みます。

進め方を選ぶ

進め方を1つ選ぶと、次にすることを1つ示します。ほかの3つは下に畳んで残します。どれを選んでも、使う要件と確認項目は同じです。

進め方

社内・既存の開発先で作る

受け取るもの
監査表・差分仕様・受入テストを、既存の開発担当がそのまま実装と確認に使える形で渡します。
状態
資料はまだ作っていません。公開中の資料一覧から、同じ課題の資料を探せます。

公開中の資料一覧を読む 任せたい場合は相談する

Claude Codeで作る

受け取るもの
同じ範囲のClaude Code指示です。preview・test・rollbackの手順を含み、本番権限は使いません。
状態
資料はまだ作っていません。公開中の資料一覧から、同じ課題の資料を探せます。

公開中の資料一覧を読む 任せたい場合は相談する

選んだ進め方の次の行動

アプリ・サービスを入れる

受け取るもの
先にShopify標準と既存設定を確認します。アプリは元記事の承認済みプログラムに限り、適合性を確かめてから案内します。
状態
公式サイトで料金と条件を確認します。紹介リンクは使っていません。

条件を比べる 無料・標準機能で足りる場合を先に読む

運営者(Timeseek)に相談する(任意)

受け取るもの
対象URL・theme・データ・環境を限定した診断と実装支援です。掲載順位・AI引用・売上は保証しません。
状態
相談は任意で受け付けています。依頼は当面受け付けていません。

この条件で相談する 依頼できる範囲を読む

他の進め方を見る(3件)
  • 社内・既存の開発先で作る 資料なし 資料はまだ作っていません。公開中の資料一覧から、同じ課題の資料を探せます。 公開中の資料一覧を読む
  • Claude Codeで作る 資料なし 資料はまだ作っていません。公開中の資料一覧から、同じ課題の資料を探せます。 公開中の資料一覧を読む
  • アプリ・サービスを入れる 公式サイトで確認 公式サイトで料金と条件を確認します。紹介リンクは使っていません。 条件を比べる
  • 運営者(Timeseek)に相談する(任意) 相談受付中 相談は任意で受け付けています。依頼は当面受け付けていません。 この条件で相談する
選んだ進め方は、このブラウザを閉じるまでの間だけ保存し、相談画面へ引き継ぎます。店舗名や連絡先は保存しません。

出典と確認日

編集メモの確認日: 2026-09-07。公式資料は現行版を本人が読み直してから本番に反映します。

  • WCAG 2.2(V320) — 公式資料(現行版を確認)、確認日 2026-09-07
  • Core Web Vitals(V321) — 公式資料(現行版を確認)、確認日 2026-09-07