2014/12

1. クックパッドで学ぶ
デザイニングWEBインターフェース
第５原則
トランジションを利用しよう

2. トランジションを使う理由
人は動くものに対して無意識のうちに注意を向けてしまう。
その法則をうまく利用すればインターフェースにとって強力
な武器になる。

3. トランジションの定義
ここではトランジションを
「一定の時間にわたって生じる特殊効果」と定義する。

4. トランジションの役割
トランジションは、インターフェース上で起きる動きを
なめらかにする潤滑剤の役目を果たす。
ユーザに何が起きたかを明確に伝え、ユーザの行動を促す。

5. トランジション効果から見た
トランジションパターン

6. ・対になって使われる２つのパターン
・明るくするとそこに注目が集まる。
・ディスプレイの一部だけ輝度を上げる方法はないので、
ウィンドウ全体の明度を下げ、インターフェースの一部
だけを通常の明度で表示しておくのが典型的な実現方法。
明度/濃度の増減

7. 例：ライトボックス

8. 例：操作準備中の状態

9. ・ページ内にインレイを表示する際によく使われる方法
・明度／濃度の増減より注目を集めやすい（動きの変化は色の
変化よりも印象的なため）
・オーバーレイとの違いは、ボタンとの結びつきや、どのコン
テンツに適用されるのかがはっきりする。インライン方式なの
でコンテキストが保たれ、隠されてしまうことがなくなる。
展開／折りたたみ

10. 例：アコーディオン

11. トランジションの目的から見た
トランジションパターン

12. ・ユーザを引きつけて喜ばせる
・ユーザの行動に対して報酬を与える
エンゲージメントを高める

13. ・ストーリーの魅力を高め、唐突な飛躍を埋め合わ
せ、アクションをより具体的で信用できるものにす
ること
・各トランジションには役割があって、その役割を
理解して使用する
コミュニケーション

14. コミュニケーション目的の
トランジションをさらに分類する

15. No1.
コンテキストを維持したまま
ビューを切り換える

16. 例：カルーセル

17. 例：アコーディオン

18. 例：チェックボックス

19. No2.
結果を直ちに説明する

20. 例：数値の増減

21. No3.
オブジェクト間の関係を示す

22. 例：ズーム（flickrから）

23. No4.
注目を集める

24. 例：セキュアアピール

25. No5.
体感性能を向上させる

26. 例：ローディング

27. No6.
仮想空間の錯覚を生み出す

28. 例：Mission Control（MAC OS X）