Kaiju Hub AI

キャンバスエディター

Wireframe canvas editor showing left toolbar, canvas with Dashboard wireframe, right sidebar with element properties, and AI prompt bar

ワイヤーフレーム編集キャンバスは、スクリーンをデザインし調整する場所です。左サイドバーにはすべての描画・選択ツール、中央には要素を配置・配列するキャンバス、右サイドバーには選択した要素のプロパティが表示されます。

ツール

選択

キャンバス上の要素をクリックして選択・移動します。選択した要素のプロパティが右サイドバーに表示されます。

四角形

キャンバスに四角形のコンテナ要素を描画します。

円

キャンバスに円形要素を描画します。

テキスト

テキストラベルとコンテンツブロックを追加します。

画像

画像プレースホルダー要素を配置します。

ボタン

インタラクティブなボタン要素を追加します。

入力

フォーム入力フィールドを追加します。

+(スクリーン追加)

ワイヤーフレームプロジェクトに新しいスクリーンを追加します。

ロックされた要素

AI生成画面はデフォルトでロックされています — 要素はロック解除するまで移動やリサイズができません。Ctrl + Dを押して現在の画面のすべての要素をロック解除し、再配置と編集の完全なコントロールを取得します。

ストーリーボードモード

Storyboard view showing Dashboard frame card with 45 elements, zoom controls, and right sidebar with screen list

ストーリーボードモードでは、すべてのフレームとその接続ポイントを俯瞰で確認できます。左サイドバーの同じボタンを使って、シングルスクリーンキャンバスとストーリーボードモードを切り替えます。ストーリーボードモードでは、各スクリーンがレイアウトのプレビュー付きカードとして表示されます。

ストーリーボード機能

フレーム概要

要素数とビジュアルプレビュー付きですべてのスクリーンを一目で確認します。

モーダルに設定

任意のスクリーンをフルページではなくモーダルオーバーレイとしてマークします。

クリックして編集

任意のフレームカードをクリックして、詳細編集のためにキャンバスビューにジャンプします。

ズームコントロール

左のズームコントロールを使用してストーリーボードの拡大/縮小を行います。

フロー接続

フレーム間のフローアクションを通じてスクリーンがどのように接続されているかを視覚化します。

要素プロパティ

キャンバス上の任意の要素をダブルクリックして、その要素に入り、右サイドバーにプロパティパネルを開きます。パネルにはプロパティ、フロー、カラーの3つのタブがあります。ここから各要素の位置、サイズ、スタイル、動作を編集できます。

プロパティタブ

位置(X, Y)

キャンバス上の要素の正確なピクセル位置を設定します。

サイズ(幅、高さ)

要素の寸法をピクセル単位で設定します。

Zインデックス(レイヤー順序)

要素の重なり順を制御します。

ボーダー半径

数値で角の丸みを設定するか、Sharp、Rounded、またはPillのプリセットを使用します。

テキストコンテンツ

要素内に表示されるテキストを編集します。

カラータブ

選択した要素の背景色、ボーダー色、テキスト色をカスタマイズします。

フロー

フローはスクリーン間のアクションとナビゲーションを定義します。フローとは、別のページへの移動、モーダルの表示、別のエリアへのルーティングなどのアクションです。キャンバス上の小さなリンクアイコンが、フローが添付されている要素を示します。AI生成中にフレーム間は自動的にリンクされ、フロー接続も作成されます。

フローの設定

1

要素を選択

フローを追加したい要素をクリックします。

2

フロータブを開く

右サイドバーでFlowタブに切り替えて、既存の接続を確認したり新しい接続を追加します。

3

接続を追加

最初の接続を追加(または+ボタン)をクリックして新しいフローを作成します。リンク先のターゲットスクリーンまたはフレームを選択します。

4

キャンバスで表示

接続された要素にはキャンバス上に小さなリンクアイコンが表示され、フローアクションがあることを示します。

ブロック接続

ブロック接続により、ブロックライブラリからワイヤーフレーム要素にブロックを直接添付できます。要素をダブルクリックしてプロパティパネルを下にスクロールすると、ブロック接続セクションがあります。+ ブロックを追加をクリックして、ブロック(HTML、コンポーネント、またはテンプレート)を要素にリンクします。接続されたブロックはAIでコードを生成する際に参照され、特定のHTMLまたはコンポーネントコードをワイヤーフレーム要素に簡単に添付できます。

AI編集

キャンバス下部のAIプロンプトバーにより、AIを使用して画面を編集または作成できます。左側のドロップダウンからAIモデルを選択し、希望する変更を記述すると、AIがワイヤーフレームを修正します。音声入力やCLI編集ボタンを使用した高度な編集も可能です。

コンテキスト対応プロンプト

シングルスクリーン

シングルスクリーン編集時、プロンプトバーには「'スクリーン名'を編集中」と表示され、AIの変更はそのスクリーンのみに適用されます。

ストーリーボード

ストーリーボードモードでは、AIがすべてのフレームを一度に編集するか、既存のフレームを参考にして新しいフレームを構築できます。

音声入力

プロンプトバーのマイクアイコンを使用して、入力する代わりに音声で指示をディクテーションします。

CLI編集

CLI編集をクリックして、AI搭載の変更をより制御できる高度な編集モードに移行します。

エクスポート&統合

ワイヤーフレームはエクスポート、インポート、またはプロジェクト作成時やプロジェクトハブ内で直接使用できます。これにより、デザインを手動で再作成することなく、ワイヤーフレームデザインから機能するプロジェクトに簡単に移行できます。

Kaiju Hub AIに表示されるサードパーティのロゴ、商標、ブランド名はそれぞれの所有者に帰属します。識別目的のみに使用され、推奨、後援、提携を意味するものではありません。