ゲームUIをデザインから実装まで
UIデザイン、After Effectsによるアニメーション、Unity実装。37講で一つの制作フローとして学びます。
すでに受講中の方：制作リソースを見る- 全37講
- 入門〜初級
- 日本語
- 期間制限なし
- 講義資料付き
日本版は全37講公開中
- 1次公開1〜17講
- 2次公開18〜37講
THE WORK YOU WILL MAKE
まず完成形を
見てください
この講座でつくるのは、文字を読むだけの課題ではありません。ホーム画面とログインボーナスを、画面設計・動き・実装まで一つの作品として仕上げます。
実際につくるもの 02
ログインボーナスを
気持ちよく受け取る演出へ
報酬が届く瞬間の視線誘導、光、タイミングを組み立てて、プレイヤーの「もう一度見たい」を設計します。
PRACTICE OUTPUTS
練習用の
小さなアウトプット
講座の考え方を使って、モーション・演出・レイアウトの引き出しを増やします。
制作フロー
デザインからアニメーション、Unity実装までを一つの流れで体系的に学びます。
- 01
UIデザイン
情報設計から画面レイアウト、ビジュアルの方向性までを組み立てます。
- 02
アニメーション
（After Effects）UIに適した動きや演出を設計し、モーションを制作します。
- 03
Unity実装
アニメーションとUIを連携させ、ゲーム画面へ実装します。
- 04
調整・仕上げ
動作を確認しながら調整し、UI演出としての品質を高めます。
購入・割引・公開情報はColoso公式ページでご確認ください。
受講前に準備するもの
講座ではデザイン、アニメーション、実装、AI活用までを扱います。円滑に進めるため、使用するソフトウェアを事前に確認してください。
- IMPLEMENTUnity
6000.3.11f1以降のLTSバージョン
- AI SUPPORTChatGPT
その他のLLMも使用できます
- UI DESIGNFigma
画面設計・UI構築
- GRAPHICSPhotoshop
画像編集・UI素材制作
- VECTORIllustrator
ベクター素材・アイコン制作
- MOTIONAfter Effects
UIアニメーション・演出制作
各ソフトウェアは別途購入・インストールが必要です。対応バージョンや最新条件はColoso公式ページをご確認ください。
必要環境を公式で確認 →制作して持ち帰れるもの
視聴だけで終わらず、2つの作品を完成させながら、デザイン・アニメーション・Unity実装の制作データを手元に残します。
- 01 / WORKS
2つの完成作品
ホーム画面とログインボーナスを題材に、世界観設計から動き、実装までを一つの流れで仕上げます。
- 02 / SOURCE
実制作データ
PSD、AEP、Illustrator、Unityなど、講座で扱う完成作品の各種データを確認できます。
- 03 / TOOLS
効率化に使える資料
Unityのパッケージデータや、After Effects用スクリプト「Grupico」などが講義資料に含まれます。
資料の内容・提供条件・公開状況はColoso公式ページの最新情報をご確認ください。
3つの専門領域を3人の講師から
Takayu Studioは、UIデザイン、UIアニメーション、Unity実装をそれぞれ担当する3人で構成されています。書籍出版、コンテスト最優秀賞、新規タイトル開発などの経験を、一つの制作フローとして共有します。
- 01 / UI DESIGN
小林ゆに
情報設計、世界観づくり、Figma・Photoshop・Illustratorを使った画面制作を担当します。
- 02 / UI ANIMATION
たかゆ
After EffectsによるUIモーション、演出設計、制作を効率化する考え方を担当します。
- 03 / UNITY IMPLEMENTATION
カサネ
デザインと動きの意図を保ったUnity実装、UIアニメーションの再現、AI活用を担当します。
講師構成・カリキュラム・販売条件の最新情報はColoso公式ページで確認できます。
こんな方におすすめ
- 01
ゲームUIのポートフォリオを作りたい方
静止画だけでは伝わりにくい、プレイ体験を支えるUI制作の流れを学びます。
- 02
UIモーションの理由とタイミングを学びたい方
見た目だけでなく、情報伝達やフィードバックのための動きを設計します。
- 03
デザイン意図をUnity実装までつなげたい方
デザイン、アニメーション、実装を同じ視点で扱う制作工程を確認します。
よくある質問
01どんな内容を学べますか？
ゲームUIのデザイン、After Effectsによるアニメーション、Unityでの実装までを一つの制作フローとして学びます。
02講座は何講ありますか？
全37講です。講義資料も付属します。
03購入や割引について確認できますか？
最新の価格、割引、販売条件はColoso公式ページでご確認ください。
04韓国版はありますか？
韓国向けの公式講座ページも公開されています。TakayuStudioには韓国語の案内ページがあります。
ゲームUI制作の全工程を一つの講座で
受講後の制作をもっと進める
講座で学んだデザイン・モーション制作を実務へつなげるための補助リソースです。講座の付属資料とは別の、任意で使える別売ツール・素材と無料ツールを紹介します。
Figma to After Effects Exporter
Figmaの画面を、レイヤー構造と配置情報を保ちながらAfter Effectsへ再構成します。
- フレーム・グループをZIPで書き出し
- 位置・サイズ・回転・不透明度を反映
- After Effectsコンポを自動作成
UI Effect Ideas 100
UI演出の発想を広げたい時に参照できる、After Effectsの演出アイデア集です。
- After Effects 2023用AEP・MP4
- 追加プラグイン不要
- 無料PNGサンプルあり
TextureCreate
50種類以上のパターンから、ゲームUI向けのテクスチャをブラウザ上で作れます。
無料 ツールを開く →BOOTHへ移動する前に
購入内容を詳しく確認する
講座の付属資料ではない別売商品です。現在のBOOTH商品ページに掲載されている主な内容を、購入前に確認できます。Figma to After Effects Exporter¥1,900・詳細を見る
何ができますか？
Figmaフレーム内のテキスト・図形・画像・背景をレイヤー別PNGと位置情報で書き出し、After Effects上でコンポジションとして再構成します。
- Figmaで対象フレームを選択してZIPを書き出し
- ZIPを展開してAEで
import-from-figma.jsxを実行 manifest.jsonを選択してAEコンポを自動作成- 位置・サイズ・回転・不透明度と背景の塗りを反映
UI Effect Ideas 100¥3,500・詳細を見る
何が含まれますか？
ゲームUI演出向けのテクスチャアイデアを、形を調整しやすいシェイプとAfter Effects標準エフェクトで制作した素材集です。
- 512×512で制作したUIエフェクトアイデア
- After Effects 2023用AEPとMP4を収録
- 追加プラグイン不要・標準エフェクトのみ使用
- 1.14MBの無料PNGサンプルで購入前に確認可能
利用条件：1ユーザーにつき1点の購入が必要です。自作発言、素材としての有料配布・再配布、購入者以外への共有は禁止されています。
無料サンプル・¥3,500の商品を見る各商品の内容・価格・利用条件は、リンク先の最新情報をご確認ください。