microinteractions

マイクロインタラクションフレームワーク

ユーザーが毎日触れる、トグル、パスワード欄、ローディングインジケーター、プル・トゥ・リフレッシュ、いいねボタンなどの、ささやかで完結したプロダクト体験を設計します。Dan Safferの4つの構成要素（トリガー、ルール、フィードバック、ループとモード）に基づくこのフレームワークは、目に見えない細部を、忘れられがちなプロダクトと愛されるプロダクトを分ける磨き上げへと変えます。

基本原則

我慢して使うプロダクトと、愛着を持って使うプロダクトの違いは、ほとんどの場合、マイクロインタラクションにあります。 マイクロインタラクションとは、設定の変更、データの同期、パスワードの選択など、1つのユースケースを軸とした、完結した体験です。ユーザーが意識することはほとんどないほど小さなものですが、その存在は感じ取られます。どのマイクロインタラクションも、同じ4つの構成要素に従います。トリガーが開始し、ルールが動作を決め、フィードバックが何が起きているかを示し、ループとモードが長期的な振る舞いを定義します。

スコアリング

目標：10/10。 マイクロインタラクションが8項目のクイック診断のうち、いくつに合格したかで採点します — score = round(passed / 8 × 10)。その後、該当する評価帯を確認します。

• 9-10 = 8項目すべてに合格：状態が明確で見つけやすいトリガー、シンプルで予測可能なルール、イベントの重要性に応じた100ms未満のフィードバック、時間とともに変化する動作、モードがないか見える状態、ヘルプなしで習得可能。
• 5-6 = 4〜5項目に合格：機能はしますが、どこにでもある印象です。たとえば、フィードバックはあるものの一律である、またはトリガーに明確な状態がない場合です。
• <=3 = 2項目以下に合格：フィードバックがない、トリガーが見えない、または信頼を損なう隠れたモードがある状態です。

現在のスコア、不合格となった診断項目、および各項目に対する具体的な修正方法を必ず示してください。

マイクロインタラクションの構造

優れたマイクロインタラクションを設計するための6つの注目領域です。実際のパターンを4つの構成要素に分けて詳しく確認したい場合は、references/case-studies.mdを参照してください。フォームの送信、トグル／スイッチ、プル・トゥ・リフレッシュ、ローディング状態、通知について、初回利用からエッジケースまで取り上げています。

1. トリガー

基本概念： トリガーはマイクロインタラクションを開始します。手動（タップ、クリック、スワイプ、音声コマンド）またはシステムによる開始（時刻、位置情報、受信データ、エラー状態）があります。すべてのマイクロインタラクションの入り口です。

効果がある理由： トリガーの目立ちやすさとラベルは、ユーザーが操作する前に期待を形作ります。「削除」と赤字で表示されたボタンは、取り消せない重大な結果を示すため、その後のフィードバックも意外なものではなく、予測どおりに感じられます。

主なポイント：

• トリガーは、存在すること、何をするか、現在どの状態か、の3点を伝える必要があります
• トリガーの目立ちやすさは操作の重要性に合わせます。重大な操作には、目立つトリガーが必要です
• 見えないトリガー（ジェスチャー、シェイク、近接）には、見つけやすくするため、目に見える代替手段を組み合わせます
• トリガーの状態（デフォルト、ホバー、アクティブ、無効、読み込み中）を視覚的に区別します

プロダクトへの適用例：

コンテキスト	適用方法	例
トグルコントロール	2つの状態を持つ手動トリガー	iOSのWi-Fiスイッチ：タップで切り替え、位置で状態を表示
プル・トゥ・リフレッシュ	視覚的な手がかりを伴う隠れたジェスチャー	しきい値を超えて引くと、更新アニメーションを開始
システムアラート	条件成立時に作動するシステムトリガー	バッテリー残量が20%になると低残量通知を表示

倫理的な境界： 重要なトリガーをジェスチャーや見えない操作の背後に隠す場合は、必ず目に見える代替手段を用意してください。

参照：references/trigger-design.mdでは、トリガーの操作手がかり、状態、配置、複雑さの軽減について説明しています。

2. ルール

基本概念： ルールは、マイクロインタラクションがトリガーされた後に起こること、つまりイベントの順序、制約、処理、終了方法を定義します。ユーザーがルールを直接目にすることはありませんが、ルールが適切でないときにはそれを感じ取ります。

効果がある理由： ルールは、インタラクションの仕組みについてユーザーが築くメンタルモデルを形作ります。期待に沿った一貫性のあるルールは自然に感じられますが、期待を裏切るルール――切り替わらないトグルや、値が飛ぶスライダーなど――は信頼を損ないます。

重要なポイント：

• まずマイクロインタラクションの目標を定義し、そこからルールを導き出します
• 既存のメンタルモデルやプラットフォームの慣習に合わせます
• 文字数の制限、値の範囲の設定、形式の適用によって入力を制約し、エラーを防ぎます
• ゼロ、最大値、繰り返しのトリガー、中断などのエッジケースを明示的に処理します

製品での適用例：

コンテキスト	適用方法	例
パスワードの強度	入力内容をリアルタイムで評価するルール	ユーザーが入力するとメーターが更新され、色が赤から緑に変わります
文字数カウンター	残り文字数を制限し、表示するルール	Twitter/X：カウンターが減少し、上限に達すると赤色になります
取り消し操作	元に戻せる時間枠を設定するルール	Gmail の「送信取り消し」は 30 秒間利用できます

倫理的な境界： ルールは透明で予測可能なものにしてください。行動を操作するルールを隠してはいけません。たとえば、購読よりも購読解除を難しくすることは避けてください。

関連項目：references/rules-and-state.md では、状態管理、制約、エラー状態、エッジケースについて説明しています。

3. フィードバック

基本概念： フィードバックは、視覚（色、アニメーション、動き）、聴覚（クリック音、チャイム音）、触覚（振動）を通じて、「今、何が起きているのか？」に答え、ルールをユーザーに伝えます。重要なことだけを、最小限かつ意味のある形で、状況に合わせて表示します。

効果がある理由： フィードバックがないと、ユーザーは自分の操作が登録されたのか、システムが動作しているのか判断できず、再度タップしたり、操作を諦めたり、結果を信用しなくなったりします。フィードバックによって、目に見えないシステムの状態が、認識できる反応に変わります。

重要なポイント：

• フィードバックは即時でなければなりません。直接操作の場合は 100ms 未満が目安です
• 伝達に必要な範囲で最も目立たないフィードバックを使い、別個のトーストではなく、既存の要素（ボタン自体など）をアニメーションさせることを優先します
• イベントの重要度に合わせてフィードバックの規模を調整します。小さな操作には小さなフィードバック、大きな結果には大きなフィードバックを使います
• 視覚的なフィードバックを主体とし、音声や触覚は補助的なものとして使います。これらだけを唯一の手段にしてはいけません
• 実際の待ち時間が変わらなくても、進行状況インジケーターによって体感待ち時間を短縮できます

製品での適用例：

コンテキスト	適用方法	例
ボタンの押下	クリック時に視覚的な状態変化を示す	ボタンが押し込まれ、色が変わり、テキストが「保存中...」になります
フォームの検証	ユーザーの入力に応じてインラインでフィードバックを示す	有効なメールアドレスの入力欄の横に緑色のチェックマークを表示します
エラー状態	エラーの原因となった箇所の近くに、状況に即したエラーを表示する	入力欄に赤い枠を付け、「パスワードは 8 文字以上で入力してください」と表示します

倫理的な境界： フィードバックは正直なものにしてください。偽のプログレスバー、操作を誘導するカウントダウン、誤解を招く完了率は使わないでください。

関連項目：references/feedback-patterns.md では、フィードバックの手段、タイミング、過剰なフィードバックを防ぐ方法について説明しています。

4. ループとモード

中核となる概念： ループとは、時間の経過に伴うメタルールです。100回目の利用後にインタラクションが変化するのか、期限切れになるのか、適応するのかを定めます。モードとは、同じコントロールの挙動が一時的に変わる、ルールの分岐です（編集モードと表示モードなど）。

効果がある理由： よく考えられたループによって、マイクロインタラクションは自然に成熟していきます。熟練ユーザーの手間を減らしつつ、新しいユーザーにも見つけやすくできます。モードを慎重に使えば、インターフェースを煩雑にすることなく、1つのコントロールに複数の目的を持たせられます。

主なポイント：

• オープンループは明示的に停止するまで続きます（繰り返し鳴るアラーム）。クローズドループは一度だけ実行されて終了します（タイマー）。
• 長期的なループでは、時間の経過に伴ってインタラクションが変化します。初回はツールチップが表示されますが、50回目には表示されません。
• 段階的な削減：ユーザーの習熟度に応じて、足場となるガイドを取り除きます。
• モードには危険があります。「同じ操作なら同じ結果」という原則に反するため、モードは最小限にし、現在のモードをはっきり表示します（Caps Lock インジケーター、編集バナーなど）。

プロダクトへの応用：

コンテキスト	応用	例
オンボーディングのツールチップ	N回の使用後にヒントを表示しなくなる長期ループ	最初の3回のセッションでは「スワイプしてアーカイブ」と表示し、その後は表示しない
目覚まし時計	無効にするまで繰り返すオープンループ	オフに切り替えるまで、毎週平日の午前7時に鳴る
テキスト編集	モード：表示と編集	「完了」ボタンで終了できる「編集中」バナーを表示する

倫理上の境界： ループはビジネスではなく、ユーザーの利益になるものでなければなりません。通知を増やしたり、オプトアウトを段階的に難しくしたりするためにループを適応させてはいけません。

参照：references/loops-modes.md（長期的なループ、モードエラー、複雑さの段階的な調整について）。

5. シグネチャーモーメント

中核となる概念： シグネチャーモーメントとは、プロダクトのアイデンティティの一部となるほど際立ったマイクロインタラクションです。Facebookの「いいね！」、スライドしてロック解除、Slackの読み込みメッセージなどが該当します。すべてのプロダクトに1つか2つは必要ですが、すべてのインタラクションをそうする必要はありません。

効果がある理由： シグネチャーモーメントは感情に訴える記憶を生み、プロダクトを寄せ集めではなく、丁寧に作り込まれたものに感じさせます。ユーザーが自分のプロダクトを人に説明するとき、最初に実演するのがこうした瞬間です。

主なポイント：

• シグネチャーモーメントは、設定の奥ではなく、頻繁に使われ、目に留まりやすい操作に取り入れます。
• まず機能性、次に楽しさです。目新しさのために使いやすさを犠牲にしてはいけません。
• アニメーション、サウンド、コピーが、最もよく使われる3つの手段です。
• ブランドの個性に合わせます。遊び心のあるブランドには、遊び心のある演出を使います。
• 削除テストを行います。ユーザーがなくなっても気にしないなら、それはシグネチャーではなく飾りです。

プロダクトへの応用：

コンテキスト	応用	例
ソーシャルリアクション	エンゲージメントに応じたアニメーション付きの反応	Facebookの「いいね！」：親指を立てたアイコンがパーティクルとともにアニメーションする
読み込み状態	ブランドを反映した待機体験	Slack：読み込み中に引用文が切り替わる
完了	祝福を伝える確認表示	Stripeの支払い：紙吹雪とともにチェックマークがアニメーションする

倫理上の境界： スキップできないお祝いのアニメーションで、入力や次のステップを妨げてはいけません。ユーザーが紙吹雪をタップして先に進めるようにします。

参照：references/signature-moments.md（投資すべきタイミングや、ありふれたインタラクションを楽しくする方法について）。

6. 削減と簡素化

核となる考え方： 最高のマイクロインタラクションは、シンプルで素早いため、ほとんど意識されません。まず削減し（選択肢、手順、判断を減らし）、残ったものを簡素化して、自然に使えるものにします。

効果がある理由： 選択肢、入力欄、判断が増えるたびに、認知負荷が高まります。ユーザーは切り替えスイッチを設定したいのではなく、期待どおりに動いてほしいのです。最も洗練されたマイクロインタラクションには、設定が不要で、操作は1つだけ、結果はすぐに得られます。

主なポイント：

• マイクロインタラクションに説明が必要なら、複雑すぎます
• スマートなデフォルト設定で選択肢をなくし、最適なものを選んで適用します
• 可能であれば、複数の手順が必要なインタラクションを1つの操作にまとめます
• 段階的開示を活用します。最初はシンプルに表示し、複雑な機能は求められた場合にのみ表示します
• ルールの数を利用頻度に応じたものにします。よく使う操作には少ないルールを適用します

製品への応用：

コンテキスト	応用例	例
スマートなデフォルト設定	設定をなくす	カメラアプリを設定画面ではなく、写真モードで開く
単一の操作	複数手順のフローをワンタップに置き換える	メニューからリアクションを選ぶ代わりに、ダブルタップで「いいね」する
先回りしたデザイン	予測して事前入力する	ZIP コードから市区町村と都道府県を配送フォームに入力する

倫理的な境界線： 「スマートなデフォルト設定」はビジネスではなくユーザーのためのものでなければなりません。マーケティングのオプトイン、有料アドオン、データ共有をデフォルトで事前に選択してはいけません。

よくある間違い

間違い	失敗する理由	修正方法
操作へのフィードバックがない	タップが認識されたかどうか、ユーザーにはわかりません	すべてのインタラクティブ要素に、即時の視覚的な状態変化を追加します
シンプルな場面を過剰にデザインする	複雑なアニメーションは、頻繁に行う操作を遅くします	豊かなアニメーションは、頻度が低く影響の大きい場面に限ります
エッジケースを無視する	値がゼロ、最大値、またはダブルタップの場合にインタラクションが機能しません	空、読み込み中、一部入力済み、入力済み、エラー、無効のすべての状態を洗い出します
トリガーが見えない	ユーザーが機能を見つけられません	ジェスチャーのトリガーに、目に見える代替手段を組み合わせます
モードの誤り	隠れた状態によって、同じ操作から異なる結果が生じます	現在のモードを見えるようにし、モードの数を最小限にします
長期的な利用を無視する	初日も100日目も、インタラクションが同じに感じられます	継続利用するユーザーには、段階的な簡素化を取り入れます
フィードバックの過剰	すべての操作でトースト、音、アニメーションが発生します	伝えるために必要な、最小限のフィードバックを使います
偽の進捗インジケーター	バーが偽物だと気づいたとき、ユーザーはだまされたと感じます	正確で決定的な進捗表示を使い、不明な場合は不確定スピナーを使います

簡易診断

マイクロインタラクションを監査します。

質問	いいえの場合	対応
明確で見つけやすいトリガーがありますか？	ユーザーがインタラクションを開始できません	目に見えるコントロールまたは操作の手がかりを追加します
トリガーに現在の状態が表示されていますか？	オン、オフ、読み込み中のどれか、ユーザーにはわかりません	トリガーの状態ごとに、はっきり異なる視覚表現を追加します
ルールはシンプルで予測可能ですか？	ユーザーは何が起きたのか理解できません	ルールを簡素化し、プラットフォームの慣例に合わせます
即時のフィードバックがありますか？	操作が反映されたかどうか、ユーザーが不安に感じます	100ms 以内に視覚的な反応を追加します
フィードバックはイベントの重要度に合っていますか？	小さな操作が大げさに感じられたり、大きな結果が取るに足らなく感じられたりします	イベントの重要度に合わせてフィードバックの強さを調整します
インタラクションは時間とともに変化しますか？	熟練ユーザーにも初心者向けのヒントが表示され続けます	長期的な利用に応じた段階的な簡素化を加えます
不要なモードがありませんか？	ユーザーが間違ったモードで操作してしまいます	モードをなくすか、現在のモードを目立つように表示します
初めて使うユーザーが、助けなしで使い方を理解できますか？	インタラクションに説明が必要です	簡素化するか、長期的な利用の中で一度だけ表示されるヒントを追加します

参考文献

このスキルは、Dan Safferによる、細部にこだわったデザインの決定版ガイドに基づいています。

• 「マイクロインタラクション：細部にこだわったデザイン」 Dan Saffer著

著者について

Dan Safferはデザイナーであり、Twitter、Jawbone、Smart Designでチームを率いてきたデザインリーダーです。著書『Microinteractions』では、世界中のデザインチームが、製品を洗練され、生き生きとした印象にする細部を評価、設計、改善するために使うフレームワークを体系化しました。また、『Designing for Interaction』と『Designing Gestural Interfaces』も執筆しています。