情報の表示と消去 — 「現れ方」が信頼を作る

突然現れるものは「脅威」に見えます——これは原始的な本能です。暗い部屋で突然ライトがつくと驚くように、UIの要素が瞬間的に出現するとユーザーはドキっとします。

動きをつけることで「これは意図的に現れた」とユーザーが理解できます。信頼は「驚かせない」ことから始まります。

モーダルの現れ方 4種比較

4つのボタンを押してモーダルを開いてみてください。どれが一番「自然」か、体感してください。

4種類のモーダル表示を比較。「突然」と「scale+fade」では印象がまったく違う

「突然現れる」は驚きと不信感を生みます。「scale+fade」は最もよく使われる組み合わせで、「空間の中で何かが開いた」感覚を与えます。

モーダルが開いたとき、背景が暗くなります。これは単なる視覚的なエフェクトではありません。

背景が暗くなることで「今はこのモーダルに集中してほしい」という空間的な指示をユーザーに与えます。周囲が暗くなれば、明るいモーダルに自然に視線が集まります。また「背景はクリックできない」という制約も暗示します。

オーバーレイのフェードイン速度はモーダルより少し遅めにすると、モーダルの「前面感」が強まります。

同じ情報でも、どこから現れるかで「何の通知か」が変わります。

右上=情報通知、下=操作結果、中央=重要警告。方向が通知の「種類」を伝える

hover してすぐ表示されるツールチップは「うっとうしい」。でも遅すぎると「使えない」。

⚙ ボタンにホバーしてツールチップのタイミングを比較。0.3秒がちょうどいい

0.3 秒の delay が「意図せずカーソルが通過した」と「本当に確認したい」を区別するのに最適です。

現れるときと消えるときのアニメーションは「対称」に設計します。

消え方が「突然消える」だとバグのように見えます。現れるときより少し速く（短い duration で）消えると、「素早く片付いた」感が出てすっきりします。

目安：現れるアニメーション時間の 60〜70% で消えるアニメーションを設計します。