Amebaのデザインシステム『Spindle』のアニメーションシステムの解説記事が公開。一貫性のあるAmebaらしいアニメーション制作の仕組みが語られる

Amebaのデザインシステム『Spindle』のアニメーションシステムの解説記事が公開。一貫性のあるAmebaらしいアニメーション制作の仕組みが語られる

2023.05.29
ニュース
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

この記事の3行まとめ

  • Amebaのデザインシステム『Spindle』のアニメーションシステムの記事が公開
  • 親しみやすさとデザイナー間の一貫性を両立させるシステムを設計
  • アニメーションの設定項目とそのバリエーションを定義、実装サンプルのパターンを作成し、デザイナー間の共通言語とした

CyberAgent Developers Blogにて『一貫性のある自然さを生み出す、「Ameba」らしさを加速させるアニメーションシステム』という記事が公開されました。

https://twitter.com/AmebaA11Y/status/1661569699417841665

Spindle」とは、2020年から制作が開始された「Ameba」のデザインシステムで、「Amebaらしさ」といったブランドの定義からデザイン原則、そして配色・タイポグラフィといったスタイルやボタンなどのコンポーネントといった具体的なデザインまでを定めたものです

今回の記事内では「Spindle」に、自然で親しみやすいアニメーションの実現と同時に、どのUIデザイナーが実装しても一貫性のあるアニメーションが作れるようなシステム作成の裏側が語られています。

Amebaのブランドコンセプト(画像はCyberAgent Developers Blogより引用)

「Spindle」のデザインリードである本田 雅人氏は、「Amebaらしさ」について考えた時、UIの自己帰属感(※)がAmebaのブランドコンセプトの1つである「親しみやすい」に繋がり、UIのアニメーションが大きな役割を担うのではないかと語っています。
※ユーザーの操作と画面上の情報がシンクロするほど、操作に対して実感を得られるという考え方

本田氏が「Spindle」上にUIアニメーションを実装するAnimation Tokenシステムを設計をするにあたり、親しみやすい印象を与えると同時に、UIデザイナーによらず一貫性のあるデザインが作れるようシステムにすることを目指したそうです。

具体的には、AnimationのPropertyMotion Typeのパターンを定義し、これをデザイナー間の共通言語(Token)とすることで、デザイナーの感性に依存しないシステムを作ることができました。

Property|2種類のEasing(時間の経過に伴うパラメーターの変化率)と3種類のDuration(間隔)といったバリエーションを定義(画像はCyberAgent Developers Blogより引用)

Motion Type|Propertyを組み合わせたアニメーションのサンプルケース(画像はCyberAgent Developers Blogより引用)

さらに、汎用的で適用する箇所の多いようなアニメーションについて、どのMotion Typeを用いるのかユースケース別に定義したAnimation Typeも作成したそうです。

Animation Type|汎用的なUIアニメーションについては、どのMotion Typeを使うかユースケース別にサンプルを定義(画像はCyberAgent Developers Blogより引用)

ブログの最後には、これまで見てきたAnimation Tokenを利用した結果、意思決定コスト、コミュニケーションコストが著しく低減させつつ、アニメーションの適用事例を増やすことができたと述べられています。

詳細はCyberAgent Developers Blog『一貫性のある自然さを生み出す、「Ameba」らしさを加速させるアニメーションシステム』をご覧ください。

CyberAgent Developers Blog『一貫性のある自然さを生み出す、「Ameba」らしさを加速させるアニメーションシステム』

関連記事

Unity 6でシンプルな2Dゲーム開発を学べる入門書『たのしい2Dゲームの作り方 第3版』、翔泳社が7/24(木)に発売
2025.07.08
クロスシミュレーションツール「Havok Cloth」で衣服の貫通・破綻を防ぐセットアップ手法を解説。COYOTE 3DCG STUDIOの連載記事が更新
2025.07.08
『GGST』開発事例など5本のセミナーが、7/24(木)より期間限定で無料配信。ダイキン工業主催のCGクリエイター向けイベントに先駆けて
2025.07.07
ブラウザで気軽に『ぷよぷよ』風ゲームを開発できる。セガ公式「ぷよぷよプログラミング」解説書、技術評論社が8/8(金)に発売
2025.07.07
Blender初心者からスキルアップを図れる書籍『一歩先行く!Blenderモデリング 実践テクニック』、C&R研究所が7/12(土)に発売
2025.07.07
8/3(日)開催のインディーゲーム展示会「東京ゲームダンジョン9」、入場チケット販売開始。318団体の出展情報も発表
2025.07.04

注目記事ランキング

2025.07.01 - 2025.07.08
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

VIEW MORE

今日の用語

ライトマップ(Light Map)
ライトマップ 事前計算されたライティング情報を焼き付けたテクスチャ。リアルタイムのライティング計算は処理負荷が高いため、事前にライトマップにベイクする手法が取られることがある。負荷軽減につながる一方、実行中に光の向きを変更しにくいなどのデメリットも存在する。
VIEW MORE

Xで最新情報をチェック!