会社案内資料
UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。
「ここの装飾、なんかこう……横からシュッと出てきて、フワッと表示される感じで」
デザイナーやエンジニアとして働いていると、このような擬音語や身振り手振りでアニメーションの指示を受けることがありませんか？
アニメーションの指示は齟齬が起きやすく、何度も手戻りが発生したり、意図したものとは違うものが出来上がってしまったりします。
今回は、こうしたアニメーションに関する認識違いを減らすために何ができるか考えてみます。
アニメーションの指示は難しい
そもそも、頭の中のイメージを言葉だけで人に伝えるのは難しいものです。
「言葉だけでイラストや絵画を他人に伝えてみて」と言われると、結構難しいのではないでしょうか？
アニメーションの場合はそこからさらに動きがつくわけです。
動きは、「何が」「どのように」「どれくらいの速さで」変化するのか、といった複数の要素で構成されています。
これらの要素を細かく伝えていく必要があり、1つでも要素が違っていると「なんか違う……」となってしまいます。
実際に簡単なアニメーションを見せたり、作ってしまう
まず、実際に動くものを見せればそれが1番確実です。
参考となるアニメーションイメージがあれば、それを共有しましょう。
また、FigmaやPremiere Proなどのデザインツール・動画編集ツールを作って、簡単な動きを作ってしまうのも1つの手です。
実際に動いているものができるので、それなら認識齟齬が生まれる可能性は低くなります。
動きを分解して伝える「3つの要素」
どうしても言葉で説明する必要がある場合、アニメーションの指示を具体的で分かりやすいものにするためには、下記の3つの要素に分解して伝える必要があります。
1. 対象（何が）
まず、「何が」動くのかを明確にします。
「ボタン」「ロゴ」「背景画像」など、アニメーションを適用する対象を具体的に指定します。
2. 変化（どのように）
次に、その対象が「どのように」変化するのかを説明します。
これは、アニメーションの開始状態と終了状態を定義することです。
- 位置：画面の左外から、中央まで移動する
- 透明度：透明な状態（0%）から、完全に見える状態（100%）に変化する（フェードイン）
- サイズ：小さい状態から、元の大きさに拡大する
- 回転：0度から90度まで回転する
「横からシュッと」であれば、「画面の左外から所定の位置まで移動する」と言い換えられます。
3. 時間と速さ（どれくらいの速さで）
最後に、その変化が「どれくらいの時間と速さで」起きるのかを定義します。これがアニメーションの「感じ」を決める最も重要な要素です。
- 時間：そのアニメーションが完了するまでにかかる時間です。「0.5秒かけて」「2秒かけてゆっくり」のように指定します。
- 緩急（Easing）：アニメーションの速度変化の付け方です。擬音語の表現に最も近い部分です。
- イーズアウト：動きの終わり際にだんだんゆっくりになる。UIアニメーションで最も一般的に使われ、スムーズで自然な印象を与えます。
- イーズイン：動き始めがゆっくりで、だんだん速くなる。加速感を表現できます。
- イーズインアウト：動き始めと終わりがゆっくりになる。より丁寧な印象を与えます。
「シュッと」という素早い動きであれば、「0.3秒かけて、終わり際に減速する（イーズアウト）」のように表現できます。
まとめ
アニメーションを伝えるときに大切なのは、感覚的な擬音語を、具体的な「対象」「変化」「時間と速さ」という要素に分解して伝えることです。
この考え方は、指示を出す側だけでなく、受ける側にも役立ちます。
もし曖昧な指示を受けたら、質問しておくことで認識のズレを防ぎ、手戻りを減らすことができます。
もちろん、人によっては「そういう細かい部分は任せる」となる場合があります。
その場合は自分で考えて心地よいアニメーションにする必要がありますが、相手の頭の中に明確なイメージがありそうだなと思った場合には今回の考え方が役に立ちます。
次にアニメーションについて社内で話す機会があれば、この3つの要素を少しだけ意識してみてはいかがでしょうか。
UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。
興味のある方は、カジュアル面談しますので気軽にお問い合わせください！
