UI Designer - ユーザーガイド¶
このツールは、ドラッグ＆ドロップによる直感的な操作でアプリケーションのUIを設計できます。データモデルとなるエンティティを定義し、画面にコンポーネントを配置した後、デザインをテキスト形式でエクスポートすることが可能です。
はじめに¶
UI Designerを初めて起動すると、以下のような状態で表示されます。
- 画面を設計するメイン画面
- 右サイドパネルに表示されるエンティティパネル (初期状態では空）
インターフェースの構成¶
ヘッダーツールバー¶
上部のバーには、以下の機能があります。
- 画面名: 現在の画面名をクリックして変更できます。
- 元に戻す／やり直し: 操作を元に戻したり、再適用したりします（Ctrl+Z / Ctrl+Shift+Z）。
- プレビュー: プレビューモードに切り替えます。
- 言語選択: 英語と日本語を切り替えます。
- エクスポートモード: ストーリーボード全体か、現在の画面のみかを選択してエクスポートします。
- エクスポート形式: JSONまたはLLMテキスト形式を選択します。
- エクスポートボタン: デザインをエクスポートして保存します。
- インポートボタン: 以前にエクスポートしたデザインを読み込みます。
サイドパネル¶
右側のパネルには、2つのタブがあります。
- エンティティタブ: データモデルを定義します。
- 画面タブ: 複数の画面を管理します。
画面デザインエリア¶
画面デザインエリアでは、以下の操作が行えます。
- コンポーネントの追加
- コンポーネントの編集
- コンポーネントの移動
エンティティの操作¶
サイドパネルのエンティティタブでは、エンティティ定義を管理できます。 エンティティはアプリケーションのデータモデルを表し、それぞれに名前とプロパティのリストを持ちます。
エンティティの追加¶
- エンティティパネルの「+ エンティティを追加」をクリックします。
- 「New Entity」という名前の新しいエンティティが追加されます。
- 名前をクリックして編集します。
ヒント: エンティティ名横のコピーボタンを使うと、既存のエンティティを複製できます。
エンティティの編集¶
- 名前の変更: エンティティ名をクリックして編集します。
- プロパティの追加: エンティティ名の横にある「+」をクリックします。
- エンティティの削除: エンティティ名のゴミ箱アイコンをクリックします（確認ダイアログが表示されます）。
プロパティのタイプ¶
各プロパティには、表示方法を決めるタイプがあります。
| タイプ | 説明 |
|---|---|
string |
テキストデータ: 名前、文章、分類ラベルなどの文字列データ。 |
number |
数値データ: 整数や小数などの数値。 |
entity |
エンティティデータ: 他のエンティティへの参照。 |
function |
関数: 処理や条件などの操作。画面には表示されません。 |
プロパティの追加手順¶
- エンティティの下にある「プロパティを追加」をクリックします。
- 「newProperty」という名前、タイプ「文字列」のプロパティが追加されます。
- プロパティ名をクリックして変更します。
- ドロップダウンからタイプを変更します。
画面の構築¶
新しい画面の作成¶
- サイドパネルで「画面」タブをクリックします。
- 入力フィールドに名前を入力します。
- 「追加」をクリックします。
画面の管理¶
- 画面の切り替え: リストから画面名をクリックします。
- 画面のコピー: コピーアイコンをクリックして複製します。
- 画面の削除: ゴミ箱アイコンをクリックします（最後の1画面は削除できません）。
画面遷移の設定¶
ボタンを使うと、画面間を移動できます。ボタンコンポーネントを追加した際に、遷移先の画面を選択できます。
コンテナを別画面に移動¶
コンテナ（とその中身すべて）を別の画面に移動できます。
- 移動したいコンテナを右クリックします。
- コンテキストメニューで 「コンテナを別画面に移動」 をクリックして移動先一覧を展開します。
- 移動先の画面を選択します。
コンテナとその中のコンポーネントは、移動先画面のルート直下に移動します。このオプションは画面が2つ以上ある場合にのみ表示されます。
コンポーネントの使用¶
コンポーネントの種類¶
| コンポーネント | 説明 | 用途 |
|---|---|---|
| コンテナ | 内部に他のコンポーネントを保持 | カードとしてまとめたり、セクションを区切る。 |
| テキスト・数値 | データを表示（型は自動判別） | ラベル、説明、価格、個数 |
| ボタン | クリック可能な操作要素 | アクション、画面切り替え |
| 入力 | ユーザーがテキストを入力 | フォーム、検索フィールド |
コンポーネントの追加方法¶
- デザイナーエリアまたはコンテナ内で右クリックします。
- コンテキストメニューが表示されます。
- 「コンポーネントを追加」を選択します。
- コンポーネントの種類を選びます。
エンティティとの連携¶
新しいコンポーネントに表示するエンティティを設定する手順は以下の通りです。
- コンポーネントの種類を選択した後、「エンティティパス」のメニューが表示されます。
- 表示したいエンティティを選択すると、そのプロパティの一覧が表示されます。
- 表示したいプロパティをクリックします。
- 選択したプロパティがエンティティ型の場合、さらにそのエンティティのプロパティ一覧が表示されるので、続けて表示したいプロパティをクリックします。
既存のコンポーネントの表示エンティティを変更するには、そのコンポーネントを右クリックして「エンティティパス」メニューを開きます。以降の操作は同様です。
すべての文字列・数値プロパティを一括追加¶
テキスト・数値コンポーネントを追加する際、エンティティパスメニューの各エンティティ内に 「+ すべての文字列・数値プロパティを追加」 という選択肢が表示されます。これをクリックすると、そのエンティティのすべての文字列・数値プロパティ（ネストされたエンティティ内も含む）に対応するコンポーネントが一度に追加されます。エンティティ型のプロパティはスキップされ、末端のプロパティのみが追加されます。
コンポーネントのコピーと削除¶
各コンポーネントの右上にあるボタン、または右クリックからコピーと削除が行えます。
- コピー: コンポーネントを複製します。
- 削除: コンポーネントを削除します。
ボタンの遷移先設定¶
ボタンコンポーネントの場合、遷移先の画面を設定できます。
- ボタン内のドロップダウンボックスをクリックします。
- ボタンをクリックした時に遷移する画面を選択します。
コンポーネントの移動¶
コンポーネントはドラッグ＆ドロップで他のコンテナの内部に移動できます。コンテナをドラッグすると、内側のコンポーネントも一緒に移動します。
ヒント: コンテナを移動すると自動的な並び替えが行われ、一時的に見失うことがありますが、全体を確認しながら操作してください。
ドロップ時に移動先となるコンテナの上部には点線の枠が表示されます。そのコンテナ内で適切な位置に並び替えられて表示されます。
ドラッグの位置を誤った場合は、元に戻すボタンで操作を取り消せます。
プレビューモード¶
プレビューモードでは、実際に操作するときの見た目や挙動を確認できます。
- ヘッダーの「プレビュー」をクリックします。
- サイドパネルやヘッダーが非表示になり、コンポーネントのみが表示された簡素な画面になります。
- ボタンがクリック可能になり、クリックすると画面遷移します。
- 画面上部の「プレビュー終了」ボタンをクリックすると、デザインモードに戻ります。
元に戻す・やり直し¶
このアプリでは、操作の履歴を記録しています。
- 元に戻す (Ctrl+Z): 直前の操作を取り消します。
- やり直し (Ctrl+Shift+Z): 取り消した操作を再適用します。
- 履歴は最大50件まで保存されます。
- ブラウザのページをリロードすると、履歴は消去されます。
インポートとエクスポート¶
デザインのエクスポート¶
- エクスポートモードを選択します。
- ストーリーボード: すべての画面をエクスポートします。
-
現在の画面: 現在表示中の画面のみをエクスポートします。
-
エクスポート形式を選択します。
- JSON: このツールで再利用するための形式です。
-
LLMテキスト: AIアシスタント向けの、人が読みやすい形式です。
-
エクスポートをクリックして、ファイルを保存します。
デザインのインポート¶
- インポートをクリックします。
- 以前にエクスポートしたJSONファイルを選択します。
- デザインがエディターに読み込まれます。
「現在の画面」モードでエクスポートしたファイルをインポートすると、現在選択中の画面だけが置き換わります。「ストーリーボード」モードでエクスポートしたファイルをインポートすると、画面一覧全体が置き換わります。
言語設定¶
このデザインツールは、英語と日本語の表示に対応しています。
- ヘッダーの言語ドロップダウンをクリックします。
- Englishまたは日本語を選択します。
- すべてのUIテキストが即時に切り替わります。
- 設定はブラウザに保存されます。
ヒントとテクニック¶
キーボードショートカット¶
- Ctrl+Z: 元に戻す
- Ctrl+Shift+Z: やり直し
- Enter: 画面名の編集を確定
- Escape: 画面名の編集をキャンセル
自動保存¶
作業内容はブラウザのローカルストレージに自動保存されます。ページを更新してもデザインは復元されます。
コンポーネントの整理¶
- 関連するコンポーネントをグループ化するにはコンテナを活用します。
- コンテナは他のコンテナ内に入れ子にすることもできます。
トラブルシューティング¶
以前の操作が消えてしまった¶
- ブラウザの自動削除機能などにより、自動保存されたデータが消える場合があります。
- この場合、復元はできません。定期的にJSONでのエクスポートを推奨します。
インポートが失敗する¶
- このアプリケーションからエクスポートされたJSONファイルのみインポート可能です。
最後の画面を削除できない¶
- 画面は少なくとも1つ以上必要です。
- 削除する前に、新しい画面を作成してください。