マイクロインタラクションとは？小さな動きが操作を助ける仕組みと、入れるべき箇所

マイクロインタラクションとは、ひとつの操作に対して起きる、小さな反応のまとまりです。ボタンを押したときの色の変化、入力欄に文字を入れたときの検証、スイッチを切り替えたときの動きなどが該当します。

多くの解説は「体験が良くなる」で終わりますが、実務で問題になるのは、どこに入れるかと、どこに入れないかの判断です。すべての要素を動かすと、注意が分散して操作が遅くなります。

この記事では、構成要素の分解、入れるべき箇所の判断基準、長さの目安、動きを止められるようにする対応、そして効果の確認方法を整理します。

マイクロインタラクションは4つの要素でできている

設計の議論が「動きを付けるか付けないか」で止まるのは、ひとつのまとまりとして扱っているためです。分解すると、どこを決めていないかが分かります。

分解の枠組みとして広く使われているのが、Dan Saffer氏が著書『Microinteractions』（2013年）で示した4要素です。

実装で問題が出るのは、ほとんどが「ルール」の抜けです。読み込み中にもう一度押された場合、通信が失敗した場合、途中で画面を離れた場合を決めていないと、動きだけが残って状態が分からなくなります。

設計段階での確認はユーザビリティの10原則を自社サイトの点検に使う｜項目ごとの確認方法の「システム状態の視認性」と対応させると漏れが減ります。

状態を伝える動きと、装飾の動きは別物

同じ「動き」でも、目的が違えば判断基準も変わります。混ぜて議論すると、必要なものが削られ、不要なものが残ります。

上の2つを省くと実害が出ますが、下の2つは省いても操作は成立します。予算や工数が限られる場合、上から順に確保してください。

処理中・完了・エラーといった状態表示そのものの設計はUIのフィードバック設計｜操作が伝わらないと、利用者は同じ操作を繰り返すで扱っています。この記事では、それをどう見せるかの部分を扱います。

入れるべき箇所は、迷いが起きる操作に限られる

全画面に均等に入れる必要はありません。迷いや取り消しが起きている箇所から入れてください。

優先順位は、金銭や個人情報が動く操作の近さで決めてください。問い合わせフォームと決済導線は、動きが不足していると実際の損失につながります。一方でトップページの入場演出は、費用に対して回収できるものがほとんどありません。

長さは「待たされない範囲」で決める

動きの長さは、気づける最短にするのが原則です。長いほど丁寧に見えますが、その分だけ次の操作が遅れます。

数値は目安であり、規格ではありません。判断の基準は「同じ操作を1日に何度も行う人が、遅いと感じないか」です。管理画面や絞り込みのように繰り返す操作では、短いほど評価されます。

また動きの長さと、処理そのものの速さは別の問題です。読み込みが遅いことを演出で隠しても、待ち時間は変わりません。表示速度の改善はサイトの表示速度を改善する優先順位｜何から手をつけるかを参照してください。

動きを減らす設定に対応する

利用者側で「アニメーションを減らす」設定を有効にしている場合があります。この設定を無視すると、体調に影響が出る利用者がいます。

• iOS・macOSの「視差効果を減らす」
• Windowsの「アニメーションを表示する」を無効にした状態
• Androidの「アニメーションを削除」

これらはブラウザに prefers-reduced-motion として伝わるため、制作側で動きを弱める、あるいは無くす分岐を用意できます。対応は難しくありませんが、指定しなければ設定は無視されます。

大きく動くもの、視差でずれるもの、回転するものほど影響が出やすくなります。色や不透明度の変化だけであれば、影響は小さいとされています。減らす設定が有効なときは、動きを止めて結果だけを表示してください。

どこまで対応するかの考え方はWebアクセシビリティ対応はどこまでやるべきか｜優先順位の決め方で整理しています。

実装コストと引き換えに得られるもの

動きは無料ではありません。実装・確認・引き継ぎのすべてに工数がかかります。

回収できるのは、迷いや取り消しが実際に起きている箇所だけです。問い合わせフォームの二重送信や、絞り込み結果の見落としは、件数として現れます。そこに限定すれば投資は回収できますが、全画面に広げると確認工数だけが増えます。

仕様を残す方法としてはコンポーネントライブラリとは｜制作を効率化する仕組みと、作る前に決めることのように、部品ごとに動きを含めて管理する形が現実的です。

効果は印象ではなく、操作の結果で確認する

「良くなった気がする」では判断できません。操作の結果に現れる数値で確認してください。

1. 同じフォームの送信が短時間に重複している件数を数える
2. 入力エラーで差し戻された後の離脱率を見る
3. 絞り込みを操作した後、結果を見ずに離れた割合を見る
4. 変更前後で、同じ期間・同じ流入で比較する
5. 端末別に分けて見る（動きの影響は画面幅で変わる）

ページ滞在時間は指標になりません。動きで待たされても伸びるためです。読まれた範囲を見るならスクロール率からLPを改善する｜どこで読むのをやめたかを特定する手順のように、到達位置で確認してください。

設計段階で動きを確認する場合はプロトタイプで確認できること、できないこと｜作る範囲の決め方の範囲を理解した上で使うと、実装後の手戻りが減ります。

よくある失敗

すべての要素に動きを付ける

どこを見ればよいか分からなくなります。注意を向ける動きは、1画面に1か所までにしてください。

異常時の挙動を決めていない

通信が失敗したときに動きだけが続き、状態が分からなくなります。ルールには失敗した場合を必ず含めてください。

入場演出を毎回再生する

再訪した人ほど不快になります。演出を入れるなら、初回のみに限定するか、そもそも入れない判断をしてください。

動きを減らす設定を考慮しない

設定を有効にしている利用者に、そのまま動きが再生されます。分岐を指定しない限り、設定は反映されません。

演出で読み込みの遅さを隠す

待ち時間は変わりません。速度そのものを改善したうえで、進行状況を伝えてください。

よくある質問

マイクロインタラクションとアニメーションの違いは何ですか

アニメーションは動きそのものを指す言葉です。マイクロインタラクションは、きっかけ・処理の規則・利用者への反応・繰り返しの扱いまでを含んだ、ひとつの機能単位を指します。動きを伴わないもの（音や振動だけ）も含まれます。

入れると成果は上がりますか

箇所によります。二重送信や入力の差し戻しが起きているフォームでは改善が見込めますが、装飾として全体に入れても成果は動きません。先に、どこで迷いが起きているかを確認してください。

動きを実装すると表示は遅くなりますか

実装方法によります。位置や大きさを毎フレーム計算する動きは負荷が高く、低価格帯の端末で処理落ちします。不透明度と移動だけで表現できる範囲に収めると、影響はほとんどありません。

スマートフォンでも同じ設計でよいですか

同じにはできません。カーソルを乗せた状態が存在しないため、ホバーで伝える設計はそのまま失われます。タップした瞬間と、指を離した後の表示で伝える形に置き換えてください。

既存サイトのどこから手を付けるべきですか

問い合わせフォームの送信ボタンからです。押せたかどうかが分からない状態は二重送信を生み、そのまま問い合わせ件数の水増しと対応工数につながります。効果が数値で確認しやすい箇所でもあります。

まとめ

マイクロインタラクションは、トリガー・ルール・フィードバック・ループとモードの4要素に分解できます。実務で問題になるのはルールの抜けで、通信が失敗した場合や途中で操作された場合を決めていないと、動きだけが残って状態が分からなくなります。設計時にこの4つを埋めるだけで、実装後の差し戻しは大きく減ります。

入れるべき箇所は、迷いや取り消しが実際に起きている操作に限られます。送信ボタン、入力欄の検証、絞り込み、カートへの追加は、動きが不足していると二重送信や見落としという形で損失が出ます。一方でページ全体の入場演出は、再訪する人ほど待たされるため、費用に見合いません。

長さは気づける最短にし、繰り返す操作ほど短くしてください。あわせて、動きを減らす設定への対応も必要です。指定しなければ設定は無視されるため、大きく動くものや視差でずれるものほど、影響が出る利用者がいます。効果は滞在時間ではなく、重複送信や差し戻し後の離脱といった操作の結果で確認してください。

当社ではデザイン制作において、状態が伝わるUIの設計をご提案しています。実装を含めたサイト全体のご相談はホームページ制作をご覧ください。