interfaces-that-feel

心地よさを感じるインターフェース

インターフェースを評価するとき、問いは一つです。使う人の気持ちを考えた人が作ったと感じられるでしょうか？

技術的な正しさは最低限です。目指すのは感情の伝わりやすさ、つまり、使う人を一人の人間として理解しているプロダクトです。

何をするか

デザインの意図を、感じられる体験に変換します。まず、使う人の状態（実行しているタスクではなく）から始め、その感情を表す言葉を物理的な世界から見つけ、インターフェースの振る舞いの特性へと置き換えます。

変換のプロセス

1. 感じている状態に名前をつける — この瞬間にたどり着いた人は、実際にどのような体験をしているでしょうか？不安を感じながら待っている。エラーから立ち直ろうとしている。小さな成功を喜んでいる。選択肢の多さに圧倒されている。

2. 物理的な類似を見つける — 物理的な世界で、似た性質を持つものは何でしょうか？柔らかな表面は衝撃を吸収します。息を吐く前に、息を静かに止めること。ドアがゆっくりと閉まること。こうした性質が、振る舞いを表す語彙になります。

3. 振る舞いの特性を抽出する — 物理的な類似から、重さ、抵抗、速度、回復の軌跡、リズムを抽出します。

4. インターフェースに適用する — どのレイヤーに反映するでしょうか？イージングカーブ、遅延、文言のトーン、色温度、間隔、アニメーションの時間などです。

感情に合わせたタイミングの原則

• 情報の重さ：重大な知らせはゆっくり届き、良い知らせはすぐに届いてもかまいません
• 回復のための間：エラーの後は、次のプロンプトを表示するまで300～600ms待ち、回復を急かさないでください
• システムエラーの責任：システムの障害について、ユーザーに責任を感じさせてはいけません。文言はシステム側に責任があることを明確にしてください
• 成功を祝う：小さな成功にも反応しましょう。何事もなかったかのように受け流してはいけません
• 読み込み時の雰囲気：読み込み状態は中立ではありません。次に何が起こるかへの期待を形づくるため、これから起きることに合わせてください

状態ごとの文言のトーン

状態	トーン
読み込み中	今の状況を落ち着いて伝えます — 「データを取得しています」であり、「読み込み中...」ではありません
空の状態	次の行動を促します — ここに何が表示されるかを伝えます
エラー（ユーザー）	明確で、次の行動を示し、責めない表現にします — 具体的な次の手順を一つ示します
エラー（システム）	システム側の責任を認め、簡潔に謝罪し、先に進む方法を提示します
成功	温かく簡潔に伝えます — 成功を認めつつ、大げさにしません
オンボーディング	チュートリアルではなく、状況に沿った説明にします — アプリの使い方ではなく、できることを伝えます

感情を伝える動き

イージングは意図を伝えます。イーズインは重さや勢いを表します。イーズアウトは、柔らかなものが着地するような自然な減速を表します。リニアは機械的なので、人の感情に関わる動きには使わないでください。

ばねの物理特性は、反応のよさを伝えます。剛性と減衰は感情に関わる選択です。硬いばねは素早く自信に満ちた印象を与え、柔らかいばねは遊び心や寛容さを感じさせます。

時間の目安は、UI の反応には150～300ms、意味を伴う遷移には400～600msです。タスクに対するユーザーの忍耐を超える長さのアニメーションは、決して使わないでください。

レビューチェックリスト

各デザインレビューの前後に確認してください：

• この状態になったとき、使う人はどのような気持ちでしょうか？
• インターフェースはその気持ちに応えていますか、それとも無視していますか？
• 文言は人が書いたように聞こえますか？
• 動きは意図を伝えていますか、それとも時間を埋めているだけですか？
• 色や画像をすべて取り除いても、感情を伝える力は残りますか？

参考にする美学

How We Feel、Headspace、Gentler Streak、Amie、Arc Browser — 感情に合わせたタイミング、文言のトーン、動きが装飾ではなく、体験を形づくっているプロダクトです。

ベストプラクティス

• タスクではなく、使う人の感じている状態から始める
• 文言をインタラクションデザインとして扱う — すべての言葉が一つの選択です
• 動きを加える前に減らす — すべてのアニメーションには理由が必要です
• 視差効果を減らす設定を有効にしてテストする
• 摩擦がないことは温かさではありません — 温かさは受け身ではなく、積極的なものです