html-to-interaction-prompts

HTML からインタラクション用プロンプトを作成

目的

HTML のリファレンスを記事にすぐ使えるプロンプトパックに変換します。重要なインタラクションを特定し、適切な視覚的証拠を収集して、柔軟なプロンプトを作成し、各プロンプトタイトルの下にスクリーンショットを挿入し、記事が正しくレンダリングされることを確認して、意図したファイルのみをコミットします。

日次 UI インスピレーションの記録ルール

このスキルを日次 UI インスピレーションのワークフローで使用する場合：

• 日次インスピレーション記事には、インスピレーションを必ず 5 件含めます。20 件ではありません。
• スクリーンショットギャラリーを公開したり、内容の浅いプロンプトを 20 件追加したりしないでください。
• 5 件のインスピレーションそれぞれに、代表的なローカル静止画像、埋め込みローカル MP4 動画、複数のローカルスクリーンショットまたはモーションフレーム、モーション／インタラクションに関するメモ、ソースのメタデータ、非常に詳細な AI ビルダー用プロンプトを含めます。
• ソースが Framer テンプレート、またはその他のライブウェブサイトである場合、ウェブサイト自体をスクロールしながら、実際のランディングページまたはプレビュー URL を記録します。マーケットプレイスのカバー画像、サムネイル、スクリーンショットのパン、静的アセットのスライドショーは、ライブ動画の証拠として認められません。
• Framer の場合は、マーケットプレイスの詳細ページで Full Live Preview または埋め込みの previewUrl を確認し、その URL を pageUrl として保存して、そのページから MP4 を記録します。
• ライブウェブサイトの場合、ランディングページ全体をスクロールしたスクリーンショットを、縦長の 1 枚の画像として保存します。次に、その正確な全体画像からセクションごとのスクリーンショットを切り出し、記事にページ全体と各セクションを個別に含めます。
• セクションの切り抜きは、全体画像に対して連続しており、ピクセルを漏れなく含める必要があります。セクション間のピクセルを取りこぼさず、任意のビューポートのスクリーンショットをセクションの代わりに使用しないでください。固定表示要素のために避けられない場合に限り、重なりを認めます。
• ページに意味のあるセクションがある場合は、その数に応じて切り抜きを含めます。最低でも、ヒーロー、ページ順に並べた主要な中間セクション、フッターを含めます。可能な場合は、proof、features、process、gallery、pricing、faq、final-cta など、目的がわかるラベルを使います。それ以外の場合は、section-02 のような順序付きラベルを使います。
• content.md では、最近の例で確立された日次記録記事の構成に合わせます。### Full-Page And Section Evidence を使い、全体のスクリーンショットを通常の Markdown 画像として表示してから、#### Section Crops を置き、各切り抜きを上から下への順に通常の Markdown 画像として表示します。このブロックの名前を Local Evidence に変更したり、テキストリンク、ファイル名のリスト、Markdown の表、生の HTML グリッド、切り抜き座標のキャプションを使ったりしないでください。
• content.md のスクリーンショットの下に、切り抜き座標のキャプションを追加しないでください。切り抜き座標の詳細は manifest.json に記載します。
• ライブウェブサイトの動画から複数のモーションフレームを抽出します。フレームには、同じカバー画像を繰り返し切り抜いたものではなく、スクロールに伴う実際のページ状態を示します。
• ライブでのキャプチャが妨げられる場合は、別のライブウェブサイトに候補を差し替えることを優先します。差し替えが不可能な場合、またはソースが画像のみの場合に限り、静止画像の証拠からローカルの代替動画を作成し、その理由を content.md と manifest.json に記載します。
• 各インスピレーションのプロンプトは、そのまま AI ビルダーに貼り付けられる長さにします。参照範囲、避けるべきパターン、中心となるアイデア、デザインシステム、レイアウトルール、モーションシステム、セクションごとの構成、コンバージョン／フッター、レスポンシブ動作、アクセシビリティ、パフォーマンス、動きを減らす設定に関する指示を含めます。
• 各プロンプトでは、ランディングページをセクションごとに説明します。グローバルシェル、ヘッダー／ナビゲーション、ヒーロー、実績を示す帯、機能／サービスのモジュール、製品／デモ／メディアのセクション、プロセス／利用手順、存在する場合はギャラリー／事例／制作実績のセクション、お客様の声／ソーシャルプルーフ、存在する場合は料金／プラン／比較、FAQ、最後の CTA、フッター、モバイルでの動作を網羅します。
• 主要なセクションごとに、目的、レイアウトの構成、視覚的な詳細、アニメーション、インタラクションの状態、スクロール時の動作、推奨する実装ライブラリ／API、動きを減らす設定での代替動作を指定します。
• Framer／ライブウェブサイトの場合、静止画像、MP4、フレームがカバー画像ではなく実際の pageUrl からキャプチャされたことを説明する Live-site evidence の注記を、各プロンプトに含めます。
• マニフェストの itemCount は 5 とし、items は正確に 5 件にします。
• すべてのメディアを articles/YYYY-MM-DD-ui-inspiration-capture/ 内に保存します。

ワークフロー

1. まず実際のソースを確認します。

   • HTML、CSS、スクリプトを読みます。mousemove、pointermove、canvas、webgl、ScrollTrigger、requestAnimationFrame、hover、sticky、pin、parallax、magnetic、glow、shader、animation などのインタラクション関連の用語を検索します。
   • ソースに記述された動作を正しいものとして扱います。HTML を確認できる場合、スクリーンショットだけから正確な効果を推測しないでください。
   • 編集前に現在の git の状態を確認します。作業ツリーに変更があるのは通常のことなので、ステージングの範囲は必要最小限にします。

2. プロンプトのリストを決めます。

   • プロンプトは実装行数ではなく、再利用可能なインタラクションのアイデアごとに分けます。
   • ユーザーの箇条書きに異なる効果が 2 つ含まれている場合、記事がより役立つなら分割します。
   • 各セクションには、インタラクションの概念を表す名前を付けます。たとえば、Hero Particle Field That Follows The Mouse、Cursor Glow Hover On Cards、Scroll Behavior And Section Reveal System などです。

3. 再利用可能なプロンプトを作成します。

   • ブランド、カラーパレット、カードサイズ、レイアウト、コンテンツモデルを問わず使える柔軟なプロンプトにします。
   • 中核となるアイデア、技術、実装の構成、インタラクションの動作、スクロール演出、パフォーマンス、アクセシビリティに重点を置きます。
   • ユーザーが正確な再現を明示的に求めている場合を除き、値を固定しないでください。特定の色、サイズ、しきい値、DOM ID、カードの種類、アセットにプロンプトを限定しないでください。
   • 次の構成を優先します。
     • 中核となるアイデア
     • 技術
     • 実装
     • インタラクション
     • 成功条件
   • ランディングページの場合は、構成を拡張して Section anatomy ブロックを追加します。各セクションには、次の項目を含めます。
     • 目的：ストーリー、信頼の構築、コンバージョンの流れにおいて、そのセクションが果たす役割。
     • レイアウト：グリッド、カラムの動作、メディアの配置、固定領域、カード構成、CTA の配置、余白、レスポンシブ時の折りたたみ方。
     • ビジュアルの詳細：タイポグラフィ、色の変化、サーフェス、境界線、シャドウ、メディアの処理、アイコン、情報密度。
     • アニメーション：初期状態、トリガー、イージング、継続時間、スタッガー、変形の原点、不透明度、ぼかし、クリップ／マスク、視差の奥行き、ループの動作、最終状態。
     • インタラクション：ホバー、フォーカス、タップ／クリック、アクティブ／押下状態、カーソル、アコーディオン、カルーセル、フォーム、キーボード、読み込み中、無効、エラーの各状態。
     • スクロール時のインタラクション：表示のしきい値、固定／ピン留めの演出、スクラブに応じた値、視差レイヤー、セクション間の切り替え、スクロールの進行状況、背景／ナビゲーションの変化、下部セクションの表示。
     • ライブラリ／API：ネイティブ CSS、IntersectionObserver、Web Animations API、Framer Motion/Motion One、GSAP ScrollTrigger、Lenis、Embla/Keen/Swiper、Rive/Lottie、Three.js/WebGL のどれを使うか。
   • ソース固有の詳細は、必須要件ではなく、例または任意の参考情報として記載します。

4. 各プロンプトのスクリーンショットを撮影します。

   • ブラウザーを使う必要がある場合は、Codex のアプリ内ブラウザーを使用してください。file:// への直接移動がブロックされる場合は、関連する HTML のみを一時的な隔離フォルダーにコピーし、localhost で配信してください。
   • タスクが日々の UI インスピレーション記事の場合は、各プロンプトについて複数のスクリーンショットまたはモーションフレームを撮影してください。
   • ライブウェブサイトでは、ウェブサイト自体から最初のビューポートと、その後のスクロール位置を撮影してください。モーションフレームの素材として、マーケットプレイスのカバー画像を再利用しないでください。
   • 撮影位置までスクロールするたびに、スクリーンショットまたはフレームを撮影する前に 2 秒待ってください。これにより、遅延読み込みメディア、リビールアニメーション、スティッキー状態の変化、スクロールに応じたトランジションが落ち着くのを待ちます。
   • ライブウェブサイトでは、ページ全体を縦長の 1 枚の画像としてスクロール撮影し、その後セクションごとに切り抜いてください。セクションの切り抜き元には、ページ全体の画像を使用してください。
   • ランディングページに実際にあるセクションをすべて切り出してください。ヒーロー、各中間セクション、フッターが含まれます。隣接するセクション間でピクセル行が抜けないよう、切り抜き境界を正確につなげてください。
   • マニフェストを作成する際は、fullPageImage と sectionImages のメタデータを記録してください。各セクション画像には、セクションのラベル、ファイルパス、元となるページ全体の画像、y-start、y-end、取得可能な場合は高さを含めてください。
   • 記事では、ページ全体の画像とセクション画像を、確立済みの構成に従って表示してください。### Full-Page And Section Evidence、ページ全体のスクリーンショットの通常の Markdown 画像、#### Section Crops、続いてページ順に並べた切り抜き画像の通常の Markdown 画像を配置してください。各画像の下に y-start／y-end の切り抜きメタデータを表示しないでください。Markdown テーブルや生の HTML グリッドは使わず、ファイル名のリストとして切り抜きを表示しないでください。
   • 一般的な単一リファレンスのプロンプト集では、操作が行われる特定のセクションを示すスクリーンショットを、各プロンプトにつき最低 1 枚撮影してください。
   • 必要に応じて、撮影前にインタラクションを実行してください。カーソルエフェクトのためにポインターを動かす、カードにホバーする、固定されたセクションまでスクロールする、キャンバスやパーティクルの動きを待つ、などを行います。
   • 画像は、reference-01-hero-particles.png のような内容が分かるファイル名を付けて、対象記事のフォルダー内に保存してください。
   • 各スクリーンショットは、対応するプロンプトの見出しのすぐ下に挿入してください。

5. 要求された場合は動画を撮影します。

   • ユーザーが動画、モーションスタディ、または日々のインスピレーションの撮影を求めた場合は、インスピレーションまたはインタラクションごとに、ローカルの短い MP4 を 1 本録画してください。
   • Framer／ライブウェブサイトでは、実際の pageUrl をゆっくりスクロールして録画してください。最初のビューポート、セクションのリビール、スティッキーナビゲーション、視差効果、マーキー／カルーセルのループ、分かりやすいホバー状態、ページ下部のコンテンツを含めてください。
   • カバー画像をパン、ズーム、スライドショーする Ken Burns エフェクトを作成し、ウェブサイトのモーションとして提示しないでください。
   • 動画はローカルの相対パスを使って、記事に直接埋め込んでください。
   • 記事を動画なしでも確認できるよう、代表的なフレームを動画から抽出してください。
   • ライブ動画の撮影がブロックされた場合は、試した URL と理由を記録してください。Framer／ライブウェブサイトでは、可能であれば候補を差し替え、カバー画像への代替に黙って切り替えないでください。

6. 記事を作成または更新します。

   • ユーザーが既存の記事を指定した場合は、その記事の content.md を更新してください。
   • 既存の記事がなく、作業が記事／コンテンツのワークスペース内で行われる場合は、articles/YYYY-MM-DD-.../content.md に日付入りの記事フォルダーを作成してください。
   • ローカルの Markdown 画像パスは、記事フォルダーからの相対パスにしてください。
   • ユーザーが記事を求めた場合、プロンプトファイルだけを成果物として残さないでください。

7. 検証します。

   • 変更した Markdown に対して git diff --check を実行します。
   • 参照されているすべてのスクリーンショットおよび動画ファイルが存在し、空でないことを確認します。
   • 日次の UI インスピレーション記事では、インスピレーションが正確に 5 件、埋め込み動画または明示的な代替動画が 5 件、各インスピレーションにつきスクリーンショットまたはフレーム画像が 4 枚以上あることを確認します。
   • 実在するウェブサイトを扱う日次インスピレーション項目では、ページ全体をスクロールして撮影したスクリーンショットが 1 枚あり、セクションの切り抜き画像がヒーロー、意味のあるすべての中間セクション、フッターを上から下の順にカバーしていることを確認します。
   • 座標が利用できる場合は、セクションの切り抜き範囲がページ全体の画像に対して連続していることを確認します。
   • すべての実在するウェブサイト項目について、content.md が定められたページ全体画像／セクション切り抜き画像の構成に従い、レンダリングされた Markdown 画像を含み、テキストリンク、ファイル名の一覧、Markdown テーブル、生の HTML グリッド、Local Evidence 見出し、切り抜き座標のキャプションを含まないことを確認します。
   • Framer／実在するウェブサイトのインスピレーションでは、各項目に pageUrl、websiteScrollVideo などの実際のウェブサイトを撮影するタイプ、実際のページを録画した MP4 があり、カバー画像で代用する旨の表現がないことを確認します。
   • ffprobe を使って MP4 ファイルが読み取り可能であることを確認し、記事ごとに Framer の動画を少なくとも 1 本スポットチェックして、実際のウェブサイトがスクロールされていることを目で確認します。
   • Content アプリ／サーバーが稼働している場合は、UI または API で記事を確認し、遅延読み込み画像が読み込まれるまで十分にスクロールします。
   • 検証が妨げられた場合は、ローカルで確認した内容を報告します。

8. 変更を絞ってコミットします。

   • 記事の Markdown と必要なスクリーンショットアセットのみをステージします。無視対象の記事アセットをコミットする必要がある場合のみ git add -f を使います。
   • 関係のない変更済みファイルをステージしないようにします。
   • ワークスペースの指示で必要な場合は、タスク完了後にコミットします。

プロンプトのスタイル規則

• プロンプトをさまざまな状況で使えるようにします。特定の色を指定する代わりに、「ページのテーマから色を導き出す」と記述します。
• サイズを状況に適応させます。粒子の数やカードのサイズを指定する代わりに、「レイアウトとデバイスに合わせて密度を調整する」と記述します。
• インタラクションを明確にします。どのような使い心地にするか、何を基準に動かすか、どのデータを測定するか、どのように落ち着かせるかを説明します。
• 実装を現実的なものにします。利用が見込まれる API やライブラリを挙げつつ、プロジェクト既存の技術スタックを優先できるようにします。
• アニメーションが多いプロンプトには、動きを抑える設定とパフォーマンスに関する注意事項を含めます。
• スクリーンショットは動きのアイデアを示す根拠として扱い、スタイルの厳密な仕様にはしません。

ライブラリの指針

• ライブラリ名を挙げるのは、実装方法の選択に役立つ場合に限ります。新しい依存関係を追加するより、プロジェクトで既に使われている技術スタックを優先してください。
• 単純なホバー、フォーカス、不透明度、変形、色、下線、背景、ループする装飾的な状態には、CSS トランジション／キーフレームを使ってください。
• タイムライン制御が不要な軽量のスクロール連動表示には、IntersectionObserver または Web Animations API を使ってください。
• React コンポーネントの登場、レイアウトトランジション、共有要素トランジション、段階的に表示するリスト、モーダル、ドロワー、状態駆動型の UI モーションには、Framer Motion または Motion One を使ってください。
• 固定セクション、スクラブ操作するタイムライン、多層パララックス、画像シーケンスのスクラブ操作、マスクを使ったテキスト表示、背景のトランジション、セクション間の精密な切り替えなど、複雑なスクロール演出には GSAP と ScrollTrigger を使ってください。
• 滑らかなスクロールがスクロール演出を実質的に支える場合に限り、Lenis を使ってください。汎用的な見栄え向上のために追加しないでください。
• 単純な横方向のコンテンツ列には、まず CSS のスクロールスナップを使ってください。カルーセルの操作、ループ、ドラッグの物理挙動、またはレスポンシブなスライド処理が必要な場合は、Embla、Keen Slider、Swiper を使ってください。
• デザイナーが制御するタイムラインが必要な、制作済みのベクターアニメーションやインターフェースアニメーションには、Rive または Lottie を使ってください。画面外では一時停止するか、簡易化してください。
• Three.js/WebGL は、実際の 3D、シェーダー、パーティクル、またはキャンバスのシーンに限って使ってください。ピクセル比に上限を設け、画面外では一時停止し、モバイルでは密度を下げ、静的な代替表示を用意してください。
• 単純な固定パネルには CSS の position: sticky を使ってください。タイムライン制御、スクラブ操作する値、または複数要素間の切り替えが必要な場合に限り、GSAP のピン留めを使ってください。
• すべてのアニメーション計画には、prefers-reduced-motion、タッチデバイスでの動作、キーボード／フォーカスの動作、パフォーマンス上の制約を含めてください。