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

2023.05.29
ニュース
この記事をシェア!
twitter facebook line B!
twitter facebook line B!

この記事の3行まとめ

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

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

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上でFBXからインポートした3Dモデルを、参照を残したままPrefab化する方法を紹介。「COYOTE 3DCG STUDIO」の技術ブログで解説記事が公開
2024.03.04
Adobe、USDファイルをFBXやglTFなど5つのフォーマットに変換できるプラグイン群「USD File Format Plugins」をオープンソースで公開
2024.03.01
SDFを活用した低負荷なアニメ調のシェーディングをUE5で実装。alwei氏が解説記事を公開
2024.03.01
PLATEAU、3D都市モデルを使った位置情報共有ゲームをつくるチュートリアル記事を公開。ゲームの制作から、サーバーの準備、アプリの配信まで詳細に解説
2024.03.01
「東京ゲームショウ2024」概要が発表。インディーゲームコーナーに無料でリアル出展できる「Selected Indie 80」のエントリーも開始
2024.03.01
デスク上の収納スペースを拡張。有孔ボード付き、モニターアームも設置できる「デスクEXラック」、サンコーが発売
2024.02.29

注目記事ランキング

2024.02.26 - 2024.03.04
1
『フォートナイト』で動く本格的なゲームが作れるツール「UEFN」とは?従来のクリエイティブモードから進化したポイントを一挙紹介!
2
【CHALLENGE1】「クリエイター ポータル」を使って、UEFNで作成した島を世界中に公開する
3
【2022年5月版】今から始めるフォートナイトの「クリエイティブ」モードープレイ開始から基本的な操作方法まで解説
4
UEFNで使えるプログラミング言語「Verse」のノウハウが集結。『UEFN.Tokyo 勉強会 03 Verse Night』レポート
5
フォートナイトとUEFNがv28.30にアップデート。「NPCスポナー」が、スポーン・撃破時のエフェクトや移動速度のカスタマイズに対応
6
フォートナイト クリエイティブとUEFNで使える仕掛け一覧
7
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.1「アイテム系」
8
【STEP2】UEFNの基本的な使い方を覚えよう
9
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.5「島の設定」
10
【CHALLENGE2-1】フレンドと一緒にゲームを作ろう――UEFNプロジェクトをチームメンバーとリアルタイムで共同編集する
11
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part1
12
まるで『マイクラ』?ボクセル地形を生み出す無料アセット「VoxelPlugin Free」で”地形を掘ったり積み重ねたり”して遊んでみよう
13
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.4「ゲームシステム系」
14
【STEP1】「UEFN」を入手しよう
15
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.2「ユーティリティ系」
16
フルカラー書籍「UEFN(Unreal Editor For Fortnite)でゲームづくりを始めよう!」、ついに本日発売!全国書店で好評発売中!
17
NIKEのAir Maxをテーマにしたフォートナイトの島『Airphoria』、制作に関するチュートリアルが公開
18
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part1
19
【CHALLENGE3】UEFNの機能「ランドスケープ」を使ってオリジナルの地形を作る
20
『フォートナイト』で建築ビジュアライゼーション!?UEFNでオリジナルの世界観をどう作り上げたか、その手法を解説【UNREAL FEST 2023 TOKYO】
21
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part2
22
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.3「プレイヤー系」
23
【STEP6-1】「オリジナルキャラクターを登場させよう」――Fabでアセットをダウンロードしよう
24
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.6「チーム・対戦系」Part1
25
フォートナイトとUEFNがv26.30にアップデート。ロビー画面が一新され、クリエイターが島ごとにロビー背景を自由にカスタムできるように
26
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part2
27
【STEP5-1】スタート時のカウントダウンを作る
28
「UEFN」って実際どうなの? 編集部が3時間で「みんなで遊べるアクションゲーム(?)」を作ってみた
29
【STEP4-1】コース外に出たらデスする仕組みを作る
30
【STEP4-2】リスポーンとチェックポイントの仕組みを作る
VIEW MORE

イベントカレンダー

VIEW MORE

今日の用語

ローパスフィルター(Low-Path Filter)
ローパスフィルター
  1. 電気信号のうち、指定した周波数(カットオフ周波数)以下の信号を通し、それより上を大きく低減させるフィルター。
  2. ゲーム開発において、基本的にはサウンド用語として用いられる。例として、特定のセリフをローパスフィルターによってくぐもった音に加工することで、隣の部屋や遮蔽物の後ろで話しているかのような表現を行うことができる。
VIEW MORE

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