使い方ガイドへスキップ
Micro-Interaction Spec作者 Owl-Listener

Micro-Interaction Spec スキル。

アニメーションの参考資料だけでなく、小さなインタラクションの背後にある挙動をエンジニアリングに伝えます。

  • インタラクションデザイン
  • UIハンドオフ
ソースレビュー · Micro-Interaction SpecSKILL.md
タスク インタラクションデザイン 成果物 • 1つのインタラクションに対するトリガーとルールの仕様。 • タイミングとイージングの注記を含むフィードバックのシーケンス。 • 繰り返し時、初回利用時、アクセシビリティに関する挙動。 開始前に 特定のモーションライブラリは必要ありませんが、対象デバイスでのテストは引き続き必要です。
編集者による要約 · ソース確認日 2026-10-07 · 生成された例ではありません

01 機能概要

ひとつのインタラクションを完全に仕様化する

トリガー、ルール、フィードバック、ループまたはモードを軸にした、焦点を絞ったインタラクションのハンドオフ形式です。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

Micro-Interaction Specは、小さなインタラクションを完結した挙動の単位として記述します。トリガーが開始し、ルールが後続の流れを決め、フィードバックが結果を伝え、ループまたはモードが繰り返しや時間経過による変化を説明します。この構成は、トグル、お気に入り操作、プルトゥリフレッシュ、バリデーション表示、長押しに適しています。

モーションは成果物の一部にすぎません。視覚的変化、音、触覚はフィードバックの候補となるチャネルであり、すべてのプラットフォームで使えるとは限りません。ソースでは、ロジックと併せて継続時間、イージング、アクセシビリティへの配慮を求めており、洗練されたアニメーションが未定義の失敗状態や繰り返し状態を隠してしまうことを防ぎます。

期待される成果物

  • 1つのインタラクションに対するトリガーとルールの仕様。
  • タイミングとイージングの注記を含むフィードバックのシーケンス。
  • 繰り返し時、初回利用時、アクセシビリティに関する挙動。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    トリガーを定義する

    インタラクションがジェスチャー、システムイベント、条件のいずれで始まるかを明記します。

  2. 02
    ルールを書く

    フィードバックの扱いを選ぶ前に、順序、条件、分岐を記述します。

  3. 03
    知覚と繰り返しを仕様化する

    ユーザーが何を見たり感じたりするか、それがどれくらい続くか、2回目以降に何が変わるかを説明します。

02 利用場面

使う場面

特定のモーションライブラリは必要ありませんが、対象デバイスでのテストは引き続き必要です。

適したケース

  • エンジニアリングへのハンドオフ短いインタラクションがプロトタイプでは明確でも、挙動が文書化されていない場合に役立ちます。
  • フィードバックの改善目的のある確認表現と、有用な情報を加えない装飾を切り分けるのに役立ちます。

確認すべき限界

  • 一度にひとつのインタラクション相互依存する多くの状態を持つコンポーネントには、より広い範囲のstate-machineモデルが必要です。
  • デバイスでの動作は保証されません触覚や音のフィードバックは、対象プラットフォームで対応していることを確認し、テストする必要があります。

用意する入力

  • 操作とコンテキスト仕様化する対象のコントロール、ジェスチャー、イベントを正確に特定します。
  • ロジックと条件成功時、拒否時、操作が繰り返された場合の挙動を提示します。
  • プラットフォームの制約モーション設定、対応しているフィードバックチャネル、パフォーマンス上の制限を記載します。

03 重要な判断

重要な判断

  1. ループを明示する

    繰り返された操作には、毎回同じフィードバックを再生するのではなく、初回とは異なる応答が必要な場合があります。

  2. イージングより先にロジック

    アクセシビリティのためにアニメーションを取り除いても、この仕様は引き続き役立ちます。

04 依頼例

焦点を絞ったブリーフを試す

以下のサンプルブリーフはテストされていません。使用前に、スキルのセットアップを確認してください。

セットアップを確認する

リポジトリに記載されているインストール手順を使い、参照されている付属ファイルも保持してください。このエントリは、実行可能なアプリケーションではなく、焦点を絞ったデザイン手法を説明するものです。

アップストリームのソースファイル
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/micro-interaction-spec/SKILL.md

特定のモーションライブラリは必要ありませんが、対象デバイスでのテストは引き続き必要です。

まず1つの成果物から始める

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

サンプルブリーフ
記事を読書リストに保存する操作にmicro-interaction-specを使用してください。クリックによるトリガー、保存の保留中と失敗時のルール、視覚的な確認表示、繰り返しクリック時の挙動、およびモーション軽減設定時の代替表現を定義してください。このインタラクションのみに絞り、Webで触覚フィードバックに対応していると想定しないでください。

結果を確認する

実際の出力を、次の観察可能な基準に照らして確認します。

  • トリガーと結果の状態が明確である。
  • 繰り返し操作された場合の結果が定義されている。
  • 必要不可欠なフィードバックは、モーション軽減時にも維持される。

OpenDesignは、コーディングエージェント向けのローカルなデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味するものではありません。

05 ソースとライセンス

ソースとライセンス

このページは、下にリンクされている固定されたソースのリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
Owl-Listener
ライセンス
MIT
確認したスナップショット
2026-10-07 · 9a6930cf84a8
編集者によるソース要約
トリガー、ルール、フィードバック、ループまたはモードを軸にした、焦点を絞ったインタラクションのハンドオフ形式です。

リンク先のソースに基づき、OpenDesignが作成したオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用状況や品質評価ではありません。

06 開始前の質問

始める前の質問

アニメーション専用ですか?

いいえ。このフレームワークにはトリガー、ロジック、フィードバック、繰り返しが含まれます。アニメーションはフィードバックの選択肢のひとつです。

ステートマシンとはどう違いますか?

焦点を絞ったインタラクションの体験を仕様化するものです。ステートマシンは、より大きな状態の集合と有効な遷移を網羅的にモデル化します。

すべてのインタラクションで音や振動を使う必要がありますか?

いいえ。ソースは検討すべきチャネルを挙げているだけで、どれが適切かはプロダクトの文脈とプラットフォームによって決まります。

OpenDesign

次のデザインイテレーションのための余白をつくりましょう。

ブリーフ、ソース素材、デザイン作業をローカルのワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/micro-interaction-spec/SKILL.md