travel-hospitality

旅行・ホスピタリティのアニメーション原則

ディズニーの12の原則を活用して、旅への憧れをかき立て、予約への安心感を高める、心躍る魅力的な体験を作りましょう。

12の原則の応用

1. つぶしと伸ばし

• 予約ボタン：軽くつぶれる、心地よい押下感
• 地図ピン：場所に置いたときに跳ねる
• 飛行機アイコン：飛行アニメーション中にさりげなく伸びる

2. 予備動作

• 検索ボタン：結果を表示する前に期待感を高める
• 予約確認：成功を知らせる前に印象的な間を設ける
• 目的地の表示：期待を高める瞬間を演出する

3. 演出

• 目的地の画像：画面いっぱいに広がるヒーロー写真
• 料金表示：明確に示しつつ、体験より控えめにする
• 予約フロー：現在のステップを明確に目立たせる

4. ストレート・アヘッドとポーズ・トゥ・ポーズ

• 地図の探索：滑らかにパン、ズームする（ストレート・アヘッド）
• 予約プロセス：ステップを明確に順番に進める（ポーズ・トゥ・ポーズ）
• 旅程ビルダー：アクティビティを順番に計画する

5. 後追いとオーバーラッピングアクション

• 検索結果：カードを少しずつずらしながら連続して表示する
• 画像ギャラリー：写真が余韻を残して収まる
• 地図マーカー：アイコンが着地した後に情報ポップアップを表示する

6. スローインとスローアウト

• 夢のようなトランジション：滑らかでゆったりとしたペース
• 画像カルーセル：優雅なスライドトランジション
• モーダルの表示：心地よい350～400ms

7. 弧

• 飛行経路：地図上に曲線を描く
• 写真のスワイプ：自然な弧を描くジェスチャー
• 目的地のトランジション：場所から場所へ弧を描く

8. サブアクション

• 予約成功：飛行機が離陸し、紙吹雪が舞う
• 料金の更新：お得なプランの表示時にきらめく
• 読み込み状態：場所をテーマにしたアニメーション

9. タイミング

• 憧れをかき立てる瞬間：夢のような雰囲気を出すために、ゆっくりとした400～500ms
• 予約アクション：確かな印象を与える250～350ms
• 検索フィードバック：素早い150ms

10. 誇張

• お祝いの瞬間：予約確定には華やかな演出を添える
• 夢の目的地：憧れをいっそう高める
• お得なプラン：節約額を印象的に強調する

11. 立体感のある描画

• 写真を第一に：目を見張るような目的地の画像
• 地図の正確さ：正確な地理的表現
• アイコンの一貫性：統一感のある旅行アイコン

12. 魅力

• インスピレーションを与える：動きによって旅への憧れをかき立てる
• プレミアムなサービス感：高級ブランドを連想させる
• 文化への配慮：敬意ある表現を心がける

業界標準のタイミング

アクション	時間	イージング
画像のトランジション	400ms	ease-in-out
地図のアニメーション	500ms	ease-out
予約ステップ	300ms	ease-in-out
検索結果	250ms	ease-out
確認	600ms	custom-bounce

重要な原則

旅行とは、夢と体験です。アニメーションは、ユーザーが実際に旅立つ前に、心の中で旅へ連れ出すものであるべきです。予約への安心感を保ちながら、憧れをかき立てる瞬間を作りましょう。