デザインエンジニアリング
優れたインターフェースは、ユーザーが一つ一つに気づくことのない多くの小さなディテールから成り立っています。以下の各ディテールには理由があります。その理由が当てはまる箇所に適用し、あなたが感銘を受けるインターフェースがなぜそのように感じられるのかを研究してください。
ジョブに適したスキルを選ぶ
- アニメーションを1つだけ作る:
animate - 動きの良し悪しを判断する必要がある差分:
review-animations - コードベースのモーションを監査・計画する:
improve-animations。動き始めるべき場所を見つける:find-animation-opportunities。モーションを削除する:remove-animations - 複数の要素が一緒に動く:
choreograph。フレームが落ちるアニメーション:animation-performance - Webでのドラッグ、スワイプ、シート:
gestures - 最悪のデータでストレステストするコンポーネント:
break-ui - Appleレベルのジェスチャー、スプリング、マテリアル、タイポグラフィ:
apple-design - スマートフォンで違和感のあるWebアプリ:
mobile-native - コンポーネントライブラリを選ぶ:
pick-ui-library - 1つのUIに対して複数の方向性を検討する:
prototype
このスキルはそれ以外の部分、つまりコンポーネントのポリッシュと、モーションを超えたUIレビューをカバーします。
ほとんどの問題を捉えるルール
- そもそもアニメーションさせるべきかどうかを判断する。1日に100回以上見られるアクション、またはキーボードから開始されるアクションにはアニメーションを付けない。
- プロパティ名を正確に指定する。決して
transition: allを使ってはならない。 - エントリーとイグジットには
ease-outまたは強いカスタムカーブ（例：cubic-bezier(0.23, 1, 0.32, 1)）を使用する。UIにease-inを使ってはならない。 - UIアニメーションは300ms未満に抑える。ドロップダウンは150～250ms、プレスフィードバックは100～160msとする。
- すべての押せる要素に
:active状態を設定する（例：transform: scale(0.97)）。 scale(0)からエントリーさせない。scale(0.95)とopacity: 0から開始する。- ポップオーバーはトリガーからのスケールで表示する（Base UIでは
transform-origin: var(--transform-origin)）。モーダルは中央に配置。 - ユーザーが途中で再度トリガーできるものには、キーフレームではなくトランジションを使用する。トランジションは現在の値から再ターゲットする。
transformとopacityのみをアニメーションさせる。Motionでは、xやyのショートハンドではなく、完全なtransform文字列を使用する。prefers-reduced-motionを尊重する（なしではなく、より穏やかなモーションにする）。ホバー効果は@media (hover: hover) and (pointer: fine)の中に配置する。
コードからフィーリングを判断できない場合は、その旨を明記する。アニメーションを通常の2～5倍の時間で再生するか、DevToolsでフレームごとに確認し、実際のデバイスでジェスチャーをテストし、翌日にもう一度見直す。
レビュー形式
UIレビューは、Before、After、Whyの列を持つ1つのMarkdownテーブルで、問題ごとに1行とする。「Before:」と「After:」を別々の行に書いてはならない。
| Before | After | Why |
|---|---|---|
transition: all 300ms | transition: transform 200ms ease-out | プロパティを明示する。allは意図しないものまでアニメーションさせる |
transform: scale(0) | transform: scale(0.95); opacity: 0 | 現実世界では何もないところから現れるものはない |
ボタンに :active 状態がない | :active に transform: scale(0.97) | プレスには瞬時のフィードバックが必要 |
参考資料
よくある症状（数字のガタつき、押しつぶされたアバター、「1 members」など）の簡単な修正については、最初に references/ui-cheatsheet.md を確認してください。
各ルールの理由とコード（アニメーション決定フレームワーク、スプリング、コンポーネントの原則（ツールチップ、クロスフェードよりもぼかし、@starting-style）、変形、クリップパスパターン（タブ、長押し削除、画像リビール、比較スライダー）、ドラッグとジェスチャー処理、パフォーマンス、アクセシビリティ、人々に愛されるコンポーネントの原則、スタガー、デバッグ、レビューチェックリスト）については、references/craft.md をお読みください。