UIアニメーション辞典を公開します！

株式会社デパートでは、アウトプットにおいてクオリティを求められる場所によりスキルと時間を集中できるよう、エンジニア・デザイナー間の制作効率化を行っています。今回はその取り組みの一つである、よくあるUIアニメーションを一つにまとめた【アニメーション辞典】をご紹介いたします。

UIアニメーション辞典

下記よりご利用いただけます。

https://depart-develop.github.io/animation-book/

UIアニメーション辞典とは？

ボタンやハンバーガーメニュー、アコーディオン等、よくあるUIのアニメーションをデザイナーさんが選定しやすくコーダーが導入しやすくまとめたものです。

サイト内から動きが確認できるようになっていて、ソースコードの確認も簡単にできるようになっています。

UIコンポーネントの管理・テストをすることが出来るオープンソースツールのStorybookを用いて作成されています。

制作に至った経緯

日々業務をこなす中で同じような動きを実装することが多く、毎回最初から作成する時間がもったいないと感じるようになったからです。

アニメーションにこだわることで企業のブランディング強化を目指しているようなサイトはユニークな実装が必要なことが多いのですが、サイト制作には考えなくてはならない要件がたくさんあるため、よくあるアニメーションを設定するのに時間をかけるのは得策ではありません。

いかに効率よくUIアニメーションを実装するかを考えた結果、事前に参考になる動きをたくさん集めたサイトがあるといいと思い、今回UIアニメーション辞典を制作するに至りました。

UIアニメーション辞典を作る、使うメリット

アニメーション辞典を作ることで、大きく３つのメリットがあると考えました。

• デザイナー、コーダー共に時間をかけずにアニメーションを実装できるので効率化はもちろんのこと、アニメーション辞典を使うことでどのコーダーでも一定のクオリティ、一定のスピードで動きがつけられるようになる。

• ブログ記事で単発的に紹介されることはあってもクリック、スクロール等、挙動ごとに網羅的にまとまっているサイトは意外と少ないため、UIごとに参考サイトを探す手間が省ける。

• 事前にデバッグを行っているのでどのブラウザでも安心して使うことができる。

デザイナー側のメリット

• デザイナーが毎回参考UIを探しに行く時間を省ける。

• デザイナーXDで動きの参考を作成する手間が省ける。

• お客さんへの提案資料に含めることができる。

コーダー側のメリット

• 実装する手間が省ける。

• 繰り返し使っていくことで理解が深まると少し違った動きへのカスタマイズもしやすくなる。

• 若手に関してはそれを使うこと自体が気づきにつながる。

• 社内で作った挙動を後から追加することもできるので、他の人が作成したUIを使いまわすことができ、提案の幅も広がる。

• マンネリ化しつつある動きに対して、UI辞典を参考にすることで面白味を持たせることができる。

• 突然の依頼にも対応しやすい。

クライアント側のメリット

• 事前に動きを確認できるのでサイト制作後の動きがイメージしやすい。

• イメージに合わない動きを提案されたとしても他のバリエーションが確認できるためイメージを伝えやすい。

簡単な使い方の説明

左メニューから、クリックした時の挙動、ホバーした時の挙動等でUIがカテゴライズされているので、クリックしてみて挙動を確認してみてください。

例えば、ボタンのホバーのバリエーションを確認したい時は、Hover→Buttonで表示されたリストの中で各項目を選択すると右の表示エリアにボタンが出てくるので、そのボタンを実際にホバーすることで挙動を確かめることができます。

各挙動を見比べたいときは、Docsをクリックすると一覧で表示されます。

実装する際は、画面の表示エリア下に、表示されている要素のHTMLとSCSSが記載されているので、これを自分の案件にコピペして使ってください。

細かい箇所はデザインに合わせて調整、追加したい要素があれば追加して使うようにしてください。

今後の展望

バリエーションがまだまだ少ないので随時追加予定です。

現状だと基本的なUIのCSSアニメーションのみとなっていますが、ブランディングサイトやインフォグラフィックにも使えそうな、GSAP等を用いた複雑なアニメーションも追加していきたいと考えています。