#153
インタラクション・アニメーション
#153すてーじんぐ
ステージング (演出)
別名・表記:Staging演出
UIXHERO Definition
「舞台演出」。観客（ユーザー）が見るべき場所を、照明や配置で誘導すること。
概要
演劇の舞台演出に由来する。 「今、スクリーン上で何が起きているか」を、観客が瞬時に、完全に理解できるようにプレゼンテーションすること。 シルエットだけでも何をしているか分かるようにポーズを取らせる、といった工夫もステージングに含まれる。
UXでの活用
- ノイズの削減: ユーザーがタスクに集中できるように、不要な要素を一時的に隠したり、目立たなくしたりする。
- 視線のコントロール: 画面の明るさ、色、動きを使って、ユーザーの視線を意図した順序で移動させる（Visual Hierarchyの動的な適用）。
💡 使いどころ
画面内に情報が多く、ユーザーが何を見ていいか迷いそうな時。重要な警告や通知を目立たせたい時。
⚠️ 注意点・誤用
全てを目立たせようとすると、何も目立たなくなる。背景を暗くしてポップアップを際立たせる（Scrim）などは典型的なステージングだが、多用すると鬱陶しい。※DevOps用語の「ステージング環境」とは別物。
具体例
- モーダルダイアログが表示される際、背景が暗くなることで、ダイアログにだけ集中させる
- エラーメッセージが表示される際、他の入力フォームが一時的にグレーアウトする
出典・参考文献:
- Thomas, F., & Johnston, O. (1981). The Illusion of Life: Disney Animation. Disney Editions.
- Norman, D. A. (2013). The design of everyday things (Revised and expanded edition). Basic Books.
関連する解説記事
関連する記事詳細が見つかりませんでした。