ボタンは何を望む？
招く、安心させる、挨拶する、祝う、終える、という動詞から始めます。それを支える動きをひとつ選びましょう。近づく、傾く、落ち着く、一度回る。行動の意味を強める個性にします。
試してみよう： 好奇心と待ちきれないを同じ時間で比べます。後者は遠くまで伸びます。小さな招待に感じる強さまで下げましょう。
近づき、ためらい、
息を整え、喜ぶ。
小さな動きで気持ちが変わる。
同じ形、違う個性。
近くで動かす · 押す · 比べる感情の編集01 / 好奇心
静かな基準
好奇心
ボタンの周囲で動かして反応を感じましょう。クリック、タップ、またはTabで選んでEnterかSpaceで操作できます。
準備できました。動きを試すボタンの遊び場です。
磁石のような引き寄せ
次を知りたいように、ポインターのほうへ近づきます。
距離 × 強さ → 引き寄せ「押して」を伝える12の方法。
ボタンを試し、気持ちを編集しよう。考え方 / 反応で感情を伝える
形はそのまま。
その、 気持ちが、 変わる。
人は動きに意図を読みます。近づく形には関心、遅い回転には恥ずかしさ、弾む戻りには自信を感じます。距離、時間、入力への反応だけで角丸のボタンに個性を与えられます。
編集できる動きの実験です。動く見た目の下には固定した標準のボタンを置き、個性と押しやすさを両立します。
好奇心に合う場面：遊び心のある作品集への招待。
時間が動きの口調を決める。
同じ距離でもゆったり、急ぎに見えます。短い時間で早く到着し、行き過ぎて戻ると少し不安定に感じます。決断の明確な終わりと、落ち着かない反応の戻りを比べます。
反応 = 予備動作 → 動作 → 静止
試してみよう： 落ち着かない反応を160msと900msで試し、戻りが読める最短時間を探します。表示は基準時間で、平静と決断は70%、大喜びの一回転は170%を使います。
動く表面、固定した標的。
大きめの標準ボタンの中に見た目の丸い形を置きます。子要素だけ動かし、押せる範囲とフォーカス枠は固定します。子はポインターイベントを無視し、範囲内のどこでも押せます。
中心からのずれを−1〜1に正規化して制限します。決断では段階的な値に丸めます。タッチとキーボードでもホバーなしで同じ個性の反応を再生します。
ずれ = clamp((ポインター − 中心) / 半分の寸法, −1, 1)
動き = ずれ × 距離 × 強さ
動き = ずれ × 距離 × 強さ
すべての反応に終わりを。
連続入力で同じ属性の動きが重なるのを防ぐため、前の反応をキャンセルしてから次を再生します。古い処理があとから結果を伝えないよう、12のボタンすべてでこの規則を使います。
散らす文字は見た目だけにし、標準ボタンの読み上げ名を保ちます。静止の反応は言葉で押下を伝えます。OSの動きを減らす設定では自動でこちらを使います。
新しい押下 → 前を中止 → 最新を再生 → 結果を伝える
試してみよう： 奔放を素早く3回押し、文字が戻ることを確かめます。「動かない反応」をオンにしても結果が伝わるか試しましょう。
小さな課題 / 意図を設計する
ひとつの行動。
ふたつの、 個性。
「どうぞ」と書いた招待をつくります。言葉と素材は固定し、反応だけ変えましょう。
- 平静：340ms、強さ40%。
- 好奇心：340ms、強さ80%。
- キーボードと静止の反応でも比較。
- 場面に合うものを選び、理由を説明します。
実験を保存
ページをダウンロードしてブラウザーで開きます。ギャラリー、編集、図解、設定はオフラインで使えます。気分の定義、キーフレーム、見た目を変えて別の個性を探しましょう。
動くサンプルをダウンロード ↓動きの定義をダウンロード ↗現在の動きの設定 +
Curious · 100% strength · 340 ms
設定ファイルは編集状態を記録します。実装はHTMLにあり、設定を編集して状態を復元できます。