motionsite は何をしますか？
「モーションサイト」ルックを構築します。フルスクリーンのループ動画ヒーロー、読みやすいテキストのためのダークグラデーションオーバーレイ、ガラス効果のカード、アニメーションする単語、反応するボタン、スクロールで表示されるセクション。良いものと、遅くてアクセシブルでないものの違いは以下のチェックリストにあります。そのため、このスキルはページを構築し、その後監査を行います。
motionsites.ai とは提携していません。このスキルには、サードパーティのプロンプトやアセットは含まれていません。
単独で動作します： ランディングページ、ヒーロー、またはアニメーションサイトを依頼すると、Claudeはこのスキルを選択し、テンプレートから構築し、報告する前に監査を実行します。
手順
- 一度に概要を把握します。 ブランド名、一言の約束、主要なコールトゥアクション、3〜6のセクション（機能、証拠、価格、FAQ）、トーン（落ち着いた、大胆な、遊び心のある、高級な）、および既存のロゴ、色、フォント。ユーザーから何も指定がなかった場合は、自分で方向性を選び、その旨を伝えます。
- プロジェクトからスタックを選択します。 既存のReact/Next/Vue/Svelteプロジェクト：そのスタックでコンポーネントを構築します。空のフォルダで、特に好みがない場合：シングルファイルの
templates/site.html（ビルドステップ不要、ダブルクリックで開く）を使用します。React、Vite、TypeScript、Tailwind が指定された場合は、templates/Hero.tsxとtemplates/useReveal.tsを使用します。 - 動画を正直かつ軽量にします。
references/assets.mdを参照してください。ユーザー自身の映像、生成されたクリップ、またはライセンスされたクリップを使用し、他人のCDNにホットリンクしないでください。実際の映像が存在するまでは、テンプレートに含まれているCSSアニメーショングラデーション背景を出荷し、ページがすでに完成しているように見せます。実際の映像は、.hero-mediaに3つのデータ属性（data-video-mp4、data-video-webm、data-poster）を入力することで切り替えられます。scripts/make_video_assets.sh（mp4 + webm + ポスター）を使用してウェブ版を作成します。 - テンプレートからページを構築します。 以下の部分を維持します：ヒーロー（動画 + オーバーレイ + ヘッドライン + CTA）、ガラスナビゲーションバー、アニメーションリビールを備えた3〜6のコンテンツセクション、フッター。
references/design-recipes.md（タイプスケール、スペーシング、パレット、ガラスカード、ボタンの状態、タイミング）のデザインレシピを適用します。 - パフォーマンスとアクセシビリティのルールを適用します（以下）。これらはオプションの追加機能ではなく、電話でページを使えるようにするためのものです。
- 監査。
python3 <skill-dir>/scripts/check_motion.py <site-folder>を実行し、すべてのFAILを修正します。その後、ブラウザで確認します。デスクトップと電話の幅、[prefers-reduced-motion]をオン、最初のペイントでJavaScriptを無効にします。詳細はreferences/performance-accessibility.mdにあります。 - 報告 作成したファイル、プレースホルダー動画の交換方法、監査の結果、および確認すべき点を1つ報告します。
品質を決定するルール
- 動画:
muted、loop、playsinline（これらがないとモバイルブラウザはページ内での再生を拒否します）、posterが設定されていること、preload="metadata"、オーディオトラックがないこと。テンプレートが行うように、[prefers-reduced-motion]とデータセーバーをチェックした後、スクリプトから再生を開始します。これにより、それらの訪問者は動画をダウンロードしません。ヒーロークリップは2〜4 MBを目標とし、最大1080p、6〜12秒でクリーンにループします。 - ポスターが最初のペイントです。 ポスター画像（またはグラデーション）が訪問者が最初に見るものであり、Largest Contentful Paintで測定されるものです。
fetchpriority="high"と正確な寸法を指定します。 - 訪問者を尊重します。
prefers-reduced-motion: reduceの場合、またはデータセーバーがオンの場合、動画を再生する代わりにポスターを表示し、アニメーションをオフにします。動画がスクロールで画面外に出たら、動画を一時停止します。 transformとopacityのみをアニメーション化します。top、left、width、height、marginは決してアニメーション化しないでください。これらはレイアウトを強制し、電話でカクつきを引き起こします。- テキストは動画の上でも読みやすく保ちます。 動画とテキストの間にグラデーションオーバーレイを配置し、本文テキストは最も暗いフレームと最も明るいフレームに対して少なくとも4.5:1のコントラストを維持し、小さなテキストを動く映像の上に直接配置しないでください。
- セクションごとに1つのアイデア、要素ごとに1つのモーション。 60〜100 msの間隔でずらし、持続時間は400〜800 ms、イーズアウト。すべてが動くと、視線を誘導するものはありません。
- モバイルファースト。 ヒーローは
100svhを使用し、100vhは使用しません。375 px幅でテストします。水平スクロールがないこと。小さな画面では、より軽量な、または静止したヒーローを検討します。 - 適切なコンテンツ構造。 1つの
h1、ランドマーク（header、main、footer）、ボタンは<button>または<a>、リンクにはテキスト、画像にはalt。 - アセットを所有します。 サードパーティのCDN動画は使用せず、フォントはセルフホストまたはフォントプロバイダーから、ライセンスは
assets/README.mdに記録します。
ファイル
| ファイル | 目的 |
|---|---|
templates/site.html | 完全な1ファイルランディングページ：動画ヒーロー（データ属性でオンに切り替え、CSSグラデーション代替付き）、ガラスナビ、アニメーションヘッドライン、スクロールリビール、カード、CTA、フッター |
templates/Hero.tsx、templates/useReveal.ts | ヒーローとスクロールリビールフックのReactバージョン |
references/design-recipes.md | タイプ、色、スペーシング、ガラス、ボタン、モーションタイミング、セクションパターン |
references/performance-accessibility.md | 予算、縮小モーション、動画の動作、テスト手順 |
references/assets.md | 動画の入手先、ライセンス、クリップの生成、エンコーディング |
scripts/make_video_assets.sh | ffmpeg：入力クリップからウェブmp4、webm、ポスターを生成 |
scripts/check_motion.py | 上記の問題についてサイトフォルダを監査する |