[Course]ゲームUIクリエイター,TakayuStudio_타카유스튜디오 Details

ゲームUIによる世界観の作り方
背景デザインを起点にゲームUIのトーン&マナーを設計し、その方針に基づいてFigmaを用いたゲームUIの制作を行います。

ポップなグラフィック制作
デザインの基礎から学び、Adobe IllustratorやAdobe Photoshopを活用して、魅力的なグラフィックを制作します。
デザインに合わせたアニメーションをさせる考え方
デザインのテイストや世界観から自然に動きを想像できるようになることを目指します。
3D空間を演出するアニメーション
平面的なアニメーションから一歩進み、よりリッチに見せるための表現手法を身につけます。

Unityでの実践的なUI実装
迷いなくUIを実装できるよう、基礎からしっかり理解し、アニメーションを意識した効率的な実装力の習得を目指します。

ツールによる違いの再現方法
Adobe After Effectsで制作した動きをUnity上で再現するために必要な考え方を身につけます。
※上記の画像は講座に対する理解を深めるためのイメージです。
※講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。
- Section 01
自己紹介
1. プロフィール&仕事の実績紹介・この講座について- 自己紹介(3人) - 実績の紹介と制作のスタンスについて - 講座のオリエンテーション
- Section 02
制作の流れ
2. 制作の流れについて- 制作の流れについて~デザイン編、アニメーション編、Unity編~
3. 制作開始前の下準備- インストール
- Section 03
UIデザイン_基礎編
4.自己紹介(小林ゆに)- 経歴、作品紹介
5. UIデザインとは- UIデザインの基礎知識説明 - UIとUXの違い - UIデザイナーの役割と担当領域
6. 機能性としてのUIデザインの説明(認知、操作性)- 分かりやすい、使いやすいUIとは
7. 装飾としてのUIデザインの説明(世界観、体験強化)- ワクワクする、楽しませるUIとは
8. ツール説明(Illustrator、Photoshop、Figma)- ツールの役割の違い - ワークスペース構築、基本機能紹介
9. ツールに慣れるためのデザイン制作_例題(3つ)- リファレンス収集 - Photoshopのレイヤー効果 - ホーム画面で使う素材(ロゴ、背景)
- Section 04
UIデザイン_実践編
10. UIデザイン制作_作るものと制作フローの説明- 今回作るものの説明(ログインボーナス、獲得画面とホーム画面)
11. UIデザイン制作_世界観の設定- UIにおける世界観のアイデア出し、トンマナの作成
12. UIデザイン制作_ホーム画面 情報設計 ワイヤーフレーム- 情報設計の考え方 - コンポーネントのルール化
13. UIデザイン制作_ホーム画面 画面制作 UIパーツ制作- Photoshopの効果でリッチなUIにする方法 - IllustratorとPhotoshopでアイコン制作 - 素材書き出し
14. UIデザイン制作_ホーム画面 画面制作 Figmaで構築- 効率的なFigmaでのUI構築 - ガイドライン制作 - 実機確認 - エンジニアアニメーターと相談
15. UIデザイン制作_ログボ画面 情報設計 ワイヤーフレーム- 情報設計の考え方 - コンポーネントのルール化
16. UIデザイン制作_ログボ画面 画面制作 UIパーツ制作- Photoshopの効果でリッチなUIにする方法 - IllustratorとPhotoshopでアイコン制作 - 素材書き出し
17. UIデザイン制作_ログボ画面 画面制作 Figmaで構築- 効率的なFigmaでのUI構築 - ガイドライン制作 - 実機確認 - エンジニアアニメーターと相談
- Section 05
UIアニメーション_基礎編
18. 自己紹介(たかゆ)- 経歴、作品紹介
19, UIアニメーションとは- ゲームとしてのUIアニメーションの必要性について - 担当範囲_いつ参入してどういう立ち回りか - 魅力的なアニメーションとは - ユーザーが視認できるちょうど良いアニメーションの時間 - シームレスな体験設計 - ユーザビリティとインタラクション
20. ツール説明(AfterEffects)- なぜAfterEffectsを使用するのか - Vコンと実装の違い - AfterEffectsの画面と機能説明 - イージングについて
21. エフェクトを使ったリッチな演出_例題(3つ)- 実際に触りながら例題の作成 - マスク、親子関係、エフェクト、アニメーションの書き出し - なるべくリッチで魅力的なものにする
22. アニメーションを作り始める前の準備- 動きの想定をする - デザインのテイストにあったアニメーションを意識する - 負荷はどうするか - デザイナーと相談
- Section 06
UIアニメーション_実践編
23. アニメーション制作_ホーム画面- AIを使用したスクリプトを作って時短 - 素材書き出し - AfterEffects配置 - スクリプト制作 - 実作業 - 素材制作
24. アニメーション制作_ログインボーナス3Dの見せ方を意識したリッチなUIアニメーション - 素材書き出し - AfterEffects配置 - スクリプト制作 - 実作業 - 素材制作
25. アニメーション制作_獲得ダイアログシームレスな体験設計 - 素材書き出し - AfterEffects配置 - 実作業 - 素材制作
- Section 07
Unity_基礎編
26. ツール説明(Unity)と実装前に考えること- 自己紹介(かさね) - プロジェクトの作成 - Unityの説明 - シミュレーションモード - フォルダ構造 - 命名規則
27. Unityでの画像と文字の表示- SceneとCanvas - 画像のインポートと設定 - 画像の表示 - CanvasGroup - 通常、タイル、フィル - TMProのインポートと設定 - 色空間
28. Unityでの配置- Canvasの設定 - GUIでの配置 - RectTransform - LayoutGroup
29. UnityでのPrefab活用術- Prefabとは - Prefabの使い方とOverride - Prefabバリアント
30. シェーダーやコードをAIで作って入れてみる- DOTweenを簡単に動かすものを作ってみる - シェーダーを自作してみる - ユーザーの行動との紐付けたアニメーション
- Section 08
Unity_実装編
31. UI実装_ホーム、ログインボーナス- ホーム、ログインボーナスのUI実装を例に、実践的にUnityでの実装方法を学ぶ
- Section 09
Unity_アニメーション
32. Unityでのパーティクル- パーティクルとは - UI上でパーティクルを表示する場合
33. UnityでのホームUIアニメーション- アニメーションの付け方(Animation式) In,Loop,Out
34. UnityでのログインボーナスUIアニメーション- アニメーションの付け方(Animation式) In,Loop,Out
35. Unityでの獲得演出UIアニメーション- アニメーションの付け方(Animation式) In,Loop,Out
- Section 10
Unity_アニメーション
36. Unityアニメーション組み込み- ボタンインタラクションの紐付け - 完成系の動作確認
- Section 11
まとめ
37. まとめ- 講座のまとめ
当講座は、以下のツールを使用します。
[メインツール]
- Unity ver6000.3.11f1以降のLTSバージョン
- ChatGPT(その他LLMも使用可)
- Figma
- Photoshop
- Illustrator
- After Effects











