![Page 1: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/1.jpg)
クックパッドで学ぶ デザイニングWEBインターフェース
第5原則
トランジションを利用しよう
![Page 2: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/2.jpg)
トランジションを使う理由人は動くものに対して無意識のうちに注意を向けてしまう。 その法則をうまく利用すればインターフェースにとって強力な武器になる。
![Page 3: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/3.jpg)
トランジションの定義ここではトランジションを 「一定の時間にわたって生じる特殊効果」と定義する。
![Page 4: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/4.jpg)
トランジションの役割トランジションは、インターフェース上で起きる動きを なめらかにする潤滑剤の役目を果たす。 ユーザに何が起きたかを明確に伝え、ユーザの行動を促す。
![Page 5: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/5.jpg)
トランジション効果から見た トランジションパターン
![Page 6: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/6.jpg)
・対になって使われる2つのパターン ・明るくするとそこに注目が集まる。 ・ディスプレイの一部だけ輝度を上げる方法はないので、ウィンドウ全体の明度を下げ、インターフェースの一部だけを通常の明度で表示しておくのが典型的な実現方法。
明度/濃度の増減
![Page 7: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/7.jpg)
例:ライトボックス
![Page 8: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/8.jpg)
例:操作準備中の状態
![Page 9: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/9.jpg)
・ページ内にインレイを表示する際によく使われる方法 ・明度/濃度の増減より注目を集めやすい(動きの変化は色の変化よりも印象的なため) ・オーバーレイとの違いは、ボタンとの結びつきや、どのコンテンツに適用されるのかがはっきりする。インライン方式なのでコンテキストが保たれ、隠されてしまうことがなくなる。
展開/折りたたみ
![Page 10: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/10.jpg)
例:アコーディオン
![Page 11: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/11.jpg)
トランジションの目的から見た トランジションパターン
![Page 12: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/12.jpg)
・ユーザを引きつけて喜ばせる ・ユーザの行動に対して報酬を与える
エンゲージメントを高める
![Page 13: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/13.jpg)
・ストーリーの魅力を高め、唐突な飛躍を埋め合わせ、アクションをより具体的で信用できるものにすること ・各トランジションには役割があって、その役割を理解して使用する
コミュニケーション
![Page 14: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/14.jpg)
コミュニケーション目的の トランジションをさらに分類する
![Page 15: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/15.jpg)
No1.
コンテキストを維持したまま ビューを切り換える
![Page 16: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/16.jpg)
例:カルーセル
![Page 17: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/17.jpg)
例:アコーディオン
![Page 18: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/18.jpg)
例:チェックボックス
![Page 19: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/19.jpg)
No2.
結果を直ちに説明する
![Page 20: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/20.jpg)
例:数値の増減
![Page 21: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/21.jpg)
No3.
オブジェクト間の関係を示す
![Page 22: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/22.jpg)
例:ズーム(flickrから)
![Page 23: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/23.jpg)
No4.
注目を集める
![Page 24: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/24.jpg)
例:セキュアアピール
![Page 25: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/25.jpg)
No5.
体感性能を向上させる
![Page 26: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/26.jpg)
例:ローディング
![Page 27: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/27.jpg)
No6.
仮想空間の錯覚を生み出す
![Page 28: クックパッドで学ぶデザイニングWEBインターフェース : 第5原則 トランジションを利用しよう](https://reader034.vdocuments.net/reader034/viewer/2022042615/55af7f5b1a28ab26368b469e/html5/thumbnails/28.jpg)
例:Mission Control(MAC OS X)