# 2.テスト用Layoutの作成

TouchOSC Editorを起動します。

[![1522730248.png](https://book.a10-objects.jp/uploads/images/gallery/2026-04/scaled-1680-/1522730248.png)](https://book.a10-objects.jp/uploads/images/gallery/2026-04/1522730248.png)

何も無いLayoutが表示されます。  
   
左側の確認  
「Layoyt」  
デバイスのSize選択と縦/横の方法などの基本的な設定エリアです。  
   
「Page」  
複数のLayoutをサクりたい時のページ情報と通信プロトコルの設定です。TouchOSC EditorはOSCしか使用する予定が無いので「OSC」になっていることを確認します。

[![image.png](https://book.a10-objects.jp/uploads/images/gallery/2026-04/scaled-1680-/i3Simage.png)](https://book.a10-objects.jp/uploads/images/gallery/2026-04/i3Simage.png)

UI「Fader」の作成  
   
多くのmacOSアプリでは操作できる事はメニューにありますが、TouchOSC Editorでは何も無くポップアップメニュー(コマンド+クリック)で作成したいUIの一覧が表示されます。

今回は「Fader H」を選択します。  
   
そして位置と大きさを適当に設定して「Save」ボタンを押します。<span style="color: rgb(224, 62, 45);">**保存は必ず「Save」ボタン**</span>です。<span style="color: rgb(224, 62, 45);">**キー操作はできない**</span>ようです。  
   
TouchOSCでは保存ファイル名が使用するLayout名になります。

[![1522779620.png](https://book.a10-objects.jp/uploads/images/gallery/2026-04/scaled-1680-/1522779620.png)](https://book.a10-objects.jp/uploads/images/gallery/2026-04/1522779620.png)

.追加された「Fader」を確認確認します。  
今回は作成時のデフォルトのまま使用します。

Name: fader1  
OSC: auto  
Value Range: 0～1

[![1522731059.png](https://book.a10-objects.jp/uploads/images/gallery/2026-04/scaled-1680-/1522731059.png)](https://book.a10-objects.jp/uploads/images/gallery/2026-04/1522731059.png)