Figma to After Effects Exporter(期間限定無償配布)

Figmaで選択したフレーム / グループを、After Effectsで再構成するツールです。 Booth：Figma to After Effects Exporter 同梱物 Figma Plugin/ manifest.json d

After Effects 作業整理・配置ユーティリティ LayoutKit+

期間限定無料配布 LayoutKit+ダウンロード LayoutKit+ は、After Effects 用の作業補助スクリプトです。 主に、レイヤーの配置・整列・整理を素早く行うためのツールで、以下のような機能があります。 レイ

非エンジニアがAIでアプリ開発をしてみた

2026年4月12日にカレンダーアプリの Kinen Cal をApp Storeでリリースできました！制作期間は1ヶ月半 使用ツール・メインはCodex・Figma Make・Antigravity・ChatGPT・Claude・Gemi

ShaderCreate / TextureCreate 利用規約

この利用規約はShaderCreate 並びにTextureCreate のものになります。 利用規約 この利用規約（以下、「本規約」といいます。）は、TextureCreate / ShaderCreate（以下、「本サービス」といいます

機能としての役割 ②操作性

はじめに 前回の記事では「機能としての役割」の中の、1つ目「認知」について解説しました。今回は、同じ役割における「操作性」をさらに深ぼっていきましょう！ ※この記事ではモバイルゲームを想定しています 操作性とは 「操作性」とは、ユーザーがス

TextureCreate

ブラウザ上で動作する高性能なテクスチャジェネレーター「TextureCreate」の基本的な使い方を解説します。 1. 画面の基本レイアウト まずは全体の構成を把握しましょう。画面は大きく分けて3つのエリア+上部ボタンエリアで構成されていま

Unityシェーダークリエイト – ShaderCreate(テスト)

現在テスト中 ShaderCreateは、ブラウザ上でリアルタイムにシェーダーエフェクトを画像に適用できるWebアプリです。30種類以上のエフェクトを自由に組み合わせ、ゲームUIや映像素材のビジュアル開発に活用できます。 🎮 ShaderC

UIアニメーション制作②ログインボーナス画面

UIデザインの制作をmennmiさんに作ってもらい、今回はUIアニメーションについての記事を書いていきます。UIアニメーションを作るときに考えていることややり方などを簡単に紹介します。 まずは動きのイメージを作り、その後にパーツ分割をしてい

UIのためのUnity入門: ②画像配置編

はじめに 前回はなぜデザイナーがUnityをやるのかということと、Unityの導入から画面の見方まで紹介しました。今回はUIデザインを実際にUnity上に実装する第一歩として、フォルダの生成から画像のインポートと配置について紹介していきます

UIのためのUnity入門: ①導入編

はじめに 「UIのためのUnity入門」では、「Unity」というゲームエンジン1を用いて、自分の作ったデザインやアニメーションを実際に動かせるようになることを目標に、Unityの使い方を数回に分けて紹介します。 他のUnityの入門記事よ

UIデザイン制作② ログインボーナス

▼完成したものはコチラ！ こんにちは！UIデザイナーのmennmiです！🌼 最近寒いですね〜☃今回はログインボーナス画面を制作してみました！制作の流れや背景を記事にしたのでぜひ読んでみてください！ ワクワクするログインボーナス作りたい！から

イージングについて

イージングとは何か？ イージング（Easing）とは、アニメーションの速度変化のカーブのことで、動きに緩急をつけることができます。同じ時間、同じ距離でもイージングをかけることで印象は全く変わります。また、イージングをかけていない状態をリニア

時間(タイミング)、変化量、緩急について

はじめに アニメーションの気持ちよさは時間(タイミング)、変化量、緩急で表現 アプリゲームのUIアニメーションをさせる時に気持ちが良いと感じる要素が時間(タイミング)、変化量、緩急です。 時間(タイミング)が遅すぎたり早すぎると違和感があり

機能としての役割 ①認知

はじめに 前回の記事ではゲームUIにおける「機能」と「装飾」という2つの役割を紹介しました💡今回はそのうちの「機能としての役割」の中の、「認知」という観点をさらに深ぼっていきましょう！ 認知とは 「認知」とは、ユーザーが状況を迷わず理解でき

UIアニメーションの制作の考え方_1

「なぜ動かすのか？」から始める モーション設計の最初の一歩は「どう動かすか」ではなく「なぜ動かすか」を定義することです。UIアニメーションは派手さよりも、動きがユーザーに何を伝えるかが本質です。 目的の整理（UIアニメーションの5つの役割）

UIアニメーション制作①ホーム画面

こんにちは、UIアニメーションデザイナーのたかゆです。前回のUIデザインの制作をmennmiさんに作ってもらい、今回はUIアニメーションをつけたので、UIアニメーションについての記事を書いていきます。UIアニメーションを作るときに考えている

UIアニメーションの5つの目的_2

前回は「フィードバック（反応）」「 ナビゲーション（案内）」「 状態変化の可視化」について解説をしました。今回はその続きとして、「演出・感情変化」と「演出・体験強化」について詳しく見ていきます。 4. 演出・感情変化 UIアニメーションのゲ

UIアニメーションの5つの目的_1

なぜUIに“動き”が必要なのか？ スマホアプリゲームにおけるUIの「動き」はただの賑やかしではなく、様々な意味を持って動きを取り入れています。 一見すると見た目を華やかにするための装飾のように感じるかもしれませんが、実際にはユーザーの体験を

UIデザイン制作① ホーム画面

完成版 こんにちは！UIデザイナーのmennmiです！ 以前Xで投稿した「架空のスマホゲームのホーム画面」についての制作記事です！✨️どういう考え方で作ったか日記のような感じでまとめたので、ぜひ読んでくださったら嬉しいです！ https:/

ゲームにおけるUIデザインの2つの役割

はじめに UIとは、User Interface（ユーザーインターフェイス）の略称です。Interfaceには「接点」「接触面」という意味があり、UIとは サービスやプロダクトとユーザーをつなぐ接点 を指します。 例えば

AI × デザイナー：拡張機能を自作して“面倒”を全部なくす方法

はじめに この記事は、サイバーエージェントのUIUXLab Advent Calendar 2025の企画として、「AI × デザイナー：拡張機能を自作して“面倒”を全部なくす方法」について書いています。 Advent Calendar 期

After Effects カラーの管理_ColorConductor

期間限定無料配布中 ColorConductorダウンロード AEのスクリプト「ColorConductor」は、カラー支援/管理ツールで、カラーパレットで任意のカラーを管理する機能、コンポジション内のカラーの一括検索 / 置換、カラー制御

After Effects_アニメーションプリセット制作_SaveAnimation Test（無償配布中）

SaveAnimation Test.jsxダウンロード AEのスクリプト「SaveAnimation」は、アニメーションを簡単にテンプレート化して保存、呼び出しをすることができます。 FFXでの保存を行い、アニメーション制作の時短をするこ

After Effectsスプライトシート作成スクリプト_SpriteGrit(期間限定無償公開中)

AESpriteGrid.jsxダウンロード AEのスクリプト「SpriteGrid」は、動画を簡単にSpriteSheet化して並べて書き出すことができます。 一枚のテクスチャで素材を書き出すことで、読み込むテクスチャの数を節約し負荷対策

After Effects配置整列スクリプト_Grupico(無償配布中)

Groupico Groupicoはタイムラインの整理、グループ化をサポートするスクリプトです。 Grupicoダウンロード 導入方法 以下のフォルダにzip内の全ての中身を入れます。 win C:\Program Files\Adobe\

After Effects配置整列スクリプト(無償配布中)

AlignLab AlignLab.jsxダウンロード AlignLabは配置、整列、自動アニメーションをサポートするスクリプトです。好き勝手に機能を増築させすぎて、今では動かすのが重くなりすぎてアニメーションでの使用が難しくなっていきまし

After Effects おすすめショートカット

おすすめショートカット 使いこなせると時短になるショートカット一覧になります。CmdやOpt、Shiftなどの組み合わせで出すショートカットもまとめています。 まだまだショートカットはたくさんありますが、よく使用するものだけを厳選しました。

Blenderを使った演出表現

blenderを使いメッシュを作成し、メッシュに沿ったテクスチャアニメーションを作ります。 また、blenderのカーブを使い、Unityのparticleをカーブの上を走るようにエフェクトも作ってみます。 平面がカーブに対してくっつくよう

花びらparticleを作成する

花びらのparticleの作り方を紹介します。使うツールはUnityとBlenderで作っていきます。 Blender 平面作成 Shift+Aからメニュを開き、メッシュ→平面を作成します。 モディファイアーの追加 厚みの追加 モディファイ

獲得演出のエフェクトバリエーション

獲得(出現)系演出で表示されるエフェクトには様々な種類があります。レアリティによる出し分けの仕方や、ゲームの世界観に合わせたエフェクトの見せ方、アイテム、キャラ、ガチャ石などの種類に対するエフェクトの分け方など、アイテム獲得(出現)時には色

連番画像を作ってUnityで再生する

Screenshot AfterEffectsでアニメーションを連番画像で書き出し、Unityで使用するやり方を解説していきます。 複数画像をアトラス化し、連番アニメーションとして使用することで手軽にリッチなアニメーションを表現することがで

新規開発時に入れたいUnityの拡張機能

haw2fregelさんの作成したツールが非常に便利なので紹介します。▼拡張機能配布場所 このツールを使用することで以下の内容が、効率化、時短が可能になります。・イージングカーブのプリセット化・プロジェクトフォルダへのショートカットアクセス

SNS告知動画いろいろ

SNSからアプリへの流入を促すためにどのような宣伝をしているのかまとめてみました。Xの動画をメインにどのような宣伝をしているのか見ていきましょう。 まずは基本情報として、動画要件と簡単な動画作成の流れについてまとめました。 動画の要件 Xで

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アニメーション以外にもキャラクターモーション、エフェクトなどでも適用されて

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

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