チュートリアル
Claude Opus 5.5で製品ページの動きを直し、情報を隠さない
Claude Opus 5.5には静止状態でも製品ページを完全に読めるようにしてから、変化を説明する動きを追加させます。価格、仕様、購入リンクがスクロール演出を待つ必要はありません。初期状態を先に直してください。スクリプト失敗で内容が隠れるなら、時間を短くするだけでは解決しません。
Claude Opus 5.5には静止状態でも製品ページを完全に読めるようにしてから、変化を説明する動きを追加させます。価格、仕様、購入リンクがスクロール演出を待つ必要はありません。初期状態を先に直してください。スクリプト失敗で内容が隠れるなら、時間を短くするだけでは解決しません。
これは実装の提案で、Opusの実測結果ではありません。公式ガイドに沿って成果物と確認条件を明確にし、HTML、CSS、JavaScriptを一緒に渡します。
動きの役割を三つに分ける
| 動き | 役に立つ目的 | 静止した代替 |
|---|---|---|
| 色見本の切り替え | 選択変更を示す | 選択ラベルと即時画像更新 |
| 製品の分解図 | 部品の関係を説明 | ラベル付き部品図 |
| スクロール入場 | 装飾 | 文書順で最初から見える内容 |
開発者の議論には、繰り返す入場演出で読み進められない不満があります。これは定性的な声で、特定の時間が転換率を上げる証拠ではありません。
発火条件、対象、初期・終了状態、JavaScript失敗時の挙動を一覧にします。オブザーバーが走るまで残る`opacity: 0`、画面外変形、高さ0を探します。購入リンクがDOM内にあっても、視覚的には使えないことがあります。
見える状態を基本にする
以下は標準でカードを表示し、動きを減らす希望がない場合だけ短い演出を加える例です。距離と時間は例示で、普遍的な基準ではありません。
```css
.product-card {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.product-card {
animation: product-enter 180ms ease-out both;
}
@keyframes product-enter {
from { opacity: 0.85; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
}
[MDNの説明](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion)は、このメディア特性と利用者の設定の関係を示します。ただしCSSだけで別のJavaScriptループや動画自動再生は止まりません。それぞれの制御側でも同じ設定を確認します。
全アニメーションの時間を一律0にするのは避けます。イベント後に内容表示や後処理をするコードがあるためです。静止経路で明示的な完了状態にし、処理が一度だけ実行されることを確認します。
## 修正プロンプト
```text
添付HTML、CSS、JavaScriptを確認し、文言、製品事実、リンク、文書順を保持してください。
全アニメーションの発火条件、起終点、JavaScript失敗時と動きを減らす設定での挙動を列挙してください。
価格、仕様、購入リンクを基本状態で表示・操作可能にします。装飾はno-preferenceだけにし、説明用の動きには同じ事実を含む静止図を付けます。
CSS、JavaScriptタイムライン、requestAnimationFrameループ、動画自動再生を別々に調べます。CSS一つで全て解決すると言わないでください。
重要情報の表示をアニメーションイベントに依存させないでください。静止経路でも後処理と完了処理はちょうど一度実行します。
最小差分とテスト表を返してください。通常、読み込み前の動き抑制、表示中の設定変更、JavaScript無効、キーボード、狭い画面を含めます。
ページ全体の再設計や転換率向上の約束は不要です。演出だけでなく代替経路を試す
読み込み前に動きを減らす設定にし、同じ事実と操作が即座に使えるか確認します。表示中に設定を切り替え、半透明カードや半開きの図が残らないか見ます。
JavaScriptを無効にして再読み込みします。高度な選択機能に簡易版が必要でも、主要情報は読める状態にします。Tab操作で現在のフォーカスが演出に隠れないか、狭い画面で図のラベルが欠けず重要な比較に横ドラッグが要らないか確認します。
静止と動作状態を記録し、各項目を実施済み、失敗、未実施に分けます。もっともらしい生成コードや説明だけではブラウザ試験の合格ではありません。
両方の状態に画像を用意する
Panelly Studioで完成した製品画像やラベル付き静止図を作り、読める基本状態に使います。後から動きで説明を補えます。Opusとの直接連携や、このページコードをPanellyが出力するという主張ではありません。
構造変更はランディングページ修正、独立した映像制作は画面から作る宣伝動画を参照してください。
よくある質問
動きを減らすと空白ページになりますか？
情報と操作はそのまま保ち、動きだけを使える静止状態に置き換えます。
速くすれば十分ですか？
スクリプト失敗は直らず、残る動きを利用者が許容できる保証もありません。静止経路を独立して確認します。
