Search Input

基礎から始めるゲームUIデザイン制作

ゲームUIデザイナー はなさくの‌
‌
‌
‌
‌

講座詳細

‌
‌
‌

ゲームUIデザイナー,はなさくの_하나사쿠노 Details

講座紹介

トレーラー
ゲームUIデザイナー
はなさくの

基礎知識からゲーム画面の制作まで
ゲームUIデザイン制作の入門講座

Coloso はなさくの 基礎から始めるゲームUIデザイン制作

今回の講座では、
ゲームUIデザイナーのはなさくのが
ゲーム画面の設計図となる
ワイヤーフレームの制作から
各画面を構成するUIパーツの制作まで
６種類のゲーム画面制作を通して
ゲームUIデザイン制作の秘訣を伝授します。

まず、ゲームUIデザインの基礎知識や
制作の一連の流れなど、
ゲームUIデザイナーの業務フローを紹介。
また、制作に使用する
Photoshop、Illustratorといった
ツールの基本操作方法から、
スムーズに制作するための
便利な機能までレクチャーします。

次に、ゲーム画面の設計図となる
ワイヤーフレームを制作するための
スキルを習得。
パズルゲームのスタート画面や
ローディング画面、パズル画面など、
６つの画面のデザイン制作に挑戦します。

そして、各ゲーム画面に必要な
細かなアイコンなどの
UIパーツを制作するためのスキルを
初心者にも分かりやすく解説。
フォントや色の選び方、
レイアウトの作り方など、
ゲームの世界観に合った
デザインを作るコツを
段階的に身に付けます。

ゲームUIデザイン制作の基礎から
使いやすくわかりやすい
ゲームUIデザインを制作するノウハウまで
Colosoで体験してください！

Coloso 講座特徴1
講座情報

本数：30本の映像
難易度：入門～中級
無期限視聴

Coloso 講座特徴2
使用プログラム

[メインツール]
Photoshop

[サブツール]
Illustrator

※各ソフトウェアは、以下のバージョン以上の使用を推奨します。
- Photoshop：2022以上
- Illustrator：2022以上

Coloso 講座特徴3
動画情報

オンラインVOD
オーディオ：日本語

Coloso 講座特徴4
講座特典

作品数：６点
課題で制作したゲーム画面のPSDファイル（17点）
課題で制作したUIパーツのAIファイル（１点）
課題制作で使用する背景やキャラ素材（11点）

使いやすくわかりやすい
統一感のあるUIデザインを手掛ける
はなさくののポートフォリオ

  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作
  • Coloso はなさくの 基礎から始めるゲームUIデザイン制作

６種類のゲーム画面制作を通して
使いやすさを追求したUIデザイン制作の
スキルを身に付けます

はなさくの 講座例題

ゲームUIデザイン基礎

はなさくの 講座例題

使用ツールの基本操作

はなさくの 講座例題

ゲームスタート画面

はなさくの 講座例題

ローディング画面

はなさくの 講座例題

パズル画面

はなさくの 講座例題

リザルト画面

はなさくの 講座例題

ショップ画面

はなさくの 講座例題

ギフトボックス画面

講師紹介

はなさくの
ゲームUIデザイナー


はじめまして。はなさくのです。
ゲーム会社で５年半ほど
UIデザイナーとして働き、
現在は独立して、ゲームに関わる
デザイン全般のお仕事をしています。
私の経歴は少し変わっていて、
エンジニア > Flasher > Webデザイナー
> ゲームUIデザイナー > 独立
というようにジョブチェンジをしてきました。

その中でも、ゲームUIデザインが一番楽しく
自分にはとても合っていることに気づいて以来、
ゲームに関連するデザインを
数多く作成してきました。

独立前は大手ゲーム会社に勤めていたため、
プロジェクトの規模が大きく、
数年かけてリリースするという
経験もしてきました。
独立後も長期のプロジェクトにも関わりつつ、
小規模のカジュアルゲームの
UIデザインも数多く手掛けています。

また、ゲームUIデザインに
関連するセミナーに登壇したり、
SNSやYouTube、ブログなどで
積極的に情報発信したりなど、
UIデザインの魅力に気づいてもらえるように
活動しています。

パッと見たときに
「華やかで楽しげなデザイン」を目指して、
今後もクリエイティブな活動を
継続していきたいと思っています。
どうぞよろしくお願いします。

背景イメージ
Coloso はなさくの
はなさくの

現) ゲームUIデザイナー


【経歴】
エンジニア、Flasher、Webデザイナーを経て、ゲームUIデザイナーになり、その後独立。
スマートフォンゲームのUIデザインをメインで担当。

Twitter
講座のポイント

この講座のポイント

ユーザビリティを重視したUI設計

一貫性や可読性、目的の明確さ、そしてアクセシビリティ、演出といった、UIデザインの基礎知識を習得。使いやすくわかりやすいUIデザインを設計するためのコツを身に付けることができます。

Coloso はなさくの 講座のポイント

ゲームのコンセプトに沿ったデザイン制作のコツ

ゲームの世界観やコンセプトに合わせて、UIデザインを制作するためのポイントを紹介。色やフォントの選び方、レイアウトの仕方、装飾パーツの作り方など、初心者の方にも分かりやすいように、段階的に解説していきます。

Coloso はなさくの 講座のポイント

統一感のあるUIデザイン制作とレギュレーション化の手法

ゲームの世界観を活かして統一感のあるUIデザインを制作するためのコツと、デザインをルール化して汎用性が高いUIパーツを作成するための手法をお伝えします。

Coloso はなさくの 講座のポイント

講座内容
下記のような内容を
学べます。

  • Coloso 視覚デザイン 講座内容
    ゲーム制作の流れや
    UIデザイナーとして必要なスキル
    ゲーム制作の流れを確認し、その中でゲームUIデザイナーが担当すべき範囲や現場で求められる役割について紹介します。その際に必要となるゲームやツールの知識、技術や経験、コミュニケーションスキルなどについて詳しくお伝えします。
  • Coloso 視覚デザイン 講座内容
    ゲームUIデザインの基礎知識

    可読性、アクセシビリティ、演出といった、ゲームUIデザインの基礎知識をお伝えします。特に、本講座ではスマートフォンゲームを対象としているため、そこで気をつけるべきポイントについても詳しく解説します。
  • Coloso 視覚デザイン 講座内容
    UIデザイン制作に必要なツール
    「Photoshop」「Illustrator」を習得
    ゲームUIデザインを作成する時は、Photoshopをメインツールとして使用し、細かなアイコンなどのUIパーツを制作する時には、Illustratorも活用します。そのため、これらのツールの使い方や便利な機能について基本からお教えし、作業スピードをアップするためのショートカットキーの設定についても紹介します。
  • Coloso 視覚デザイン 講座内容
    デザインの設計図であるワイヤーフレームの作成
    ゲーム画面を制作する時は、仕様書を確認し、要件に合った情報が表示されているかや、UIパーツの大きさや位置に問題はないか、そして視認性は担保されているか、操作しやすいかなどの基本部分を確認する必要があります。そのために必要な、画面の設計図とも言えるワイヤーフレームの制作方法を身に付けます。
  • Coloso 視覚デザイン 講座内容
    ゲームの世界観を重視したUIデザイン制作
    ゲームの世界観や雰囲気、楽しさをゲームのプレイヤーに伝えることを重視しながら、使いやすく分かりやすいUIデザインを作成する方法を習得します。
  • Coloso 視覚デザイン 講座内容
    一貫性と統一感のあるデザイン制作
    一貫性があり、統一感のあるUIデザインを制作するためのルール化や、レギュレーション資料の作り方を紹介します。また、フォントや色の選び方やレイアウトの組み方についても詳しく説明します。


(자동 구성) 가격이 인상됩니다.

지금이 최저가!
カリキュラム

カリキュラム
カリキュラム内容の
ご紹介

SECTION01. イントロダクション

01. 自己紹介

  1. 経歴とお仕事内容
  2. Twitter/YouTube/Blogでの活動内容
  3. ポートフォリオ紹介

02. 講座の進め方

  1. 講座の流れと学びのポイントについて
  2. 提供資料やデータ取り扱いの注意点について
SECTION02. ゲームUIデザイン基礎

03. ゲームUIデザイナーの仕事内容

  1. ゲーム制作の流れ
  2. ゲームUIデザイナーの担当範囲
  3. ゲームUIデザイナーの役割
  4. ゲームUIデザイナーに必要なスキル

04. ゲームUIデザイン制作の流れ

  1. ゲームUIデザイン制作の流れ
    - 仕様書確認
    - ワイヤーフレーム作成
    - UIデザイン作成（画像書き出し含む）
    - 演出作成
    - 実装
    - テスト

05. ゲームUIデザインの基礎知識と基本設計

  1. ゲームUIデザインの基本知識
  2. スマートフォンゲームのUIデザイン制作で気をつけるべきこと
  3. ゲームUIデザインの基本設計とガイドライン作成
SECTION03. 使用ツール（Photoshop/Illustrator/Adobe Fonts）

06. Photoshopの基本とゲームUIデザインでよく使う機能紹介

  1. 基本ツール紹介
  2. Photoshopの各種設定
  3. ショートカットキー設定
  4. レイヤースタイル
  5. 描画モード
  6. スマートオブジェクト
  7. レイヤーカンプ
  8. リンクファイル
  9. 画像アセット生成
  10. 便利な機能/操作

07. Illustratorの基本的な使い方

  1. 基本ツール紹介
  2. Illustratorの各種設定
  3. 使用頻度が高いツール群
  4. 便利なショートカットキー
  5. 便利な機能/操作
  6. IllustratorからPhotoshopへデータを読み込む方法

08. Adobe Fontsの紹介と使い方

  1. 商用可能で無料で使えるAdobeフォントとは
  2. 欲しいフォントの探し方とダウンロード方法
  3. 課題で使用するフォントをダウンロード
SECTION04. ゲーム仕様に基づいたワイヤーフレーム制作

09. 制作するゲーム企画・世界観の詳細と課題のご紹介

  1. ゲームの企画と世界観について
  2. ゲームUIデザインの課題内容について

10. 仕様に基づいたワイヤーフレーム制作（ゲームスタート画面）

  1. ワイヤーフレームとは
  2. デザイン制作時の画面解像度について
  3. ゲームスタート画面のワイヤーフレーム作成

11. ローディング画面のワイヤーフレーム作成

  1. ローディング画面のワイヤーフレーム作成

12. パズル画面のワイヤーフレーム作成

  1. パズル画面のワイヤーフレーム作成

13. リザルト画面のワイヤーフレーム作成

  1. リザルト画面のワイヤーフレーム作成

14. ショップ画面のワイヤーフレーム作成

  1. ショップ画面のワイヤーフレーム作成

15. ギフトボックス画面のワイヤーフレーム作成

  1. ギフトボックス画面のワイヤーフレーム作成
SECTION05. インゲーム（パズル）画面制作

16. ヘッダー部分のUIパーツ制作

  1. 素材（キャラ/背景/食べ物）を確認
  2. フォントの選び方
  3. ステージ情報（ステージ6）を作成
  4. MOVE数（ピース移動可能数）を作成
  5. お題（消去すべきピース）と数量を作成
  6. スコアタイトルと数値を作成
  7. ミッション達成ゲージを作成
  8. 一時停止ボタンを作成

17. メイン（パズル）部分のUIパーツ制作

  1. パズルのピースを配置し、フレームを作成
  2. ピース消去エフェクトの作成
  3. 評価装飾文字「GOOD」の作成

18. フッター部分のUIパーツ制作

  1. スペシャルスキル発動ゲージを作成
  2. 使用可能なアイテム枠を作成
SECTION06. リザルト画面制作

19. クリアやスコアの文字デザイン制作

  1. キャラとピースアイコンの配置と賑やかし用フラッグイラストの作成
  2. 評価スターアイコンの配置と装飾文字「STAGE CLEAR」の作成
  3. スコアタイトルと数値の作成

20. リワード情報表示や各種ボタン制作

  1. REWARDタイトルとリボンフレームの作成
  2. 入手アイテムと個数を配置し、REWARDフレームを作成
  3. HOME（ホーム）ボタンを作成
  4. RETRY（リトライ）ボタンを作成
  5. NEXT（次へ）ボタンを作成
SECTION07. ゲームスタート画面制作

21. 基本ダイアログ制作

  1. ダイアログのフレーム作成
  2. 閉じるボタン作成
  3. スタートボタン作成

22. ダイアログ内のUIパーツ制作

  1. ★型の評価アイコンの作成
  2. ミッションタイトルと説明テキストの作成
  3. キャラとお題のフキダシを作成
  4. アイテム枠と説明文の作成

23. ヘッダー部分の制作

  1. ライフアイコンの作成
  2. コインアイコンの作成
  3. ジェムアイコンの作成
  4. ヘッダーフレームと購入ボタンの作成
  5. メニューボタンの作成
SECTION08. ローディング画面制作

24. ローディングのUIパーツ制作

  1. ローディング背景とパターンの作成
  2. TIPSタイトルフレームとタイトルの作成
  3. TIPSバナーの説明テキストの作成
  4. TIPSバナーの作成
  5. LOADINGアイコンとタイトルの作成
SECTION09. ショップ画面制作

25. ショップヘッダーとフッターの各種ボタン制作

  1. ショップ背景の作成
  2. ショップタイトルフレームとタイトルの作成
  3. ショップタブ（ハート/コイン/ジェム）とフレームの作成
  4. 各種ボタン（戻る/資金決済法に基づく表示/特定商取引法の表記）
  5. スクロールバーの作成

26. 商品情報リストの制作

  1. 商品情報リスト（商品画像/個数/金額/購入ボタン）の作成
SECTION10. ギフトボックス画面制作

27. 汎用UIの配置とタブボタン＆フレーム制作

  1. 汎用UIを配置
  2. ギフトタイトルフレームとタイトルの作成
  3. タブボタン（ギフト/履歴）とフレームの作成
  4. 一括受取ボタンの作成
  5. 注意書きの作成

28. ギフト情報リスト制作

  1. ギフト情報リスト（ギフト画像/ギフト個数/ギフトタイトル/ギフト詳細/受取ボタン/受取期限）の作成
SECTION11. ゲームUIデザイン制作のまとめ

29. ゲームUIデザインの学習方法とスキルアップ方法

  1. ゲームUIデザインの学習方法
  2. スキルアップ方法

30. 講座のまとめ

  1. 制作の振り返り
  2. ゲームUIデザインのトレンドと未来
  3. 最後のあいさつ

*講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。

インタビュー
ゲームUIデザイナー
はなさくのが
お話ししたいこと

背景イメージ
Question.01
該当の分野を勉強している方が一番難しく感じている点と、この講座を通してその点をどの様に解決できるでしょうか？


ゲームUIデザインの知識や作り方について詳しく解説している書籍やサイト、動画などは現状少ないと考えています。今回の講座では、ゲーム開発現場に近い形の制作方法をお伝えしています。実際に、課題をこなすことで、UIデザインの制作フローについて学ぶことができます。また、作り方だけではなく、UIデザインを制作する上でのポイントや、考え方についても詳しく解説していますので、幅広く応用できるかと思います。
Question.02
ゲームUIデザインを企画するにあたって、大切なポイントは何になりますか？


ゲームUIデザインを制作する上で大切なポイントは、ゲームの楽しさを伝えることだと思います。WebデザインやアプリのUIデザインと同様に、使いやすさや分かりやすさ、一貫性といった基本部分はもちろん、ゲームは遊びを提供するエンタメ要素が強いため、それにプラスして、楽しさやワクワク感を提供することが重要です。そのために、どういったレイアウトで装飾を施すか、ちょっとした遊び要素を加えてはどうかといった工夫をしていくことが重要だと思います。
Question.03
講師さまご自身は、勉強してきた中で難しかった部分、それを解決するためにどのような努力をされてきましたか？


初めは既存のUIデザインを模写することで、同じ画面を制作できるようになりましたが、オリジナルデザインを作成する際に手が止まったり、うまく表現できないといった時期が続きました。ベースのデザインがある状態で、他の画面を量産することは、慣れれば問題なくできると思います。しかし、そのベース部分のデザインを一から自分で作成することは、難易度が高いと感じるかもしれません。それを解決するためには、日々のインプットとアウトプットが大切だと気付き、ゲームを実際にプレイしてスクリーンショットをとり、カテゴリ分けをしてコレクションすることを習慣化し、個人で制作した作品をSNSで公開することを繰り返していました。
Question.04
講師さまがお考えになる、UIデザイン分野においての市場性、展望についてお話しください。


ゲーム業界では、UIデザイナーの需要が高く、常に現場で必要とされています。特にスマートフォンゲームでは、１つのゲーム内で使用する画面数が多く、複数人でUIデザインを制作することも多々あります。こういった背景から、UIデザインができる人材は重宝されると思います。グラフィック部分だけでなく、UI設計や体験などのUX部分も総合的に考えられるデザイナーであれば、ゲーム業界の枠にとらわれず、どの分野でも活躍できると信じています。

使用プログラムについて
ご案内します。

使用プログラムについてご案内します。
当講座は、以下のツールを使用します。

[メインツール]
Photoshop

[サブツール]
Illustrator

※各ソフトウェアは、以下のバージョン以上の使用を推奨します。
- Photoshop：2022以上
- Illustrator：2022以上

Photoshop Illustrator
おすすめの講座

おすすめの講座
この講座を見た方は
こちらもチェック！

ご注意事項

 *本ページ上の情報は弊社の都合により事前の告知なく変更、終了することがございます。予めご了承ください。
*講座の返金規定はColosoの返金ポリシーに準じます。▶ 返金ポリシーはこちら
* 受講、例題使用範囲などの知的財産権、機器台数制限に関する情報はFAQ 欄でご確認ください。