はてなブックマーク

UIデザイナーの方がUIアニメーションや遷移アニメーション、レベルアップアニメーション(総合してUI演出と呼ぶ)などをつけることもあると思いますが、UI演出をやったことがない方が初めて演出をつけようと思った場合、何をすればいいか迷うかと思います。 ここでは演出を作るために何を学んでいく必要があるかを書いていきます。 好きなものを考える 演出について書いていく前に、興味の対象が他にもあるかもしれないので、演出に近いものもリストアップしてみました。 せっかくなのでまずは好きなものを考えてみるのはいいかもしれません。 勉強って好きなことには凄い力を発揮するので、やりたいものが見つかったらそれをやっていくのは強いモチベーションになります。

施策が決定し、画面の内容が決まっていくことで必要な演出が入る場所が見えてきます。 この時やることは、2つあります。 ・演出必要箇所の把握、洗い出し ・工数出し 演出箇所の把握、洗い出し 演出がどこに入るのか、画面の流れはどうなるのかを把握しておきましょう。 まだデザインされた画面ができていないと思うので、演出ボリュームは見えにくいかと思いますがその中でもわかる範囲で必要演出洗い出しを行います。 ・画面遷移_in/out ・レベルアップ演出 ・ゲージ演出 ・カウントアップ…etc… 洗い出しても、演出数は増えることもよくあるので参考程度に洗い出します。 工数洗い出し 必要な演出箇所がわかったら、どのくらい工数が発生するか考えます。 僕の場合は作業工数が1人日の場合、動作確認、FB対応、バッファと合わせて工数2〜2.5人日に盛ることもあります。 慣れている作業なら問題ないのですが、あまり作業し

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

Blenderで3Dメッシュを作り、AfterEffectsで連番テクスチャを作り、Photoshopで画像を一枚にまとめてUnityで表現する流れをまとめてみました。 細かい画面の説明はせずに流れを書いていきます。 まずはBlenderの準備編になりますが、インストール編が不要な方はタイトル欄から好きな項目へショートカットできます。

ゲームの演出はユーザーを楽しませるために必殺技やカットイン、進化、ガチャ演出などでなるべく派手にしようと暗い空間に光をつけて視覚に訴えようとします。 そんな演出でやってはいけないのがコントラストの強い点滅になります。 この光の点滅は光過敏性発作、いわゆるポケモンショック（今の人たちは知らないかも・・・？）で、体調不良に陥る可能性があります。 ポケモンショックによって体調不良を訴える人が出たため、テレビ業界では点滅のガイドラインが入り、コンシューマーゲーム業界ではゲーム冒頭に注意喚起の文言が入りました。 しかし、スマホアプリでは規制がないため、作り手が意識して過剰な点滅を表現しないようにする必要があります。 光過敏性発作を避けるために 脳への強い光刺激によって起きるため、演出制作時に以下の項目に注意して作るとよいです。 光の点滅が一秒間に3回を超えてはいけない（1/3秒に一回まで）鮮やかな赤

円を描くアニメーションでSimulation SpaceをLocalかWorldで全く違う見え方になります。 Simulation Spaceは親オブジェクトにパーティクルの追従をするかどうかで、Localは追従し、Worldは追従しない状態です。 アニメーションをつけるときは追従をOff（World）にすることで自然な演出をすることができます。 筆文字 emissionのrate over distanceを10にして、Size over Lifetimeでサイズを縮小させていくことで筆のようなアニメーションにすることができます。 消えていくときにアルファでフェードアウトもさせるとより自然です。

パーティクル自体はこれでまずはできました。 ここから色々な項目をいじってパーティクルの制御を行います。 機能を知る パーティクルの機能は凄くたくさんあるため、まずはよく使う機能だけをまとめてみました。 初めは赤以外の箇所をいじってみてパーティクルの理解を深めるのが良いかと思います。

まず先にUI演出と書いていますが、UIアニメーションとUI演出の二つ違いを書いておきます。（UI演出という言葉を勝手に作っているので自分の解釈の説明です） ・UIアニメーション ユーザーの知りたい機能や視線の誘導、快適さを追求する動き ・UI演出 世界観のようにゲーム自体の表現や期待感のようなユーザーの感情を動かす動き ゲームはアプリと違い、機能性だけを追求するものではないため、UI演出が大切になります。 アプリはユーザーへ快適と便利を提供しますが、ゲームはエンターテイメントを提供するものでアプリとは仕様が全く異なります。 だからこそ、機能重視のUIアニメーションはとても大事ですが、UI演出もゲームにとってはとても大事な存在になっています。 最近までNG系UIアニメーションなどでわかりやすくシンプルにしていくことを書いていましたが、この記事では演出もゲーム作りの一つで大事な要素ということに

Ribbon：パーティクルパーティクルをつなげるように線が伸びる Particles：発生源からパーティクルに追従する線が伸びる Mode：Ribbon Ribbon Count パーティクルを繋ぐリボンの数

最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ！と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ？と思ってしまう、そんな「これはやめてほしい

こちらの3つのアニメーションはボタン押下後に小中大のウインドウを表示させていますが、大きさによってアニメーションを変化させています。 小さいものほど動きは早く、大きいものほど動きは遅くすることでより自然なアニメーションに見せることができます。 この動きがもし逆だった場合はどう見えるのかが下の画像になります。 小さいウインドウの動きはゆっくりに見え、少し鈍い感じを覚えます。 大きいウインドウでは素早く動くため視覚への負荷が大きく、衝撃、緊急性があるように見えます。 より良いアニメーションは現実の動きに近いアニメーションが自然に感じられるため、現実世界と同じように大きいものはゆっくり動き、小さいものは素早く動くことで自然な体験を得ることができます。 それでもユーザーへの待機時間を減らすためになるべく早くアニメーションを終わらせたい場合は途中から再生させることをお勧めします。

演出を作る時に普段どのようなことを意識して作るかついて書いていきます。 これを意識するだけで何もないところから何かを作る時のヒントになるかもしれません。 意識していること 飽きさせない これ！ 動きは見ていて工夫させないと飽きます。 主に、同じような場面、動き、スピードが続くと退屈に感じてしまうので、少しでもその感情をなくすために様々なところに変化をつけ、見ていて飽きないようにしていきます。 飽きさせないために何をするかですが、緩急、粗密、ジャンプ率、明暗に変化を加え、印象を変えて飽きさせないようにします。 緩急でメリハリ

上の画像でどれが長く感じる、イライラするかというのを聞いてみました。 よければどれが長く感じる、イライラするか考えてみてください。 結果は下に載せておきます。 結果 結果は①が皆長い、イライラするという結果がでました。 ①や②は、リズムの崩れや、不安定感、いつ終わるのか不透明なところがストレスになるようです。 ③の様な等速でアニメーションをさせることができるとストレスを減らすことができ、ユーザーも待ち時間の把握ができて安心感につながります。 ただし、実装をどうすればいいのかはわからないですが・・・ もう一つ実験しておけばよかったなと思ったのが、④の最初はゆっくりさせて後半を早くするアニメーションです。 疾走感や終わり方がいいと人は良い認識にすり替えられるので、こちらの動きも気になりました。 実験できる機会があれば行ってみようと思います。 ゲージだけでなく、文言も必要

UI演出という言葉はブログタイトルにもありますが、表現をUIアニメーションでもなく、UIモーションでもなく、UI演出と表現しているのは、「演出」は様々な効果を加え、ユーザー（見ている人）を楽しませるためのものだと思っているからです。 ゲームではUIに動きを入れるだけでなく、エフェクトやSE、表現方法で楽しさと快適さ、没入感を提供しているため、総合してUI演出と自分は呼んでいます。 演出はユーザーの体験をより良くするために必要ですが、使い方を間違えると「演出はいらない」「スキップさせて」とユーザーは思ってしまいます。 演出がもっさりしていたり、長かったり、作り手側が無駄に意味のない演出を取り入れた、または気持ちの良い動きを追求しなかった結果、ユーザーに演出は必要ないと思われてしまうことになります。 今回はそんな演出がもたらす役割を記事として書きました。 UI演出の役割として6つ挙げてみました

スクロールは当たり前のように気持ちの良い動きがゲームでは表現されていますが、それはちゃんと調整された物で、もし調整がない場合は上の画像のように重くて硬く、気持ちよい感じは皆無になってしまいます。 指を離した後にピタッと止まるのは現実ではありえない動作で、不自然な動きを見せられているため、見ていて気持ち良い動きにはならず、認識とのギャップでストレスが強くかかります。 調整を入れてみたもの 慣性の法則を入れることで自分の指で自然に操作している感じを入れました。 さらにオーバーシュートを追加することで柔らかさを表現し、より自然に見えるようにしています。 指にしっかり追従し、離したあとも思ったように動く動作を入れることで気持ちよさを表現しています。 あとは調整して触って調整して触っての繰り返しになるかと思います。 その他の印象付ける動き スクロールは調整さえ済めば他の要望はないですが、ちょっと見せ

戻るは「⬅︎」を指すことが多いかと思いますが、何故でしょうか？ キャラクターが右を向いている事や右に向かって進むことが多いのですが、何故でしょうか？ ゲームでは左から右へ進むことや、キャラクターが右向きになっていることが非常に多いです。 当たり前と思ってゲーム制作に入ることが多いですが、たまに、左向きに作られるゲームもあります。 その際、違和感がある場合にちゃんと問いを投げることはできるでしょうか？ または左向きのゲームを見つけた場合、何故左向きにしているのか疑問に感じたことはあるでしょうか？ 自分は開発当初、左向きに進むゲームを開発したことがあります。 その当時、左に進んでいくことに違和感を覚えたのですが、その問を質問するのを躊躇ってしまい、ゲーム開発が進むにつれてそんな根本的な質問を今更聞けないなという思いも強くなり、結局聞けないままリリースまで迎えました。 聞かぬは一生の恥・・・シン

ダイアログはボタン押下時、別画面へ遷移はせずに別ウインドウが飛び出す演出で、ソーシャルゲームではよく使われます。webのダイアログでは広告が主流で嫌われているみたいですが、ゲームではお知らせや注意させる動きで使われることが多いです。 ゲーム内でのダイアログの役割 ・説明/詳細 チュートリアルでの説明やアイテム、キャラの詳細など、より詳しい情報の表示 ・確認事項 報酬受け取り時に何を受け取ったのか確認や、ユーザー資産を使用する時の確認など OKボタン、はい、いいえ、など ・システムメッセージ サーバー通信エラーやメンテナンス入りなど注意を促すもの ・お知らせ アプリ起動後のウェブを介したお知らせ系 ダイアログ時の背景変化 ダイアログはウインドウだけではなく、背景もどう表現するか決める必要があります。 背景を暗くするのか、白くするのか、ぼかすのか、最近は背景にゲームの特色となる記号を入れること

各アプリのタップエフェクトを調べた結果 自分のスマホに入っているアプリの一部を開いてタップエフェクトを調べてみたら、意外にタップエフェクトがでているものが少なかった（外国アプリ多い） タップエフェクトがないもの ハースストーン ガーデンスケープ クラロワ HeadBall2 オメガフォース ディスティニーチャイルド ブラウンダスト Pokémon GO オセロニア アークナイツ エピックセブン 「ボタンを押した時」「何もない箇所を押した時」のタップエフェクト2つ作っているアプリがあったのは衝撃でした。 プリンセスコネクトがタップエフェクトをボタン押下時と通常時で分けているのですが、これに気がついている人どのくらいいるんだろう・・・気になります。 タップエフェクト不要（UI次第） ロード中のタップエフェクトが見えるのも好きじゃない・・・。 ロードの暗い画面で無駄にタップしてエフェクトを眺める

2019年12月24日に立ち上げたゲームUIブログですが、2020年2月5日までアップされた全ての画像を削除することとなりました。 経緯 TwitterでHPバズる😯 ↓ サイトへのアクセスが1日で急上昇、10000超えのアクセスが入る☺️ ↓ 管理人喜ぶ🤗 ↓ 会社でもゲームUI演出ブログとかいうサイトあるみたいと噂される💪 ↓ 法務の人に肩叩きにあう🤔 ↓ サイト停止の相談を受ける😱 ↓ 管理人戸惑い絶望する🤮 ↓ 画像削除へ決断😠 わずか12時間ほどの出来事である・・・ 管理人の考えとしては、昨今のアプリはゲームに実況用の録画、撮影機能がついているものも多く、実況動画のように1から全部載せているわけではないのと、アプリの宣伝にもなるので訴えられる可能性は相当低いだろう、グレーゾーンだから大丈夫だろうと甘く思っていたのですが、会社の法務の方の目に止まってしまい（自分の管理