Particle_Ideas_100

UnityでParticleのアイデア出し用に作成しました。

UI_Effects_Ideas_100

テクスチャ(UI演出用素材)の作成をしました。

ポートフォリオ_3

2021年から1年間でデザニメ・ラボのUIチャレンジという企画で作ってきたアニメーションです。デザインははなさくのさんに作成していただいています。UIチャレンジトランジションゲームタイトルプレゼントボックス育成画面ルーレット音ゲー...

ポートフォリオ_2

2021年からデザニメ・ラボのUIチャレンジという企画で作ってきたアニメーションです。デザインははなさくのさんに作成していただいています。UIチャレンジメリークリスマスレストランゲームのレシピハロウィンガチャの結果画面武器強化アップデートV

ポートフォリオ_1

2021年からデザニメ・ラボのUIチャレンジという企画で作ってきたアニメーションです。デザインははなさくのさんに作成していただいています。UIチャレンジログインボーナスショップ水属性カードフレームロード和風タイトルサイバー風デザイ...

演出デザイナーのデスク紹介

実は以前も作業環境の紹介として「アニメーションデザイナーの効率を上げる3つの周辺機器」の記事を書いていましたが、2022年に引っ越しをして作業環境を一新しましたので、改めて新デスク回りの紹介をしていきます。デスク周辺紹介デスク180x90と

UIデザイナーが演出の勉強を始める時の流れ

UIデザイナーの方がUIアニメーションや遷移アニメーション、レベルアップアニメーション(総合してUI演出と呼ぶ)などをつけることもあると思いますが、UI演出をやったことがない方が初めて演出をつけようと思った場合、何をすればいいか迷うかと思い

デザニメ・ラボという活動は失敗しかしていない

デザニメ・ラボはTwitterの@HanaSakunoさんと運営しているデザインxアニメーションの創作活動チームになります。その活動は実は様々なことをしていて、Twitter、ブログ、Youtube、Instagram、TikTok(投稿し

演出と感情の紐づき

演出の出し方が多様化する中で演出がどういう役割を持つのかよくわからなくなることも多いと思います。演出は現実にない感情表現を視覚化しているものでもあるので、感情にどう紐づくか知っていると演出をつけやすいかもしれないので、今回は演出に感情を紐づ

Texture_Ideas_100

テクスチャ(素材系)アニメーションのアイデア出し用に作成しました。

ゲーム演出を作る時の流れ

演出制作はキーを打ってアニメーションさせることや、素材作りと画面の絵作りに、全体の流れのバランス調整など、非常に時間のかかる作業になります。そして、作っていくと構造がどんどん複雑化されていき、完成に近づいた時にはちょっとした修正をするのに想

目的/目標に縛られずに今やりたいことをやる

目的：到達したい状態、行動を方向づけるもの目標：目的達成のための具体的な内容僕はゲーム業界に就職して7年ほど経ちましたが、目的をもって人生を歩んでこれたかというと目的を意識してゲーム業界に入ったわけではなく、絵を描く職業になれたらいいなぁな

初めてBlenderで作るテーブル

Blenderを使ってモデリングから書き出しまでを順々にやっていきます。基礎的な流れだけをまとめたので、これからBlenderを始める方の参考になれば幸いです。テーブルのモデリングテーブルを作る時に覚えておくと便利なショートカット頂点/辺/

Blender_覚えておくと便利なショートカット

マウス操作視点平行移動Shift+中ドラッグ視点回転中ドラッグズームホイールShift+右クリック3Dカーソル移動モード変更モード切替Tab作成メッシュなどを作成Shift+A基本の変形操作移動G (中クリックで平行移動)回転R拡大縮小S削

Blender2.9_初期設定/レイアウト 備忘録

自分の設定をメモしておきます。環境設定言語言語は日本語に変更できます。視点の操作「選択部分を中心に回転」はお好みで。カメラのズームしたときの設定で深度があります。拡大していく途中でズームができない時がでてきます、「深度」にチェックを入れるこ

アニメーションの良い動き/悪い動き

これからアニメーション(UIアニメーション/演出)を学んでいきたいという方向けにゲームの演出に使われるアニメーションについて、動きをつける時に何を考えるのか、どう動かすのが良い動きになるのか、その考えを書いていきます。良い動き、悪い動きアニ

UIデザイナーが業務で使えるAfterEffectsの基礎

ゲームのUIデザイナーは画面を彩り、ユーザーの使いやすさを考え、ユーザーが遊んで楽しいと燃えるようにデザインに遊びを入れるなど、様々な工夫をして画面の設計をします。そんなUIデザイナーが動きを提案できればそれは業務の幅が格段に広がるかと思い

Blender→AE→PS→Unityでエフェクトを作る

Blenderで3Dメッシュを作り、AfterEffectsで連番テクスチャを作り、Photoshopで画像を一枚にまとめてUnityで表現する流れをまとめてみました。細かい画面の説明はせずに流れを書いていきます。まずはBlenderの準備

Text Animation Idea

テキストアニメーションのアイデア出し用に作成しました。AEPデータをBOOTHで販売中

ゲームUI演出の一年間

ゲームUI演出（）は2019年12月末に開設し、無事1年を迎えることができました。このブログを見ている皆さんには感謝の言葉しかありません。ブログを見てくれる人がいるから僕は頑張ってブログを書くことができ、誰も見ないものだったらブログという記

光の演出

光は演出を作る上で重要な役割を持っていますが、UI上で目にする光の演出は現実的な光(影の落ちる光)ではなく、全方向均等に光の当たるデジタル的な表現になります。余分な影の情報がないので、純粋に光だけでユーザーの目線を誘導し、ゲームを遊ぶための

Transition_Idea_100

トランジションのアイデア出し用に作成しました。

アニメーションデザイナーの効率を上げる3つの周辺機器

スマホアプリのゲームを制作しているアニメーションデザイナーがおすすめする周辺機器を厳選して3つ紹介します。この3つは壊れたらまた買いなおすレベルで便利でしたのでかなりオススメです。作業スペック機材スペック用途MacbookPro13-inc

AfterEffects Default Effects_100

AEのシェイプレイヤーに使えそうな標準エフェクトを集めてみました。AEのエフェクトを使えば簡単にエフェクトを表現できますが、量が多すぎて大変ですね。一覧化してみたのでお役に立てれば幸いです。Default Effects 100CC Ben

MOTION Ideas 100

モーションのアイデア出し用にただただ思いついた動きを作ったものです。OutlineRotationScaleTileTransparencyPositionD...

演出の導入

UIアニメーションの導入演出は最初に目に入るため、どのようにユーザーへ見せたいかで導入の見せ方が変わってきます。今回はそんな演出の導入について書いていきます。2つの導入演出の導入には「目線誘導させてから出す」「突発的に出す」の2つがあります

絶対にやってはいけない演出表現

ゲームの演出はユーザーを楽しませるために必殺技やカットイン、進化、ガチャ演出などでなるべく派手にしようと暗い空間に光をつけて視覚に訴えようとします。そんな演出でやってはいけないのがコントラストの強い点滅になります。この光の点滅は光過敏性発作

ストレスからの解放時に達成感を演出する

ゲームを面白くする要素の一つに適度なストレスとストレスからの解放があります。ユーザーによって楽しめるストレスはまちまちで、難易度（ストレス）の低い簡単なゲームを楽しむユーザーもいれば、難易度（ストレス） の高い難しいゲームを楽しむユーザーも

After Effectsで素材作成_3

After Effectsで素材作成_1After Effectsで素材作成_2グローボール塗りをグラデーションで簡単調整シェイプレイヤーで球体を作り、グローエフェクトでぼかすだけで簡単に作れます。中央を濃くしたい場合や光の加減を調整した.

After Effectsで素材作成_2

前回のAfter Effectsで素材作成_1の続きで、テクスチャや素材の作り方を書いていきます。集中線CC Cylinderで集中線極座標で集中線集中線もフラクタルノイズで作成しますが、今回は CC Cylinderで放射状にしたものも用

After Effectsで素材作成_1

ゲーム制作では素材の作成が多々発生するので、エフェクト・テクスチャの作成について自分のやり方を書いていきます。テクスチャフラクタルノイズでテクスチャ作成AEは標準...

Unity_Particleのアニメーションによる変化

パーティクルはアニメーションを組み合わせることで表現の幅を広げることができます。どのような見た目の変化をさせることができるかこちらで書いていきます。追従On/OffSimulation Space:LocalSimulation Space

Unity_Particleの作り方（初心者用）

パーティクルは細かい粒子を放出するシステムで、使い方を覚えるとパーティクルシステムで様々な表現ができるようになります。パーティクルを作ってみるHierarchyで右クリックしてEffect→Particle S...

ゲームUI演出の半年間

ブログ、ゲームUI演出（）は2019年12月末に開設し、その時のブログの内容はゲームアプリの演出GIFアニメ資料サイトとして作成していました。なぜブログを始めたかUIアニメーションの勉強を怠っていたのと、怠惰に慣れ始めて向上心をなくしつつあ

インゲーム文字演出の種類

インゲームでは画面にダメージやコンボ、スキル名など様々な文字表示があります。この文字表示はゲーム世界の情報をユーザーへわかりやすく伝えてより楽しいと思ってもらえるように表示するものです。例えばダメージ表示は現実、アニメ、映画、小説では見るこ

UI演出はゲームの世界観を作る

まず先にUI演出と書いていますが、UIアニメーションとUI演出の二つ違いを書いておきます。（UI演出という言葉を勝手に作っているので自分の解釈の説明です）・UIアニメーション ユーザーの知りたい機能や目線の誘導、快適さを追求する動き・UI演

Unity_Particle_Trails/Renderer

メイン機能メモEmission/ShapeメモVector/Lifetime/otherメモNoise/Sub Emitter/Collision/TextureメモTrailsパーティクルに追従する線のようなものを出すトレイルを表示するに

Unity_Particle System_各モジュールメモ4

Noiseパーティクルの動きにノイズを加える（ランダムな動きを加える）Separate AxesSeparate Axesオフ時はXY軸にランダムに動きを加える、オン時はXYZそれぞれ調整ができる左はオフ時、右はX 0、Y 10、Z=0で縦

Unity_Particle System_メモ3

Velocity Over Lifetimeパーティクルを移動させるLinear X, Y, ZXYZ方向に移動させる左はX＝3、右はY＝3Orbital X, Y, Z円状に移動させる左はZ＝4、右はX＝4、Y＝4Off...

Unity_Particle System_Emission/Shapeメモ

前回のメイン機能に引き続き、今度はモジュール機能のメモになります。EmissionRate over Time1秒ごとに生成されるパーティクルの量左は5、右は50rate over distance移動に対してパーティクルの量が変化左は0.

Unity_Particle System_メイン機能メモ

Unityのパーティクルについて、なんとなく使っているだけで詳しい機能を調べたわけでもなかったので、調べてみました。分からない箇所とかあり、エンジニアさんに相談したいレベルで難しいです・・・間違った表記をしていたらごめんなさい。自分用の勉強

Unity_Particle Systemメモ（途中）

Unityのパーティクルについて、なんとなく使っているだけで詳しい機能を調べたわけでもなかったので、調べてみました。分からない箇所とかあり、エンジニアさんに相談したいレベルで難しいです・・・間違った表記をしていたらごめんなさい。自分用の勉強

やめてほしいUIアニメーション

最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人

アニメーションのスピードを同じにしてはいけないポイント

UIアニメーションの時間と速度は全て同じに見えるかもしれないですが、実は工夫されているアプリは微妙に違いを出しています。ここでは、ウインドウの大きさによるアニメーションの違いと、導入と終了時によるアニメーションの違いを説明します。アニメーシ

AfterEffects_シェイプアニメに使えそうなエフェクトまとめ（重）

目立たせすぎるUIアニメーション

動きはなんとなしに入れた動きが注目させすぎる動きになっていることがあります。今回は一番動いているものから徐々に手を加えていって、どのくらいまでシンプルにすると丁度良いのか探っていきます。注意事項として、動きにはこれが絶対というものはなく、ゲ

やってはいけないUIアニメーション

UIアニメーションをさせる時に、動きはどうすればいいのか迷うことがあるかと思います。かっこよく見せたいけど動かし過ぎていたらどうしようとか、どこまで動かせばいいのか、イージングは？など考えだすと迷うことは沢山あります。より良くしようとするの

ポップアップの見せ方_導入の動き

前回のポップアップの背面の種類についてを書きました。今回はポップアップの動きで、不要な動きについて書いていきます。ポップアップの1秒もない動きについても何度も見る動きになるのでちょっと工夫すると、より良いゲーム体験を作ることができます。導入

演出を作る時の心がけ

演出を作る時に普段どのようなことを意識して作るかついて書いていきます。これを意識するだけで何もないところから何かを作る時のヒントになるかもしれません。意識していること飽きさせないこれ！動きは見ていて工夫させないと飽きます。主に、同じような場

UI演出の重要性 価値の向上

UI演出の役割として6つ挙げている中の価値の向上について書いていきます。・注目させる・アクションへの反応、理解を助ける・世界観を表現する・体感時間を短くする・価値の向上演出は価値に変化をつけることができ、演出次第で価値を上げることも下げるこ

UI演出の重要性 体感時間を短くする

UI演出の役割として6つ挙げている中の世界観を表現することについて書いていきます。・注目させる・アクションへの反応、理解を助ける・世界観を表現する・体感時間を短くする・価値の向上アニメーションによって体感時間を短くすることやストレスのない見

UI演出の重要性 世界観を表現する

UI演出の役割として6つ挙げている中の世界観を表現することについて書いていきます。・注目させる・アクションへの反応、理解を助ける・世界観を表現する・体感時間を短くする・価値の向上UIの動きや表現で世界観を表することも大切な役割です。アニメー

UI演出の重要性 反応と理解

UI演出の役割として6つ挙げている中のアクションへの反応と理解を助けることについて書いていきます。・注目させる・アクションへの反応、理解を助ける・世界観を作る・体感時間を短くする・価値の向上今回はボタン押下➡︎画面遷移という状況を例にして進

UI演出の重要性 注目させる

UI演出という言葉はブログタイトルにもありますが、表現をUIアニメーションでもなく、UIモーションでもなく、UI演出と表現しているのは、「演出」は様々な効果を加え、ユーザー（見ている人）を楽しませるためのものだと思っているからです。ゲームで

シームレスな遷移

シームレスという意味は「縫い目がない、繋ぎ目のない」という意味で、ゲームでは場面のカットが変わることなくスムーズにシーンの切り替わりを意味しています。シームレスな遷移を行うことで、ユーザーはゲームへの意識を途切れさせることなく、世界観への没

気持ちの良いスクロールとちょっと変わったスクロール

スクロールさせた時のアニメーションは当たり前のようにスクロールしていて、そこの作りについてはあまり気が向かないかと思います。しかし、スクロールが気持ちよく動くのは裏で微調整してユーザーが違和感なく操作できるように調整を重ねて気持ちよくスクロ

見せ方を考える

見せ方を考える時にどう見せるか悩みますがウインドウが右から左へスライドする動きでキャラクターと背景をどう作っていくか、作り方について考えました。まずは当たり前普通の動きを作りました。いきなり奇抜なものはハードルが高いので、まずは普通。あれ、

短いローディングにスピナーを使う

スピナーはプログレスバーと違い、無限に繰り返されるループアニメーションです。スピナーを表示させる場合は短時間のローディング表示をさせる場合に使います。長いローディングの際はプログレスバーを使用して、ユーザーがいつローディングが終わるのかを伝

プログレスバーの見せ方で体感速度を変える

ロードやコネクティング、ダウンローディングなど、待ち時間が発生することがありますが、今回はプログレスバーについてどの様に表示させるとストレス減になるのかを考えてみます。ストレスを減らすために、ゲージでの見せ方を工夫する必要があります。表示の

戻ると進むの疑問

戻るは「⬅︎」を指すことが多いかと思いますが、何故でしょうか？キャラクターが右を向いている事や右に向かって進むことが多いのですが、何故でしょうか？ゲームでは左から右へ進むことや、キャラクターが右向きになっていることが非常に多いです。当たり前

奥行きのある演出

奥行きのある演出は、平面にしているものに奥行きある演出を入れることで、広がりある見せ方を出すことができます。また、遷移時の見せ方にもバリエーションを持たせることができ、戻る時と進む時の遷移を想像しやすくなります。奥行きの有無奥行きありなしの

動きと拡大について考える

移動＋拡大の動きについて、直線的な動きをするのか、曲線的な動きをするのかを考えていこうと思います。※上のアニメーションでは全てが正しいアニメーションではなく、よくない動きも入っています。NG例も含めて解説していきます。今回は正方形から長方形

演出の流れはこう作る

演出で少し派手にしたいとき、特別印象付けたい時に自分のよくやるやり方を紹介しようと思います。まずは流れですが、流れは4つの工程を踏むことが多いです。導入→破裂→収束→確定派手目な演出を作る時はエフェクトを弾けさせて終わるのではなく、流れを組

平面に奥行きを入れる考え

最近は3Dがメインコンテンツになっているゲームが非常に多くなってきました。UI自体は平面が多く3Dを入れている立体的なUIはなかなか少ないかと思います。今回はUIパーツを3Dにしたら…と言う話してはなく、フラットなUIにも奥行きを意識して作

遷移アニメーションの最適な時間

遷移アニメーションを行う時に何秒ほどかけるのを最適とするか考えた時に、ユーザーはアニメーションなんていらない、すぐに次の画面に行って欲しいと願うと思います。しかし、アニメーションは必ず必要で、アニメーションのない遷移はユーザーへストレスを与

UIの細かい動きをについて

細かい動きの調整をしていく中でイージングというものがあります。イージングは動きに緩急をつけ、目立たせたい動きや自然な動きを作り出すことができます。このイージングはUIアニメーション以外にもキャラクターモーション、エフェクトなどでも適用されて

ガチャ演出のスキップは不要

演出スキップは色々なところで発生します。・レベルアップ・覚醒・クエスト開始・リザルト・ログインボーナス・カットイン・ボス出現・タイトル・イベントなどなどある中でガチャ演出が最も長いかと思います。今回はガチャ演出にスキップは必要派、不要派分か

長押しにも演出を

ボタンを押下する時は押せば次のアクションに入りますが、長押しの場合はそもそも次の画面に遷移するのかどうなのかは長押ししてみないとわからないです。そこにちょっとしたアニメーションを入れることで長押し押下のフィードバックを返すことができます。ボ

ダウンロード中のゲージ表示はこれ一択

ダウンロード中のゲージ表示は2種類の表示方法があります。分割型か、一括型か。

ボタンアニメーションについて考える

ボタンアニメーションはどんなものがあるのか、簡単にまとめてみました。

足し算で簡単に演出を作る

演出を作る時に手っ取り早く派手にするのはどうすればいいの？っていう時に自分がやる簡単なやり方です。単純に、キーを足していくということをしています。上の画像も何も考えずに四角を使って足し算で作ってみました。 1.基本の拡大まずはただの拡大縮小

リストアニメーションの種類

ゲームアプリにおけるリストアニメーションはどういうアニメーションが良いか考えてみました。リストの種類次第でアニメーションを変える必要があるので、リストにどんな種類をまとめつつ、アニメーションについて触れています。リストの種類によってアニメー

ポップアップアニメーションの役割

ポップアップはボタン押下時、別画面へ遷移はせずに別ウインドウが飛び出す演出で、ソーシャルゲームではよく使われます。webのポップアップでは広告が主流で嫌われているみたいですが、ゲームではお知らせや注意させる動きで使われることが多いです。ゲー

ローディングを無くしたい！

よく見るアプリゲームのロードですが、実は気にしてみるとロードが長いものから短いもの、はたまたロード画面が存在しない（ように見える）ものもあります。このロード、タイトルでは無くしたいと書きましたが、無くなりません・・・！どうしても必要な処理な

遷移アニメーションの重要性

遷移アニメーションがなかったらどうなる？遷移アニメーションを入れることでどう変わるかを説明しています。

タップエフェクトは不要

タップエフェクトを表示した方が良いもの、表示しない方が良いものを考えてみました。

ゲーム画像削除に関して

2019年12月24日に立ち上げたゲームUIブログですが、2020年2月5日までアップされた全ての画像を削除することとなりました。経緯TwitterでHPバズる😯↓サイトへのアクセスが1日で急上昇、10000超えのアクセスが入る☺️↓管理人

VOEZ

VOEZのgame,UI,anime,animation,ソーシャルゲーム,social,アニメーター,資料,参考資料,演出,アニメーションデザイナー,ゲームUIアニメーション,ゲームUIanimation,GameUIanimation,UIアニメｰションを収集しています。

UNITIA(ユニティア)

外部サイト(UIデザイン)：ゲームUIブログ様

オーブジェネレーション』(オブジェネ)

オーブジェネレーション(オブジェネ)のUIアニメｰションを収集しています。

非人類学園

非人類学園のUIアニメｰションを収集しています

ライバルアリーナVS

ライバルアリーナVSのUIアニメｰションを収集しています。

七つの大罪 ～光と闇の交戦（グランドクロス）_グラクロ

メダロットS

メダロットSのUIアニメｰションを収集しています。

VGAME

VGAMEのUIアニメｰションを収集しています。

サイト管理人のちょっと長いプロフィール

UIアニメーションをつくる方を何と呼べばいいのか、業界内で統一されていないかと思いますが、ここではアニメーションデザイナーと呼ぶことにします。 UIアニメーション、UI演出作りたい人って少ないよね 私は今でこそアニメーションデザイナーを名

Project NOAH – プロジェクト・ノア

Project NOAH – プロジェクト・ノアのUIアニメｰションをGIF化して収集しています。

ダイスの神

ダイスの神のUIアニメｰションをGIF化して収集しています。

アークナイツ

アークナイツのUI演出をGIF化して収集しています。

クロス×ロゴス

ハースストーン – Hearthstone

ハースストーン - HearthstoneのUI演出をGIF化して収集しています。

蒼青のミラージュ（ソノミラ）

蒼青のミラージュ（ソノミラ）のUI演出をGIF化して収集しています。

必殺技系_まとめ1

エピックセブンリーグ・オブ・ワンダーランドリボルバーズエイトワールドフリッパー

昇格演出_まとめ1

Sdorica (スドリカ)ガール・カフェ・ガン(ガルカフェ)アリス・ギア・アイギスワールドフリッパーUNI’S ON AIRTapSonicTopリーグ・オブ・ワンダーランドリーグ・オブ・ワンダーランド

Sdorica (スドリカ)

スドリカのUI演出をGIF化して収集しています。

ボス出現_まとめ1

CODE:SEEDガール・カフェ・ガン(ガルカフェ)エピックセブンワールドフリッパー

クエスト開始演出_まとめ1

D×2 真・女神転生リベレーションアリス・ギア・アイギスドラガリアロストリーグ・オブ・ワンダーランド（リグワン）TapSonicTopUNI'S ON AIR（ユニゾンエアー）エピックセブンリボルバーエイト

クエスト完了演出_まとめ1

D×2 真・女神転生リベレーションアリス・ギア・アイギスCODE:SEEDリーグ・オブ・ワンダーランド（リグワン）TapSonicTopエピックセブンワールドフリッパードラガリアロストガール・カフェ・ガンUNI'S ON AIR（

ガール・カフェ・ガン(ガルカフェ)

ガール・カフェ・ガンのUI演出をGIF化して収集しています。

D×2 真・女神転生リベレーション

D×2のUI演出をGIF化して収集しています。