Coloso. | コロソ.

Search Input

プロ仕様のゲームUI制作:デザインから実装まで完全ガイド

ゲームUIクリエイターTakayu Studio
  • 受講可能


講座詳細

  • 受講可能
  • 入門~初級
  • 全37講
  • 日本語
  • -
  • 講義資料有り



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

講座内容
下記のような内容を学べます。
<p><strong>ゲームUIによる世界観の作り方 </strong></p>

ゲームUIによる世界観の作り方

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

<p><strong>ポップなグラフィック制作</strong></p>

ポップなグラフィック制作

デザインの基礎から学び、Adobe IllustratorやAdobe Photoshopを活用して、魅力的なグラフィックを制作します。

デザインに合わせたアニメーションをさせる考え方

デザインのテイストや世界観から自然に動きを想像できるようになることを目指します。

3D空間を演出するアニメーション

平面的なアニメーションから一歩進み、よりリッチに見せるための表現手法を身につけます。

<p><strong>Unityでの実践的なUI実装</strong></p>

Unityでの実践的なUI実装

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

<p><strong>ツールによる違いの再現方法 </strong></p>

ツールによる違いの再現方法

Adobe After Effectsで制作した動きをUnity上で再現するために必要な考え方を身につけます。

※上記の画像は講座に対する理解を深めるためのイメージです。

カリキュラム
カリキュラム内容のご紹介
※下記の画像は講座に対する理解を深めるためのイメージです。
※講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。
  • Section 01
    自己紹介
    curriculum-gameuicreator-takayustudio-jp-01.webp
    • 1. プロフィール&仕事の実績紹介・この講座について- 自己紹介(3人) - 実績の紹介と制作のスタンスについて - 講座のオリエンテーション

  • Section 02
    制作の流れ
    curriculum-gameuicreator-takayustudio-jp-02.webp
    • 2. 制作の流れについて- 制作の流れについて~デザイン編、アニメーション編、Unity編~

    • 3. 制作開始前の下準備- インストール

  • Section 03
    UIデザイン_基礎編
    curriculum-gameuicreator-takayustudio-jp-03.webp
    • 4.自己紹介(小林ゆに)- 経歴、作品紹介

    • 5. UIデザインとは- UIデザインの基礎知識説明 - UIとUXの違い - UIデザイナーの役割と担当領域

    • 6. 機能性としてのUIデザインの説明(認知、操作性)- 分かりやすい、使いやすいUIとは

    • 7. 装飾としてのUIデザインの説明(世界観、体験強化)- ワクワクする、楽しませるUIとは

    • 8. ツール説明(Illustrator、Photoshop、Figma)- ツールの役割の違い - ワークスペース構築、基本機能紹介

    • 9. ツールに慣れるためのデザイン制作_例題(3つ)- リファレンス収集 - Photoshopのレイヤー効果 - ホーム画面で使う素材(ロゴ、背景)

  • Section 04
    UIデザイン_実践編
    curriculum-gameuicreator-takayustudio-jp-04.webp
    • 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アニメーション_基礎編
    curriculum-gameuicreator-takayustudio-jp-05.webp
    • 18. 自己紹介(たかゆ)- 経歴、作品紹介

    • 19, UIアニメーションとは- ゲームとしてのUIアニメーションの必要性について - 担当範囲_いつ参入してどういう立ち回りか - 魅力的なアニメーションとは - ユーザーが視認できるちょうど良いアニメーションの時間 - シームレスな体験設計 - ユーザビリティとインタラクション

    • 20. ツール説明(AfterEffects)- なぜAfterEffectsを使用するのか - Vコンと実装の違い - AfterEffectsの画面と機能説明 - イージングについて

    • 21. エフェクトを使ったリッチな演出_例題(3つ)- 実際に触りながら例題の作成 - マスク、親子関係、エフェクト、アニメーションの書き出し - なるべくリッチで魅力的なものにする

    • 22. アニメーションを作り始める前の準備- 動きの想定をする - デザインのテイストにあったアニメーションを意識する - 負荷はどうするか - デザイナーと相談

  • Section 06
    UIアニメーション_実践編
    curriculum-gameuicreator-takayustudio-jp-06.webp
    • 23. アニメーション制作_ホーム画面- AIを使用したスクリプトを作って時短 - 素材書き出し - AfterEffects配置 - スクリプト制作 - 実作業 - 素材制作

    • 24. アニメーション制作_ログインボーナス3Dの見せ方を意識したリッチなUIアニメーション - 素材書き出し - AfterEffects配置 - スクリプト制作 - 実作業 - 素材制作

    • 25. アニメーション制作_獲得ダイアログシームレスな体験設計 - 素材書き出し - AfterEffects配置 - 実作業 - 素材制作

  • Section 07
    Unity_基礎編
    curriculum-gameuicreator-takayustudio-jp-07.webp
    • 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_実装編
    curriculum-gameuicreator-takayustudio-jp-08.webp
    • 31. UI実装_ホーム、ログインボーナス- ホーム、ログインボーナスのUI実装を例に、実践的にUnityでの実装方法を学ぶ

  • Section 09
    Unity_アニメーション
    curriculum-gameuicreator-takayustudio-jp-09.webp
    • 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_アニメーション
    curriculum-gameuicreator-takayustudio-jp-10.webp
    • 36. Unityアニメーション組み込み- ボタンインタラクションの紐付け - 完成系の動作確認

  • Section 11
    まとめ
    curriculum-gameuicreator-takayustudio-jp-11.webp
    • 37. まとめ- 講座のまとめ

講座に必要な準備物

当講座は、以下のツールを使用します。
[メインツール]

- Unity ver6000.3.11f1以降のLTSバージョン
- ChatGPT(その他LLMも使用可)
- Figma
- Photoshop
- Illustrator
- After Effects

gameuicreator-takayustudio-jp-1.webp
gameuicreator-takayustudio-jp-2.webp
gameuicreator-takayustudio-jp-3.webp
gameuicreator-takayustudio-jp-4.webp
gameuicreator-takayustudio-jp-5.webp
gameuicreator-takayustudio-jp-6.webp

ご注意事項

* 詳細ページ内の一部画像は講座に対する理解を深めるためのイメージです。 * 本商品はVOD動画形式の講座を提供するオンライン講座です。(アセット商品は除く) * 割引は状況により事前の告知なく終了、延長されることがございます。 * 事前予約講座の場合、講義映像は公開日程に応じて順次製作および公開され、1次映像公開日が受講開始日となります。 * 決済が完了されますと、マイ講義室を通じてご受講いただけます。 総学習期間: – 最初の10日間は正常受講期間(有料受講期間と同様)で、無料受講期間は11日から以降無制限であり、有料受講期間と無料受講期間とも同様にご視聴いただけます。 – 受講開始日: 受講開始日は決済日から期間が算定され、決済を完了するとマイ講義室からご受講いただけます。(事前予約講座は1次映像公開日が受講開始日となります) – 弊社の都合で受講開始が遅れた場合は、その日程分の受講開始日が延期されます。
*受講、例題使用範囲などの知的財産権、機器台数制限に関する情報は▶FAQ 欄でご確認ください。 *講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。
*本ページ上の情報は弊社の都合により事前の告知なく変更、終了することがございます。予めご了承ください。 *講座の返金規定はColosoの返金ポリシーに準じます。 ▶ 返金ポリシーはこちら
- アセット商品の転売、再配布、盗用、譲渡等は厳しく禁じられています。 - アセット商品から抽出されたイメージやアセット商品を修正および再加工したイメージの譲渡や配布、販売は厳しく禁じられています。 - 購入と同時にご利用可能なアセット商品は購入後、ダウンロード有無に関わらずキャンセル不可となります。 - 事前予約アセット商品は、アセット公開前まではキャンセル可能となります。 - アセット商品は決済完了後、「マイ講義室」→「受講する」→「講義資料」でご確認いただけます。