検証テーマ一覧 › 6. 2D幾何・ノード操作
ノードベースのワークフローエディタ
2D幾何・ノード操作｜ドラッグ・接続・ズームなど幾何計算の多いUIを正確に組めるか
固定プロンプト（v2）
全AIモデルに一字も変えずに与える依頼文です。
ブラウザの画面上でブロック（ノード）を自由にドラッグ＆ドロップで配置し、ブロック同士の端子をベジェ曲線の線（SVG）で接続・繋ぎ変えができる「簡易ワークフローエディタ」を単一のHTMLファイルで作成してください。ブロックの移動に合わせて接続線がリアルタイムに追従する幾何計算を正しく実装してください。
このカテゴリで測ること
- キャンバス座標計算
- SVGコネクタ（線）の追従
- ドラッグ＆ドロップ制御
主な測定内容
- ノード移動時に接続線が遅れ・ずれなく追従するか（座標計算）
- 端子からのドラッグで接続・繋ぎ変え・切断ができるか
- ドラッグ＆ドロップ制御の正確さ（誤ドラッグ・離した位置のずれ）
- ベジェ曲線の形状（端子の向きに沿っているか）
- ノード数が増えたときの動作
評価ポイント
- 操作の直感性（説明なしで使えるか）
- 線・ノードの見た目の美しさ
- エディタとしての完成度
- スナップ・選択などの細部の丁寧さ
登録済みの成果物（2件）
| モデル | effort | 生成日 | プロンプト版 | |
|---|---|---|---|---|
| kimi-k3 | high | 2026-09-10 | v2 | 成果物を開く |
| claude-fable-5-1 | high | 2026-09-09 | v2 | 成果物を開く |
他の検証テーマ
- スイカゲーム風合体パズル （物理演算・衝突判定（2D））
- ピンボール （物理演算・衝突判定（2D））
- 特殊ルール付きリバーシ （ターン制・状態遷移）
- カードバトル （ターン制・状態遷移）
- SaaSアナリティクスダッシュボード （モダンUI・デザイン）
- グラスモフィズムLP（スクロール・ホバー演出） （インタラクション・演出）
- リアルタイム検索・ソート・CSV出力SPA （大量データ・テーブル操作）
- 国家経営マルチエンディングシミュレータ （文脈維持・シナリオ設計）
- Three.jsパーティクルビジュアライザー （3D空間・数理レンダリング）
- 楽観的UI＋リトライ付きチャット通信モジュール（TypeScript） （非同期・通信耐障害性）
- 配送トラック巡回問題 （独自制約・数理最適化）
- 変則ナップサック問題 （独自制約・数理最適化）
- 複数ファイル構成のリポジトリへの新機能追加 （マルチファイル・既存改修）
- 法規制・規約に準拠した業務フロー＋DB設計 （ドメイン知識・仕様整合性）