ディズニーアニメーションの基本原則を参考にボタンのアニメーションを作る
コーディングデザインのフロントエンドHTML&CSSデベロッパー森です。
ディズニーが作ったTwelve basic principles of animation – Wikipedia（アニメーションの12の原則）をWebのUIデザインに応用する記事「ディズニー直伝！Webデザインでアニメーションの基本原理を応用する方法」を読んでとてもおもしろかったので、自分でも原則を参考にしながらボタンのアニメーションを作ってみました。
森のアニメーション遍歴
森は20代の頃、人形アニメーションを作っていた時があり、アニメーションを作るのも見るのも好きです。
ナイトメア・ビフォア・クリスマス、ウォレスとグルミット、チェブラーシカ、おこんじょうるり、砂の城、ぼくらとあそぼう…大きな影響を受けました。
作った作品の一部はYouTubeにあります。ご興味のある方はMOONGLOWS animationsをご覧ください。
見る方では最近はスター・ウォーズのクローン・ウォーズ（今週末で最終シーズンを見終わってしまう…）。
アニメーションの12の原則
そういえばスター・ウォーズはディズニーの所有ですね。
ディズニーは歴史的にアニメーション制作の先駆者であることは間違いなく、様々なアニメーションらしい表現方法を作りました。詳しくはTwelve basic principles of animation – Wikipediaを見ていただければと思いますが、下記の12個があります。
1.1 ぐしゃっとつぶれる、びよーんと伸びる（Squash and stretch）
Twelve basic principles of animation – Wikipedia（日本語訳は森）
1.2 動きを予期させる動作（Anticipation）
1.3 配置・照明・カメラアングルなどで重要なものを明確にする（Staging）
1.4 最初から最後まで続けて絵を書く方法、キーフレームを書いたあとでキーフレーム間を埋める絵を書く方法（Straight ahead action and pose to pose）
1.5 主な動作が終わった後の動きと、体の部位ごとに速度が異なる動き（Follow through and overlapping action）
1.6 ゆっくり始まり、ゆっくり終わる（Slow in and slow out）
1.7 曲線を描く動き（Arc）
1.8 主な動作に付随する動作（Secondary action）
1.9 動作のフレーム数（Timing）
1.10 誇張（Exaggeration）
1.11 膨らみや重みを描画（Solid drawing）
1.12 魅力（Appeal）
これらはアニメーションを現実的に見せるための物理的な見せ方、そして娯楽として見る人を楽しませる演出をまとめた原則と言えます。
現実に即した物理的な見せ方で終わらず、物理をベースにしてそこから逸脱して楽しませるのがアニメーションの自由さ・楽しさであるように思います。
ボタンのアニメーションに応用してみる
まず普通のボタンを準備します。
ボタン内の文字は拡大・縮小したり、文字色を変えたりすると読みづらくなるので、最初から背景をafter疑似要素で作っておきます。
最初の例ではまずマウスオーバー時とクリック時に背景色を変更するのみです。
色の設定を一つ一つするのが面倒なのでfilterプロパティのbrightness関数を使いました。
次にアニメーションの12の原則を少し入れてみます。
CSSでアニメーションを指せるときにまず使うのはtransitionプロパティかanimationプロパティです。
今回「1.6 ゆっくり始まり、ゆっくり終わる」「1.9 動作のフレーム数」をtransitionプロパティで入れておきます。
CSSアニメーションはtransitionプロパティでもanimationプロパティでも「1.4 キーフレームを書いたあとでキーフレーム間を埋める絵を書く方法」になります。パカッと色が変わる感じがなくなりますね。
transformプロパティを使って「1.1 ぐしゃっとつぶれる、びよーんと伸びる」を入れると動きの面白さが跳ね上がります。
背景にdrop-shadowで影を入れ、ボタン全体をtransformプロパティのtranslateY関数で少し持ち上げる動きを入れることで「1.8 主な動作に付随する動作」を加えます。
けっこうコテコテ感が出てきましたね。このへんで。
まとめ
こんなかんじでUIデザインを考えるときにアニメーションの12の原則を意識するとステキなものを思いつくかもしれないですね〜☺️
UIデザインだと楽しませるというよりも、使って心地よいところに持っていくことがほとんどだと思うので、やりすぎ感がでないようにコミュニケーションが必要ですね。
コーディングデザインがお役にたてそうなことはございますでしょうか。
お問い合わせいただければ幸いです。