Layout Designer 使い方ガイド

概要

Layout Designerは、アーケードコントローラー天板のボタン配置をmm精度で設計・共有できるWebアプリです。作成したレイアウトは共有コードで誰にでも公開できます。

基本操作

テンプレートから始める

サイドバーの「テンプレート」タブから定番の配置を選んで適用できます。適用後も個別に調整可能です。

ボタンの追加

「プリセット」タブでボタンを選ぶと天板中央に追加されます。メーカー・サイズでの絞り込みや名前検索ができます。

ボタンの移動

ボタンはドラッグで移動できます(スマホ・タブレットでは指でドラッグ)。矢印キーで1mm、Shift+矢印キーで10mmの微調整も可能です。

ボタンの選択

  • クリック(タップ)で選択
  • Shift(またはCtrl/Cmd)+クリックで複数選択・選択解除
  • 何もない場所からドラッグで範囲選択(マウスのみ)
  • Escキーまたは天板外のクリックで選択解除

プロパティの編集

「プロパティ」タブで選択したボタンを編集できます。

  • ボタンの種類(プリセット)を変更
  • 座標をmm単位で直接入力
  • アサイン(ボタン割り当て)を設定
  • 色を変更(複数選択中はまとめて変更可能)

天板の設定

「天板設定」タブでプリセットサイズの選択、またはサイズの直接入力ができます(縦140〜440mm・横140〜550mm)。

表示の調整

ズーム

ツールバーの+/−ボタン、Ctrl(Cmd)+マウスホイール、2本指のピンチ操作で拡大縮小できます。「フィット」ボタンで天板全体を画面に収めます。

グリッドとスナップ

ツールバーでグリッド表示(10mm)の切り替えと、スナップのON/OFF・間隔(1/2/5/10mm)の設定ができます。スナップをONにするとドラッグ移動が指定間隔単位になります。

保存と共有

保存

上部メニューの「保存」で名前を付けて保存すると、8文字の共有コードが発行されます。保存するたびに新しいコードが発行されます(上書きではなく、別のレイアウトとして保存されます)。

共有

共有コードまたはURL(https://…/コード)を伝えると、誰でもレイアウトを閲覧できます。保存後の画面からXへのポストもできます。

開く

上部メニューの「開く」から共有コードを入力すると、保存済みのレイアウトを読み込めます。

スマホ・タブレットでの操作

  • ボタンは指でドラッグして移動できます
  • 1本指で背景をドラッグするとキャンバスをスクロール、2本指のピンチでズームできます
  • 保存・開くなどのメニューは右上の「⋮」ボタンからアクセスできます

キーボードショートカット

  • Delete / Backspace選択した部品を削除
  • Esc選択を解除
  • Ctrl / Cmd + Z元に戻す
  • Ctrl / Cmd + Shift + Z(Ctrl + Y)やり直し
  • 矢印キー選択した部品を1mm移動
  • Shift + 矢印キー選択した部品を10mm移動
  • Shift / Ctrl / Cmd + クリック複数選択

Tips

  • 正確に配置したいときは、プロパティパネルで座標を直接入力するのが確実です
  • テンプレートを適用してから微調整すると効率的にレイアウトを作成できます
  • 操作を間違えてもCtrl+Zでいつでも元に戻せます
  • 複数のボタンを選択すると、色やアサインをまとめて変更できます