マイクロインタラクション種類

このツールでできること

• マイクロインタラクション種類では、Feedback、Tooltip、Loading、Transition、Toggle、Scroll、Swipe、Long pressを表で確認できます。
• 関連する観点として マイクロインタラクション種類、micro interactions、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. Feedback 行で、クリックやタップ後に操作が届いたことを伝える反応を確認します。
2. Tooltip と Loading の行を見て、補足情報と処理中表示を混同しないようにします。
3. Transition と Toggle の行で、状態が変わる前後のつながりを設計します。
4. Scroll、Swipe、Long press の行は、ジェスチャー依存のUIを採用する前の確認に使います。

入力例・出力例

よくある利用シーン

• ボタン、スイッチ、保存完了など小さな反応をデザイン仕様に書き出すとき。
• ホバー前提の情報提示がタッチ端末で破綻しないか見直すとき。
• 画面遷移ではなく部品単位の動きを、motion durationと別軸で整理したいとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• マイクロインタラクション種類、micro interactions、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• マイクロインタラクション種類の主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール