最初のページを作成する

新規プロジェクトには Main Page が含まれています。このガイドではこのページを編集し、背景、タイトル、ボタンを追加したうえで、Dev Mode で結果を確認します。

ページを作成する

左側のアクティビティバーでUIを選択し、インターフェースの種類をPage（ページ）に設定して、Main Page を開きます。

ページは中央のエディタで開きます。左側に UI Outline、中央にキャンバス、右側に Properties、キャンバスの下に挿入バーが並びます。

挿入バーからContainer（コンテナ）を選び、キャンバス上でクリックまたはドラッグします。コンテナを選択した状態で、Properties から位置、サイズ、背景を設定します。

画像を背景にする場合は、画像アセットをキャンバスにドラッグします。Studio はそのアセットに紐づいた Image ウィジェットを作成します。

挿入バーからText（テキスト）を選び、キャンバスに配置します。テキストをダブルクリックするとその場で編集でき、フォント、サイズ、色、揃え方は Properties で設定します。

ウィジェットはドラッグで移動し、ハンドルでサイズを変更します。Smart Snap（スマートスナップ）は、ウィジェットをキャンバスの端、中心線、近くのウィジェットに合わせて整列させます。

Button（ボタン）を選んでキャンバスに配置し、ラベルと外観を設定します。動作は後でウィジェットのブループリントに接続します。レイアウトの確認だけであればイベントの接続は不要です。

UI Outline にはウィジェットの階層が表示されます。コンテナは他のウィジェットを所有し、子ウィジェットは親と一緒に移動します。キャンバス上で重なっていたり小さすぎて選択しにくいウィジェットにも、Outline からアクセスできます。

ウィジェットを右クリックすると、名前の変更、表示・非表示の切り替え、重なり順の変更、選択範囲のコンポーネントライブラリへの追加を行えます。一群のウィジェットを再利用できる状態になったら、コンポーネントとして作成します。

キャンバス右上の再生ボタンを選択すると、現在のページが Dev Mode で開きます。Dev Mode は実際のランタイムを使用し、スケール、インタラクション、ブループリントの動作を確認できます。

続きは実行とパッケージ化を参照してください。