Post
ロブロックススタジオUI講座 第1回：UIの基礎を学ぼう
Roblox StudioでUIを作る基礎講座です。UIの基本概念、Screen GUIの追加、フレームの設定、テキストラベルの追加、ボタンの生成および商品UIのコピー方法を学びます。
1. 🎮 UIって何？ Roblox Studioを始めよう
- ✅ UIはユーザーインターフェースの略で、ゲーム内でユーザーが見て操作するすべての要素を意味します。
- ✅ よくできたUIはゲームへの没入感を高め、ひどいUIはユーザーを離れさせる可能性があります。
- ✅ Roblox Studioを起動し、エクスプローラーウィンドウとプロパティウィンドウを確認します。
00:00 - 00:43
1. 🎮 UIって何？ Roblox Studioを始めよう
- ✅ UIはユーザーインターフェースの略で、ゲーム内でユーザーが見て操作するすべての要素を意味します。
- ✅ よくできたUIはゲームへの没入感を高め、ひどいUIはユーザーを離れさせる可能性があります。
- ✅ Roblox Studioを起動し、エクスプローラーウィンドウとプロパティウィンドウを確認します。
00:44 - 01:11
2. ➕ Screen GUIとフレームを追加しよう
- ✅ エクスプローラーウィンドウで、StarterGuiにScreen GUIを追加します。
- ✅ Screen GUIの中にフレームを追加して、UI要素の基本ボックスとして使用します。
01:12 - 01:30
3. 🎨 フレームを飾ろう：色を変更する
- ✅ フレームのサイズを適切に調整します。
- ✅ プロパティウィンドウで背景色を変更して、フレームの色を設定します。
01:31 - 02:34
4. 📝 テキストラベルの追加と設定：ショップUIを作ろう
- ✅ フレームの中にテキストラベルを追加して、ショップの名前を表示します。
- ✅ テキストラベルの背景を透明に設定し、文字の色とサイズを変更します。
- ✅ テキスト項目でラベルの内容を「ショップ」に変更します。
02:35 - 03:00
5. ❌ 閉じるボタンを追加しよう
- ✅ フレームの中にテキストボタンを追加して、閉じるボタンを作ります。
- ✅ ボタンのサイズを調整し、背景色を赤色に設定します。
- ✅ 文字の色とサイズを変更し、テキストを「X」と入力します。
03:01 - 04:16
6. ⚔️ 商品UIを作ろう：画像、名前、購入ボタンを追加
- ✅ フレームの中にもう一つのフレームを追加して、商品UIの背景を作ります。
- ✅ イメージラベルを追加して、商品のイメージを表示します。
- ✅ テキストラベルを追加して、商品の名前を表示します。
- ✅ テキストボタンを追加して、購入ボタンを作ります。背景色は緑色に設定します。
04:17 - 04:46
7. ✨ 商品UIをコピーして配置：ショップUI完成
- ✅ コントロール+Wを押して、商品UIフレームをコピーします。
- ✅ コピーされたフレームを下側に移動して配置します。
- ✅ 各商品UIのイメージとテキストを好きなように変更します。
04:47 - 05:01
8. 🚀 次の講座予告
- ✅ 次の講座では、UIをもっときれいに飾る方法について見ていく予定です。