表示速度と画像・動画
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の有効・無効の差分を記録します。
- mobile低速条件のLCP/CLS
- keyboard
- 動画起動後
- アプリ有効/無効差分
未実測の項目は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での作業順
- 本番権限を使わず、提供されたexport・themeのコピー・模擬データで棚卸しします。
- 現行の公式資料と対象versionを確認し、標準で足りることと不足を分けます。
- 最小差分のpatch、テストデータ、戻す手順をそろえます。
- PC・スマートフォン・キーボードで表示とデータの差分を記録します。未実測の項目はpassにしません。
- 本人が対象の変更を承認した場合だけ、本番手順へ進みます。
進め方を選ぶ
進め方を1つ選ぶと、次にすることを1つ示します。ほかの3つは下に畳んで残します。どれを選んでも、使う要件と確認項目は同じです。
選んだ進め方の次の行動
社内・既存の開発先で作る
- 受け取るもの
- 監査表・差分仕様・受入テストを、既存の開発担当がそのまま実装と確認に使える形で渡します。
- 状態
- 資料はまだ作っていません。公開中の資料一覧から、同じ課題の資料を探せます。
公開中の資料一覧を読む 任せたい場合は相談する
選んだ進め方の次の行動
Claude Codeで作る
- 受け取るもの
- 同じ範囲のClaude Code指示です。preview・test・rollbackの手順を含み、本番権限は使いません。
- 状態
- 資料はまだ作っていません。公開中の資料一覧から、同じ課題の資料を探せます。
公開中の資料一覧を読む 任せたい場合は相談する
選んだ進め方の次の行動
アプリ・サービスを入れる
- 受け取るもの
- 先にShopify標準と既存設定を確認します。アプリは元記事の承認済みプログラムに限り、適合性を確かめてから案内します。
- 状態
- 公式サイトで料金と条件を確認します。紹介リンクは使っていません。
条件を比べる 無料・標準機能で足りる場合を先に読む
選んだ進め方の次の行動
運営者(Timeseek)に相談する(任意)
- 受け取るもの
- 対象URL・theme・データ・環境を限定した診断と実装支援です。掲載順位・AI引用・売上は保証しません。
- 状態
- 相談は任意で受け付けています。依頼は当面受け付けていません。
この条件で相談する 依頼できる範囲を読む
他の進め方を見る(3件)
- 社内・既存の開発先で作る 資料なし 資料はまだ作っていません。公開中の資料一覧から、同じ課題の資料を探せます。 公開中の資料一覧を読む
- Claude Codeで作る 資料なし 資料はまだ作っていません。公開中の資料一覧から、同じ課題の資料を探せます。 公開中の資料一覧を読む
- アプリ・サービスを入れる 公式サイトで確認 公式サイトで料金と条件を確認します。紹介リンクは使っていません。 条件を比べる
- 運営者(Timeseek)に相談する(任意) 相談受付中 相談は任意で受け付けています。依頼は当面受け付けていません。 この条件で相談する
選んだ進め方は、このブラウザを閉じるまでの間だけ保存し、相談画面へ引き継ぎます。店舗名や連絡先は保存しません。
出典と確認日
編集メモの確認日: 2026-09-07。公式資料は現行版を本人が読み直してから本番に反映します。