リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: MoodBoard Maker ビジョンボード&ムードボード作成
ボードの「セクション枠」機能の追加
## 1. 目的
ムードボードを「夢のライフスタイル」「インテリア」「やりたいこと」など複数のテーマに分けて整理したいユーザーが多い。現状は要素を自由配置するだけなので、エリアの意味が一目でわからない。セクション枠(ラベル付き背景矩形)を追加することで、ボード内を視覚的にゾーニングでき、完成度と使いやすさが大きく向上する。
## 2. 具体的な仕様
### 2-1. セクション枠の追加方法
- 左サイドパネルに「セクション」タブを追加する。
- タブ内に「+ セクション枠を追加」ボタンを1つ置く。クリックするとキャンバス中央に 300×200px のデフォルトセクション枠を配置する。
### 2-2. セクション枠の見た目
- 背景色(デフォルト: 半透明の白 rgba(255,255,255,0.25))と枠線色(デフォルト: #cccccc)を持つ矩形。
- 左上隅にセクション名ラベルを表示(デフォルト文字列: "Section")。フォントサイズは固定14px、太字。
- 背景色・枠線色・枠線太さ(0〜4px)・角丸(0〜20px)・セクション名をプロパティパネルで変更可能。
- 背景色のアルファ値を0にすれば枠線のみの透明背景にもできる。
### 2-3. 操作
- ドラッグで移動・リサイズ(既存要素と同じハンドル操作)が可能。
- セクション枠は **常に他の全要素の背面** に固定する(z-indexをセクション枠グループ全体で最小値に保つ)。要素の重なり順変更ボタンはセクション枠には表示しない。
- セクション枠を選択すると右側プロパティパネルに上記設定項目が表示される。
- 複数のセクション枠を重ねて配置することも可能(重なり順はセクション枠同士でのみ変更可)。
- Delete/Backspaceキーまたは削除ボタンで削除可能。
- Undo/Redoの履歴対象に含める。
### 2-4. データ構造
- セクション枠は既存の要素配列に `type: "section"` として追加する。
- 保存するJSONフィールド: `{ id, type:"section", x, y, width, height, label, bgColor, borderColor, borderWidth, borderRadius }`
- 既存のJSON読み込み時に `type:"section"` がなければ無視するだけなので後方互換を維持できる。
### 2-5. 書き出し
- PNG/JPG書き出し時、セクション枠は他要素と同様にキャンバスに描画される。
- ピンメモの「書き出し時に含む/含まない」切替と同様に、セクション枠も書き出し時の表示/非表示をトグルで選択できるチェックボックスをプロパティパネルに追加する。
### 2-6. テンプレートへの適用
- 既存10種のテンプレートのうち「夢・目標」「ブランド」「ビジネス」の3種にあらかじめ2〜3個のセクション枠をプリセットとして組み込み、テンプレート選択時から区画が見える状態にする。
## 3. 既存機能との整合
- セクション枠はz-index最背面固定のため、既存の全要素の操作(ドラッグ・リサイズ・グループ化等)に干渉しない。
- スマートガイドのスナップ対象にセクション枠の辺・中心線を含めることで位置合わせに活用できる。
- グループ化の対象からはセクション枠を除外し、誤ってグループに入らないようにする。
- localStorageの自動保存・JSON書き出し/読み込みには既存の要素配列をそのまま使い回すため実装変更は最小限。
ムードボードを「夢のライフスタイル」「インテリア」「やりたいこと」など複数のテーマに分けて整理したいユーザーが多い。現状は要素を自由配置するだけなので、エリアの意味が一目でわからない。セクション枠(ラベル付き背景矩形)を追加することで、ボード内を視覚的にゾーニングでき、完成度と使いやすさが大きく向上する。
## 2. 具体的な仕様
### 2-1. セクション枠の追加方法
- 左サイドパネルに「セクション」タブを追加する。
- タブ内に「+ セクション枠を追加」ボタンを1つ置く。クリックするとキャンバス中央に 300×200px のデフォルトセクション枠を配置する。
### 2-2. セクション枠の見た目
- 背景色(デフォルト: 半透明の白 rgba(255,255,255,0.25))と枠線色(デフォルト: #cccccc)を持つ矩形。
- 左上隅にセクション名ラベルを表示(デフォルト文字列: "Section")。フォントサイズは固定14px、太字。
- 背景色・枠線色・枠線太さ(0〜4px)・角丸(0〜20px)・セクション名をプロパティパネルで変更可能。
- 背景色のアルファ値を0にすれば枠線のみの透明背景にもできる。
### 2-3. 操作
- ドラッグで移動・リサイズ(既存要素と同じハンドル操作)が可能。
- セクション枠は **常に他の全要素の背面** に固定する(z-indexをセクション枠グループ全体で最小値に保つ)。要素の重なり順変更ボタンはセクション枠には表示しない。
- セクション枠を選択すると右側プロパティパネルに上記設定項目が表示される。
- 複数のセクション枠を重ねて配置することも可能(重なり順はセクション枠同士でのみ変更可)。
- Delete/Backspaceキーまたは削除ボタンで削除可能。
- Undo/Redoの履歴対象に含める。
### 2-4. データ構造
- セクション枠は既存の要素配列に `type: "section"` として追加する。
- 保存するJSONフィールド: `{ id, type:"section", x, y, width, height, label, bgColor, borderColor, borderWidth, borderRadius }`
- 既存のJSON読み込み時に `type:"section"` がなければ無視するだけなので後方互換を維持できる。
### 2-5. 書き出し
- PNG/JPG書き出し時、セクション枠は他要素と同様にキャンバスに描画される。
- ピンメモの「書き出し時に含む/含まない」切替と同様に、セクション枠も書き出し時の表示/非表示をトグルで選択できるチェックボックスをプロパティパネルに追加する。
### 2-6. テンプレートへの適用
- 既存10種のテンプレートのうち「夢・目標」「ブランド」「ビジネス」の3種にあらかじめ2〜3個のセクション枠をプリセットとして組み込み、テンプレート選択時から区画が見える状態にする。
## 3. 既存機能との整合
- セクション枠はz-index最背面固定のため、既存の全要素の操作(ドラッグ・リサイズ・グループ化等)に干渉しない。
- スマートガイドのスナップ対象にセクション枠の辺・中心線を含めることで位置合わせに活用できる。
- グループ化の対象からはセクション枠を除外し、誤ってグループに入らないようにする。
- localStorageの自動保存・JSON書き出し/読み込みには既存の要素配列をそのまま使い回すため実装変更は最小限。
💬 返信 (3)
🛠 開発を開始しました (機能追加: moodboard)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「MoodBoard Maker ビジョンボード&ムードボード作成」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=moodboard
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/moodboard/
ご利用ありがとうございます!
ご要望いただいた「MoodBoard Maker ビジョンボード&ムードボード作成」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=moodboard
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/moodboard/
ご利用ありがとうございます!
Echo
Iris