@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}プロジェクト
両方の設定とキーボードフォーカスを確認し、動作停止後も状態テキストを残してください。
適用前に確認
実際の動作を期待する結果と比較します。検証に失敗した場合は、次の変更を加える前に原因を調べてください。
モデル
OpenAI互換またはAnthropicのエンドポイントを、ベースURLと必要なAPIキーで設定し、接続をテストします。ローカルのモデルサーバーは起動が必要です。リモートツールは別途データを送信する場合があります。
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}動きの設定をインターフェース変更の一部として扱う
MotionHearthは、接続したAIモデルとインターフェースの変更を開発するWindows向けコーディング環境です。プロジェクトフォルダーを示し、操作で何を伝えるべきか説明してください。対話でコンポーネントとスタイルを一緒に追い、アニメーションが伝えるべき状態、フォーカス、反応の文脈で提案をレビューできます。
motion.cssから考えられる作業の1つは、動きを減らす設定が要求された場合のアニメーションのレビューです。動きを止めた後も既存UIが同じ情報をどう伝えるか、キーボードフォーカスが見えるかを問いましょう。これらの問いで、サンプルを確認可能なアプリケーション変更へとつなげられます。単にキーフレームを削除するより広く、実画面で確認できる範囲に依頼を保てます。
対応するOpenAI互換またはAnthropicのエンドポイントが提供する場合、制限のないAIモデルを選択できます。機能と制約はモデルとサーバーに属することを理解し、接続情報と必要な認証情報を追加してください。動きを有効にした状態と減らした状態でテストする前に、CSSとコンポーネントの編集結果をレビューします。ポインター入力だけでなくキーボード移動も使ってください。目標は両方の設定で一貫した動作を実現し、アシスタントの説明だけでなくアプリケーションの描画で裏付けることです。
動きと操作を一緒に確認する
動きを減らす依頼では何を指定すべきですか？
動く要素、それが伝える情報、期待する代替動作を示します。関連するコンポーネントとスタイルシートも含めてください。これにより、利用者が失うものを考えずに動きを削るのではなく、有用なフィードバックを保つ変更を提案できます。
アニメーションを止めると現在の状態が見えなくなりますか？
動きだけが状態を示していた場合は起こり得ます。無効にしたときに残るテキスト、形、状態マーカーを確認してください。UIに合う代替手段を求め、操作全体を通じて明確に伝わるかを検証します。
動きの変更時になぜキーボードフォーカスをテストするのですか？
アニメーションするコントロールの周辺スタイルは、フォーカス表示にも影響する場合があります。変更した画面をキーボードで移動し、どの要素がアクティブか確認してください。キーフレームだけのレビューでは、操作全体が分かりやすいままか確認できません。
モデルはソースファイルからどこまで検証できますか？
コンテキストとツールの範囲で利用できるコードについて、解釈を提案できます。それでも描画状態の確認とプロジェクトのチェックは必要です。不足する画面、スタイル、実行時条件はレビューの限界として扱ってください。
MotionHearth · 更新日 2026-10-25