ゲームUIデザインレシピ
ゲームUIデザインレシピ
  • 48
  • 103 074
デザインでは泣けない
デザインに関する雑談をします。ラジオ的な感じで聞いていただけると嬉しいです。
📃Noteマガジン発売中!
---------------------------------------------------
ゲームUIデザインに関連する情報や、「Photoshop」や「AfterEffects」で作成したオリジナルデータを公開しています。
Noteマガジン購読を開始した月以降の記事から、毎月2-4本の有料記事を500円でオトクに入手できます。
note.com/hanasakuno/m/mfd5fc1dffacb
📃プロフィール紹介
---------------------------------------------------
🔹はなさくの
ゲームUIデザイナーです。5年半ほどゲーム会社でUIデザイナーとして働き、その後に独立してゲームUIデザインやバナー、動画、イラスト制作などのお仕事をしています。
📃SNSアカウント
---------------------------------------------------
X(Twitter): HanaSakuno
Instagram: hanasakuno
ブログ:hanasaqutto.com/
無料素材:stockmaterial.net/
📃お問い合わせ
---------------------------------------------------
support@2clue.net
#ゲームUIデザイン #デザイン講座
มุมมอง: 619

วีดีโอ

【Illustrator】レトロゲーム風のドット絵に加工する方法
มุมมอง 5782 หลายเดือนก่อน
写真やイラストを、Adobe Illustratorを使用して、レトロゲーム風のドット絵に加工する方法をご紹介します。 📃Noteマガジン発売中! ゲームUIデザインに関連する情報や、「Photoshop」や「AfterEffects」で作成したオリジナルデータを公開しています。 Noteマガジン購読を開始した月以降の記事から、毎月2-4本の有料記事を500円でオトクに入手できます。 note.com/hanasakuno/m/mfd5fc1dffacb 📃プロフィール紹介 🔹はなさくの ゲームUIデザイナーです。5年半ほどゲーム会社でUIデザイナーとして働き、その後に独立してゲームUIデザインやバナー、動画、イラスト制作などのお仕事をしています。 📃SNSアカウント X(Twitter): HanaSakuno Instagram: ...
【Figma】オートレイアウトで可変ボタンを作ろう!
มุมมอง 5012 หลายเดือนก่อน
WEBデザインツール「Figma(フィグマ)」のオートレイアウトという機能を活用して、文字サイズに応じて自動で横に伸びるボタンを作る方法を解説しています。Figmaは無料でも使用できますので、ぜひお試しください。デザイン初心者の方でも使いやすいので、オススメです。 🎬こちらの動画もチェック! FigmaでゲームUIデザインを作ろう th-cam.com/video/3SiVA15Tji8/w-d-xo.html 📃Noteマガジン発売中! ゲームUIデザインに関連する情報や、「Photoshop」や「AfterEffects」で作成したオリジナルデータを公開しています。 Noteマガジン購読を開始した月以降の記事から、毎月2-4本の有料記事を500円でオトクに入手できます。 note.com/hanasakuno/m/mfd5fc1dffacb 📃プロフィール紹介 🔹はなさくの ゲー...
FigmaでゲームUIデザインを作ろう
มุมมอง 2.3K2 หลายเดือนก่อน
WEBデザインツール「Figma(フィグマ)」を使用して、ゲームUIデザインを作る方法を解説しています。基本から便利機能まで、ゲームUIを作るのに役立ちそうな機能を一気にご紹介!Figmaは無料でも使用できますので、ぜひお試しください。デザイン初心者の方でも使いやすいので、オススメです。 📃Noteマガジン発売中! ゲームUIデザインに関連する情報や、「Photoshop」や「AfterEffects」で作成したオリジナルデータを公開しています。 Noteマガジン購読を開始した月以降の記事から、毎月2-4本の有料記事を500円でオトクに入手できます。 note.com/hanasakuno/m/mfd5fc1dffacb 📃プロフィール紹介 🔹はなさくの ゲームUIデザイナーです。5年半ほどゲーム会社でUIデザイナーとして働き、その後に独立してゲームUIデザインやバナー、動画、イラス...
【Coloso】基礎から始めるゲームUIデザイン制作講座の予約開始!
มุมมอง 1.9Kปีที่แล้ว
【Coloso】基礎から始めるゲームUIデザイン制作講座の予約開始!
【Midjourney】AIで作ったゲームUIを修正してみた
มุมมอง 3.2K2 ปีที่แล้ว
【Midjourney】AIで作ったゲームUIを修正してみた
3秒でテキスト分割!Photoshop【神】スクリプト
มุมมอง 2.6K2 ปีที่แล้ว
3秒でテキスト分割!Photoshop【神】スクリプト
ゲームUIデザイナーに必要なスキルとは?
มุมมอง 2.5K2 ปีที่แล้ว
ゲームUIデザイナーに必要なスキルとは?
やってはいけない!ゲームUIデザイン3選
มุมมอง 9K2 ปีที่แล้ว
やってはいけない!ゲームUIデザイン3選
【時短テクニック】フォント検索ツール3選
มุมมอง 5K2 ปีที่แล้ว
【時短テクニック】フォント検索ツール3選
ゲームUI制作で役立つ!Photoshop便利機能3選【ゲームUIデザイン講座】
มุมมอง 3.5K2 ปีที่แล้ว
ゲームUI制作で役立つ!Photoshop便利機能3選【ゲームUIデザイン講座】
ログインボーナスって必要?
มุมมอง 7092 ปีที่แล้ว
ログインボーナスって必要?
ワクワクするゲーム画面の作り方
มุมมอง 2.2K2 ปีที่แล้ว
ワクワクするゲーム画面の作り方
HPゲージは何色が正解?【ゲームUIデザイン講座】
มุมมอง 2K2 ปีที่แล้ว
HPゲージは何色が正解?【ゲームUIデザイン講座】
インゲームのWave表現【ゲームUIデザイン講座】
มุมมอง 1.8K2 ปีที่แล้ว
インゲームのWave表現【ゲームUIデザイン講座】
ゲームUIデザイン添削
มุมมอง 6K2 ปีที่แล้ว
ゲームUIデザイン添削
Photoshopで3D文字を作る方法
มุมมอง 10K2 ปีที่แล้ว
Photoshopで3D文字を作る方法
Photoshopで簡単にカラバリを作る方法3選
มุมมอง 1.2K3 ปีที่แล้ว
Photoshopで簡単にカラバリを作る方法3選
デザイナーに使って欲しい!After Effectsの驚きの使い方
มุมมอง 2.1K3 ปีที่แล้ว
デザイナーに使って欲しい!After Effectsの驚きの使い方
最強の画像管理ツールEagle【究極の時短ツール】
มุมมอง 18K3 ปีที่แล้ว
最強の画像管理ツールEagle【究極の時短ツール】
ゲーム開発で使えるAdobe XD活用術(ワイヤーフレームからデザイン作成、データ管理まで)
มุมมอง 4.6K3 ปีที่แล้ว
ゲーム開発で使えるAdobe XD活用術(ワイヤーフレームからデザイン作成、データ管理まで)
UIデザインの最強ツール!XDでゲーム風チュートリアル作ってみた
มุมมอง 5K3 ปีที่แล้ว
UIデザインの最強ツール!XDでゲーム風チュートリアル作ってみた
パワーポイントで「乃木坂的フラクタル」のゲーム画面を作ってみた
มุมมอง 3K3 ปีที่แล้ว
パワーポイントで「乃木坂的フラクタル」のゲーム画面を作ってみた

ความคิดเห็น

  • @wachime
    @wachime 4 วันที่ผ่านมา

    こういう演出をUnityで作成したい... けど本当にどうすればいいかわからない Animatorだけで実現できるものなのか、Shaderを書くところからなのか。

  • @AK-nn3fb
    @AK-nn3fb 29 วันที่ผ่านมา

    大変分かりやすい動画をありがとうございます。参考にさせて頂きます。 ひとつ質問があります。 UIデザイナー志望の学生が作るポートフォリオに、UI画面をスマートファンの画面にくっつけてスマホのコマーシャルのようなビジュアルを作っているのをよく見ます。 あれはどのようにして作っているのでしょうか? せっかく作品を作ったのにポートフォリオでのビジュアル制作が出来ず困っています。 よろしければご教授いただけると幸いです。

    • @gameuiux
      @gameuiux 28 วันที่ผ่านมา

      コメントありがとうございます! 作ったUI画面をスマホやPCのフレームに当てはめて、きれいなビジュアルを作りたいという感じでしょうか。 調べてみたのですが、Figmaではモックアップを作成できる便利なプラグインがいくつかあり、その中でも私は「Mockup Plugin」というのが使いやすいと感じました。 このプラグインは、一部有料もありますが、モックアップ用のフレームで無料で使用できるものもあるので、その中から選んでも良さそうです。

    • @AK-nn3fb
      @AK-nn3fb 28 วันที่ผ่านมา

      @ 迅速なご回答をいただきありがとうございます。 なるほど、モックアップという言葉を初めて知りました!調べたところそちらの機能で間違いなさそうです。 figmaでも出来るのですね。有料版に入る予定なので早速試してみます。 本当にありがとうございます!!大変助かりました。 今後も素敵な動画を楽しみにしています。

  • @TrueRyoB
    @TrueRyoB หลายเดือนก่อน

    めっちゃ添削丁寧で尊敬

  • @TrueRyoB
    @TrueRyoB หลายเดือนก่อน

    視線の流れとかも、すごい...

  • @TrueRyoB
    @TrueRyoB หลายเดือนก่อน

    戻るボタンは左に配置とか革命かよって思ったw

  • @TrueRyoB
    @TrueRyoB หลายเดือนก่อน

    すごすぎる

  • @TrueRyoB
    @TrueRyoB หลายเดือนก่อน

    すご

  • @TrueRyoB
    @TrueRyoB หลายเดือนก่อน

    面白い!

  • @TrueRyoB
    @TrueRyoB หลายเดือนก่อน

    すごい

  • @TrueRyoB
    @TrueRyoB หลายเดือนก่อน

    人が作った感がない方がのめりこみやすいって事なのかな? それとも終わりに期待できる感がいいのかな? それとも番号による振り付けがない方がいいのかな? 面白かったです

    • @gameuiux
      @gameuiux หลายเดือนก่อน

      見ていただき、ありがとうございます!

  • @mozu5324
    @mozu5324 2 หลายเดือนก่อน

    めっちゃめちゃかわいい! 音もUIもキャラもアニメーションも全部可愛すぎる😍

    • @gameuiux
      @gameuiux 2 หลายเดือนก่อน

      ありがとうございます!

  • @kanam430
    @kanam430 2 หลายเดือนก่อน

    すごい!photoshopやillustratorが無くてもここまで作れるんですね⭐️わかりやすかったです。

    • @gameuiux
      @gameuiux 2 หลายเดือนก่อน

      見ていただき、ありがとうございますー!

  • @shanatan5
    @shanatan5 2 หลายเดือนก่อน

    さんこうになります!

    • @gameuiux
      @gameuiux 2 หลายเดือนก่อน

      ありがとうございます! 嬉しいです^^

  • @shanatan5
    @shanatan5 2 หลายเดือนก่อน

    参考になりました!

    • @gameuiux
      @gameuiux 2 หลายเดือนก่อน

      ありがとうございますー!

  • @saegusa21momo
    @saegusa21momo 2 หลายเดือนก่อน

    画面を作りながら解説してくれたので作業イメージをつかむことが出来ました…! 凄い分かりやすかったです! 動画ありがとうございます!

    • @gameuiux
      @gameuiux 2 หลายเดือนก่อน

      良かったです・・・! こちらこそ、見ていただき、ありがとうございます~!

  • @Subgeta
    @Subgeta 2 หลายเดือนก่อน

    デザインと動画は面白かったです。お疲れ様です。

    • @gameuiux
      @gameuiux 2 หลายเดือนก่อน

      ありがとうございます・・・!

  • @sn_jukilo_ys
    @sn_jukilo_ys 2 หลายเดือนก่อน

    FigmaはUIをクリックしたときの挙動も一緒にデザインできるので、 より直感的に設計ができてイメージがすんなり入ってくることが利点ですね。 今の仕事でWebアプリの画面イメージがFigmaで作成されているのですが、 ゲームのUI制作にもFigmaが通用するというところは盲点でした。 個人的にゲーム制作もしているので、Figmaを活用してみます!

    • @gameuiux
      @gameuiux 2 หลายเดือนก่อน

      コメントありがとうございますー! アプリのUIを作るのには、Figmaはとても良さそうですね! ゲームUIだと、今回のようなフラットなデザインだと問題ないのですが、細かい装飾やブラシでの書き込みが多いテイストになると やはりPhotoshopで作った方がラクな気もしますので、用途に合わせて使いこなせると良さそうですね。

  • @activitydestory
    @activitydestory 4 หลายเดือนก่อน

    ためになった

    • @gameuiux
      @gameuiux 4 หลายเดือนก่อน

      @@activitydestory ありがとうございます🙏

  • @gameuiux
    @gameuiux 4 หลายเดือนก่อน

    AfterEffects×Cinema4Dで作成してます。3Dにハマりかけていたときに、楽しく作った記憶があります。3Dといえば、無料で使えるBlenderが流行ってますが、まさかのCinema4Dを使うようになりました。

  • @イツバ
    @イツバ 4 หลายเดือนก่อน

    誕生日キャラが出るのいいよね……!

    • @gameuiux
      @gameuiux 4 หลายเดือนก่อน

      誕生日の演出テンプレは汎用性高そうなので、作ってみました!いつもコメントありがとうございます!

  • @イツバ
    @イツバ 5 หลายเดือนก่อน

    まじでありそう……!

    • @gameuiux
      @gameuiux 5 หลายเดือนก่อน

      @@イツバ ありがとうございます😊

  • @橋本瞭-z9v
    @橋本瞭-z9v 6 หลายเดือนก่อน

    スマートオブジェクトの意味がよく分かってなかったんですが、めちゃくちゃ便利な機能でものすごくためになりました!

  • @おっさんおっさん-g7w
    @おっさんおっさん-g7w 6 หลายเดือนก่อน

    マジですごい。。。

    • @gameuiux
      @gameuiux 6 หลายเดือนก่อน

      ありがとうございますー!

  • @おっさんおっさん-g7w
    @おっさんおっさん-g7w 6 หลายเดือนก่อน

    長尺動画でどうやっているのかぜひ見てみたいです🥺

    • @gameuiux
      @gameuiux 6 หลายเดือนก่อน

      リクエストありがとうございます。そのまま撮影したものだと、作業途中に離席したり、考えて止まってる時間が含まれていたり静止部分も多々含まれるので、編集が必須になるのですが、億劫でなかなか出すのが難しいなと思ってました😂

  • @来夢-y1l
    @来夢-y1l 7 หลายเดือนก่อน

    他のショートのやつもだけどゆっくり見たいなぁ

  • @イツバ
    @イツバ 8 หลายเดือนก่อน

    実際にありそうだから凄い……!

    • @gameuiux
      @gameuiux 8 หลายเดือนก่อน

      ありがとうございます! ショート動画をアップしてから、左下の紙が破れてメニューが表示されるところで、後ろの茶色い紙が消えているというミスに気づきました(苦笑) きちんと確認すればよかった・・・!(泣)

  • @イツバ
    @イツバ 8 หลายเดือนก่อน

    何やってるかは分からないが、技術がすごいことは分かった

    • @gameuiux
      @gameuiux 8 หลายเดือนก่อน

      早送りしちゃってるので、何してるか分からないですよねw

  • @イツバ
    @イツバ 8 หลายเดือนก่อน

    いや……マジですごいな……憧れる……!

    • @gameuiux
      @gameuiux 8 หลายเดือนก่อน

      やったー!

  • @abcdefghijklmnopqrstuvwxyz777
    @abcdefghijklmnopqrstuvwxyz777 8 หลายเดือนก่อน

    はなさくのさんみたいにafterEffect触れるようになりたし…チュートリアル動画を参考に練習なさる時って、動画のどういう所を意識しながら学ばれてるんだろう🤔 ただなぞって同じものを作るとなると応用が効きづらいだろうから、学びを得る上で意識なさってることとかあるのかなと

    • @gameuiux
      @gameuiux 8 หลายเดือนก่อน

      チュートリアルについてはAfterEffectsに慣れるという意味で、最初のうちは面白そうなものをそのまま作成していました(AEに慣れることが目的)。 次ですが、なんとなくAEの使い方が分かった後は、10秒以内の短い動画を作ることから始めました。 といっても、自分の中の引き出しが全く無いので、MVやゲームの広告動画を見ながら、このシーンかっこいい、作ってみたいというのを部分的に探していきます。 その後に、参考動画を見ながら、自分なりにちょっとアレンジを加えたデザインを作ります。 ここまで来たらやっとアニメーションの制作になるのですが、どうやって作っているんだろう。。と分からないこともあるので、参考になりそうなチュートリアル動画がないか、TH-camで探し始めます。そして、作って直して・・・の繰り返しです。 最近は、1枚のデザインから考えることが多く、そのデザインの前後につなぐアニメーションをどうしようかというのを、SNSやTH-camなどで探しながら作ることも多いです。

    • @abcdefghijklmnopqrstuvwxyz777
      @abcdefghijklmnopqrstuvwxyz777 8 หลายเดือนก่อน

      @@gameuiux 詳細なご返信ありがとうございます! めっちゃ参考になる…😭✨ グラフィックデザイナーとしては2年目なのですが、副業でご縁あってゲームのUIデザインをさせて頂く機会がしばしばあり、更なるスキルアップとしてUIアニメーションにも取り掛かりたいと思う一方で、どう応用力を付ければいいか本当に悩んでいたので、本当に助かりました😭😭😭 noteの記事も定期購読させて頂いているので、引き続き勉強させて頂こうと思います!これからも応援しております!

  • @イツバ
    @イツバ 8 หลายเดือนก่อน

    すげぇ……!

    • @gameuiux
      @gameuiux 8 หลายเดือนก่อน

      いつも、コメントありがとうございますー!

  • @イツバ
    @イツバ 8 หลายเดือนก่อน

    めっちゃいいな……

    • @gameuiux
      @gameuiux 8 หลายเดือนก่อน

      🥰

  • @イツバ
    @イツバ 8 หลายเดือนก่อน

    マジですごい……

    • @gameuiux
      @gameuiux 8 หลายเดือนก่อน

      ありがとうございます!

  • @aaa-pu1sd
    @aaa-pu1sd 9 หลายเดือนก่อน

    すげー

  • @かくれイカ
    @かくれイカ 9 หลายเดือนก่อน

    LINEスタンプで売ったら売れそう

  • @ytamtam7139
    @ytamtam7139 10 หลายเดือนก่อน

    初めまして What Fonts 起動しても動作しません。 どうしたら良いでしょうか?

  • @hikkymama
    @hikkymama ปีที่แล้ว

    ウェブ画像やサイト全体を集めて整理するアプリをPerplexityで探していたら、Eagleがおススメされて、こちらの動画が参照元になっていましたので飛んできました。2年も前からあったのですね、知りませんでした。早速使ってみます。 わかりやすい解説をありがとうございました!

  • @陽明-t4x
    @陽明-t4x ปีที่แล้ว

    アフターエフェクト講座も作ってくれたら即買いします!

  • @陽明-t4x
    @陽明-t4x ปีที่แล้ว

    作例もキャラクターもスライドも全部可愛い

  • @NM-yo1mt
    @NM-yo1mt ปีที่แล้ว

    購入検討していたので内容についての説明が事前に見れて助かりました! ありがとうございます😊

  • @neiro7iro
    @neiro7iro ปีที่แล้ว

    何度も止めながらやってみましたが、何回やっても同じようになりません😭

  • @吉ひ-l6b
    @吉ひ-l6b ปีที่แล้ว

    最高!

  • @中山カンナ
    @中山カンナ ปีที่แล้ว

    Photoshop初心者なので、すんごくタメになりました! 有難う御座います🙏🏻✨

  • @おさとう-i1y
    @おさとう-i1y ปีที่แล้ว

    まず名前が良い

  • @Unvata
    @Unvata ปีที่แล้ว

    めっちゃ欲しい!!!😍 って思ったのに調べてみたら有料かつ4000円くらいかかるの知って萎えた

    • @shoyama4146
      @shoyama4146 6 หลายเดือนก่อน

      どう考えても安い

    • @Unvata
      @Unvata 6 หลายเดือนก่อน

      @@shoyama4146 中学生にとって4000円は高ぇ

  • @錯乱ボーイ-u2w
    @錯乱ボーイ-u2w ปีที่แล้ว

    なんで今までこれ使わなかったんだろう!!便利すぎる

  • @lol_miooooooooo
    @lol_miooooooooo ปีที่แล้ว

    時短になっていいですね!!! このスクリプトは、フォトショをどんどん更新して2022→2023になっても、自動でこちらも更新されますか? 毎回ダウンロードし直す必要がありますか?

    • @gameuiux
      @gameuiux ปีที่แล้ว

      上記のように大きくバージョンが変わる場合は、再度入れなおす必要があります。 少し面倒ですが、しょうがないですね・・・笑

  • @user-zv7jd3qm5c
    @user-zv7jd3qm5c ปีที่แล้ว

    お声も可愛くて動画もわかりやすいです!良い動画を有難うございます!

    • @gameuiux
      @gameuiux ปีที่แล้ว

      見ていただき、ありがとうございます!

  • @honnamawasabi2937
    @honnamawasabi2937 ปีที่แล้ว

    エクセルの図形でこんな感じと見せられるのが多いけど これ覚えてくれたらもっと楽にやり取り出来そう

  • @nartz5361
    @nartz5361 ปีที่แล้ว

    作成した画像のプロンプトを共有できますか?

    • @littleriver1281
      @littleriver1281 6 หลายเดือนก่อน

      ハートマーク付けて1年放置ってすごいな。