サムネイル作成支援ツールのデザイン作成をお願いします。 以下が要求定義になります。 # サムネイル作成支援ツール 要求定義書 ## 1. 背景 現在、ブログ運営において記事ごとにサムネイル画像を作成しているが、 生成系AIサービスを活用しても次のような課題が発生している。 - 生成される画像のクオリティが安定せず、意図したデザインにならない - テキストベースのプロンプトでは細かな指示が困難 - 作成・修正に時間がかかり、作業負担が大きい このため、サムネイル作成に過剰な工数を要し、 本来注力すべきコンテンツ制作やマーケティング活動に支障が出ている。 ## 2. 目的 サムネイル作成にかかる作業時間とストレスを大幅に削減し、 誰でも短時間で高品質なサムネイル生成用プロンプトを作成できる環境を構築する。 これにより、ブログ運営全体の効率化とコンテンツ品質向上を実現する。 ## 3. 達成したい世界 - 専門的なプロンプト知識がなくても、誰もが簡単にサムネイルの指示作成ができる - 用途・ターゲットに最適化されたサムネイルを短時間で準備できる - 作成作業に伴う心理的負担を軽減し、企画や制作に集中できる環境を整える ## 4. 要求内容 - **用途（サービス向け）・ターゲットユーザー・出力サイズ**を選択または入力できること - 作成モードとして、以下2種類を提供すること - **簡易作成モード**：フォーム入力だけでプロンプトを自動生成 - **カスタム作成モード**：GUI上で文字・画像・アイコンなどの要素を自由に配置・編集可能 - 文字要素に対しては、装飾やエフェクト（影、縁取り、発光、ぼかし等）を設定できること - アイコン・イラストには、一般的な素材に加えて**人物画像**も含めること - 作成結果として、ChatGPT向けに最適化されたプロンプトを生成・表示し、ワンクリックでコピーできること ## 5. 想定利用者 - ブログ運営者 - SNSマーケティング担当者 - 個人事業主・フリーランス ## 6. 成功イメージ - サムネイル作成にかかる時間を現状比で50%以上削減できる - サムネイルのクオリティ満足度を向上できる - サムネイル作成に対する「面倒」「難しい」といった負担感を解消できる 以下が要件定義となります。 # サムネイル作成支援ツール 要件定義書 ## 1. システム概要 本ツールは、ブログ記事やSNS投稿用のサムネイル画像を生成する際、 誰でも簡単・直感的にプロンプトを作成できる支援ツールである。 用途・ターゲット・サイズを入力し、必要に応じてGUIまたは簡易作成モードで要素の情報を設定し、 最終的にChatGPT等で利用できるプロンプトを生成・コピーできる。 本ツールはフロントエンドのみで動作し、データ保存はブラウザローカルで行う。 --- ## 2. 機能要件 ### 2.1 共通機能 | ID | 機能名 | 概要 | |----|---------|------| | F-01 | トップ画面 | 作成モード選択（簡易 or カスタム） | | F-02 | 入力フォーム | 用途・ターゲット・サイズの入力／選択 | | F-03 | 簡易作成モード | 入力フォームで用途・ターゲット・サイズに加え、以下を入力可能：<br>・文字要素：テキスト内容、エフェクト設定、位置（画面上／右／下／他要素の下 など）<br>・画像要素：画像カテゴリ選択（人物画像・アイコン等）、配置位置（同上）<br>各要素はリスト選択形式で大まかな位置指定を行い、GUIモードのような自由配置は行わない。入力内容から自動でプロンプトを生成。 | | F-04 | カスタム作成モード | GUIエディタで要素を配置・編集 | | F-05 | プロンプト出力 | 生成されたプロンプトを画面表示 | | F-06 | コピー機能 | 出力プロンプトをワンクリックでコピー | | F-07 | 設定保存 | ブラウザローカルストレージに「作成内容」を**複数保存可能**。保存名を指定して新規保存／既存保存名で上書き保存ができる。保存データは後から読み込み可能で、読み込んだデータはカスタム作成モードのGUIエディタに内容が反映される。 | --- ### 2.2 カスタム作成モード機能（F-04詳細） | ID | 機能名 | 概要 | |----|---------|------| | C-01 | 要素配置 | 文字・画像枠・アイコン枠・吹き出し・枠線などの「ワイヤーフレーム」をGUI上に配置。各要素に付加情報を設定可能。画像・アイコンは実際の画像を表示せず、枠として表現。 | | C-02 | 文字表示 | 入力したテキスト内容をGUI上に**そのまま表示**し、位置関係・サイズ感の確認を可能にする。文字にエフェクトをかけたプレビュー表示は不要。 | | C-03 | 文字編集 | テキスト内容、フォント種類、サイズ、色、装飾、エフェクトなどの付加情報を設定可能（※GUIにはエフェクトは反映しない） | | C-04 | 画像枠編集 | 画像枠（人物画像、背景画像など）を配置し、各枠に対して「どのような画像か」の付加情報を設定可能。 | | C-05 | レイアウト保存 | 編集したワイヤーフレーム構造および各要素の付加情報をブラウザローカルストレージに**複数保存可能**。保存名指定により新規保存／既存保存名で上書き保存が可能。保存データを読み込むと、GUIエディタに該当の要素配置・付加情報が適用され、続きから編集できる。 | | C-06 | 編集履歴 | undo／redo機能を提供。 | --- ## 3. 非機能要件 - ブラウザのみで動作（サーバ不要、DB不要） - データ保存はブラウザローカルストレージを使用 - レスポンシブ対応（PC／タブレット／スマホ） - 日本語UI - 軽快な操作感（1秒以内の画面応答） - 個人情報の外部送信なし - プロンプト出力はChatGPT互換形式 --- ## 4. UI要件（概要） - トップ画面：作成モード選択UI - 簡易作成画面： - 入力フォーム（用途／ターゲット／サイズ） - 要素追加入力（テキスト内容・エフェクト・位置／画像カテゴリ・位置） - プロンプト生成 → コピー - カスタム作成画面： - ワイヤーフレームエディタ（画像枠や要素は枠のみ表示、**テキストは実内容を表示**） - プロンプト生成 → コピー - 画面構成：ヘッダー／作成エリア／出力エリア／操作ボタン --- ## 5. 制約条件 - 本ツール自体で画像ファイルは出力しない - GUI上では画像プレビューは行わない（画像枠のみ） - テキスト内容は実際に表示するが、装飾・エフェクトのプレビューは行わない - 簡易作成モードでは自由な位置調整は不可（大まかな位置のみ選択可） - 生成プロンプトはChatGPT等外部AIに入力して画像生成する前提 - サーバ・データベースを用いない（完全フロントエンド） --- ## 6. 想定利用シナリオ ### 簡易作成モード 1. トップ画面で「簡易作成」を選択 2. 用途／ターゲット／サイズを入力 3. 文字要素を追加（内容入力・エフェクト設定・配置位置選択） 4. 画像要素を追加（カテゴリ選択・配置位置選択） 5. 必要な要素を全て追加 6. 「プロンプト生成」ボタンを押す 7. プロンプトが出力エリアに表示される 8. 「コピー」ボタンでプロンプト取得 9. 取得したプロンプトをChatGPTに貼り付けて画像生成 ### カスタム作成モード 1. トップ画面で「カスタム作成」を選択 2. GUI上で画像枠やテキストを配置 - 画像枠はワイヤーフレームとして配置 - テキストは入力内容をそのまま配置 3. 各要素に付加情報（どのような画像か／フォント指定など）を設定 4. 必要に応じて保存名を付けて保存（新規保存／上書き保存） 5. 保存データ読み込み時には既存GUIに要素配置と情報が反映 6. 「プロンプト生成」ボタンを押す 7. プロンプトが出力エリアに表示される 8. 「コピー」ボタンでプロンプト取得 9. 取得したプロンプトをChatGPTに貼り付けて画像生成 以下が基本設計となります。 # サムネイル作成支援ツール 基本設計書 ## 1. システム構成図 ブラウザ（フロントエンドのみ） ┌───────────────────────────────┐ │ ブラウザ（フロントエンドのみ） │ │ ┌───────────────────────┐ │ │ │ トップ画面（モード選択） │ │ │ ├───────────────────────┤ │ │ │ 簡易作成モード画面 │ │ │ │ ├─ 入力フォーム（用途/ターゲット/サイズ）│ │ │ │ ├─ 文字・画像要素入力フォーム │ │ │ │ └─ プロンプト出力／コピーボタン │ │ │ ├───────────────────────┤ │ │ │ カスタム作成モード画面 │ │ │ │ ├─ GUIエディタ（ワイヤーフレーム） │ │ │ │ ├─ プロンプト出力／コピーボタン │ │ │ │ └─ 保存／読み込み機能 │ │ └───────────────────────────────┘ ※ サーバなし、外部APIなし、完全フロントエンド構成 --- ## 2. 画面・機能設計 ### 2.1 トップ画面 | UI要素 | 内容 | 処理概要 | |---------------|---------------------|------------------------------| | ヘッダー | ツール名ロゴ | 常時表示 | | モード選択ボタン | 簡易作成モード選択 | 簡易作成モード画面へ遷移 | | モード選択ボタン | カスタム作成モード選択 | カスタム作成モード画面へ遷移 | --- ### 2.2 簡易作成モード画面 | UI要素 | 内容 | 処理概要 | |----------------|-----------------------------|----------------------------------------| | ヘッダー | ツール名ロゴ | 常時表示 | | 用途入力欄 | 入力フォーム | 用途情報を入力 | | ターゲット入力欄 | 入力フォーム | ターゲット情報を入力 | | サイズ入力欄 | 入力フォーム | 出力サイズ情報を入力 | | 文字要素入力欄 | 入力フォーム | テキスト内容を入力 | | エフェクト選択 | セレクトボックス | テキストエフェクト選択 | | 文字位置選択 | セレクトボックス | テキスト配置位置を選択（上／右／下／他要素下） | | 画像カテゴリ選択 | セレクトボックス | 画像カテゴリを選択（人物／アイコン等） | | 画像位置選択 | セレクトボックス | 画像配置位置を選択（上／右／下／他要素下） | | 要素追加ボタン | ボタン | 入力内容の文字／画像要素をリストに追加 | | 要素リスト | 追加済み要素の一覧 | 登録済み要素の内容確認・削除機能 | | プロンプト生成 | ボタン | 入力内容・要素リストからプロンプトを自動生成 | | コピー | ボタン | 生成されたプロンプトをクリップボードにコピー | --- ### 2.3 カスタム作成モード画面 | UI要素 | 内容 | 処理概要 | |----------------|-----------------------------|----------------------------------------| | ヘッダー | ツール名ロゴ | 常時表示 | | ワイヤーフレームエディタ | 配置エリア | 要素を配置（画像枠=矩形枠／文字=実テキスト） | | 要素追加ボタン | ボタン | エディタ上に新規要素追加 | | 要素削除ボタン | ボタン | 選択要素を削除 | | 要素移動 | UI操作（ドラッグ／矢印等） | 要素位置を移動 | | サイズ調整 | UI操作（リサイズハンドル等） | 要素サイズを変更 | | 付加情報編集 | ポップアップ | 選択要素の付加情報（属性）を編集 | | 保存 | ボタン | 現在の配置／情報をローカルストレージに保存（新規／上書き） | | 読み込み | ボタン | 保存データを読み込み、エディタに反映 | | プロンプト生成 | ボタン | 配置要素＋付加情報からプロンプトを生成 | | コピー | ボタン | 生成されたプロンプトをクリップボードにコピー | --- ### 2.3.1 付加情報編集ポップアップ（カスタム作成モード） #### テキスト要素の場合 テキスト要素は `contentParts[]` 配列の各要素を編集対象とし、 「見出し」「タイトル」など複数の部分文字列を1つのテキスト要素内で別style設定可能。 ※ 部分が1つのみの場合も `contentParts[]` 配列の1要素として扱う。 | UI要素 | 内容 | 処理概要 | |-----------------------|-----------------------------|----------------------------------------| | 部分テキストリスト | contentParts[] 一覧 | 既存の部分テキスト一覧をリスト表示 | | 部分選択 | リスト内選択 | 編集対象の部分を選択 | | テキスト入力欄 | 入力欄（選択部分の内容） | 選択部分のテキストを編集 | | フォント名選択 | セレクトボックス | 選択部分のフォント名を選択 | | フォントサイズ入力 | 数値入力欄 | 選択部分のフォントサイズを入力 | | 色選択 | カラーピッカー | 選択部分の文字色を設定 | | エフェクト選択 | セレクトボックス | 選択部分のエフェクトを設定 | | 部分追加ボタン | ボタン | 新しい部分テキスト（新要素）を配列に追加 | | 部分削除ボタン | ボタン | 選択部分のテキストを配列から削除 | | 部分並び替え（オプション） | UI操作（上下ボタン等） | contentParts[] 内の順序を変更 | | 保存ボタン | ボタン | 編集内容（contentParts[]）を対象要素に反映しポップアップを閉じる | | キャンセルボタン | ボタン | 編集内容を破棄しポップアップを閉じる | --- #### 画像要素の場合 | UI要素 | 内容 | 処理概要 | |-----------------------|-----------------------------|----------------------------------------| | 画像カテゴリ選択 | セレクトボックス | 画像カテゴリを編集（person／icon等） | | 説明入力欄 | 入力フォーム | 画像内容の説明文を編集 | | 保存ボタン | ボタン | 編集内容を対象要素に反映しポップアップを閉じる | | キャンセルボタン | ボタン | 編集内容を破棄しポップアップを閉じる | --- ## 3. 処理設計（イベント処理表） ### 3.1 簡易作成モード画面 | イベントID | UI要素名 | イベント内容 | 実行処理概要 | |-------------|----------------|------------------------|-------------------------------------------| | EVT-001 | 要素追加ボタン | クリック | 入力欄の内容（文字 or 画像）をバリデーション → 要素リストに追加 | | EVT-002 | プロンプト生成 | クリック | 入力値・要素リスト内容を元にテンプレート展開 → プロンプト文字列生成 | | EVT-003 | コピー | クリック | 表示中のプロンプト文字列をクリップボードコピー | --- ### 3.2 カスタム作成モード画面 | イベントID | UI要素名 | イベント内容 | 実行処理概要 | |-------------|----------------|------------------------|-------------------------------------------| | EVT-101 | 要素追加ボタン | クリック | エディタ上に新規要素（文字枠 or 画像枠）を追加／初期位置配置 | | EVT-102 | 要素削除ボタン | クリック | 選択中要素をエディタ上から削除 | | EVT-103 | 付加情報編集 | 編集確定 | 編集した属性内容を対象要素に反映 | | EVT-104 | 保存 | クリック | エディタ上の配置情報＋付加情報をJSON構造にまとめ → localStorage保存（保存名指定／上書き） | | EVT-105 | 読み込み | クリック | localStorageから指定データ読み込み → エディタ上に配置反映 | | EVT-106 | プロンプト生成 | クリック | エディタ上の要素情報＋付加情報からプロンプト生成ロジック実行 | | EVT-107 | コピー | クリック | 表示中のプロンプト文字列をクリップボードコピー | --- ## 4. データ設計 ### 4.1 保存データフィールド定義 | フィールド | データ型 | 必須 | 説明 | |--------------------------------------|-------------|------|-------------------------------------------| | name | 文字列 | ○ | 保存名 | | createdAt | 日時文字列 | ○ | 保存日時（ISO形式） | | mode | 文字列 | ○ | 作成モード（"simple" or "custom"） | | canvasSize.width | 数値 | ○ | キャンバス横幅 | | canvasSize.height | 数値 | ○ | キャンバス高さ | | elements | 配列 | ○ | 要素一覧 | | elements[].id | 文字列 | ○ | 要素ID（ユニークID） | | elements[].type | 文字列 | ○ | 要素種別（"text" or "image"） | | elements[].position.x | 数値 | ○ | 要素のX座標 | | elements[].position.y | 数値 | ○ | 要素のY座標 | | elements[].size.width | 数値 | ○ | 要素の幅 | | elements[].size.height | 数値 | ○ | 要素の高さ | ※ type="text" の場合のみ有効 | フィールド | データ型 | 必須 | 説明 | |--------------------------------------|-------------|------|-------------------------------------------| | elements[].contentParts | 配列 | ○ | テキスト部分ごとのリスト | | elements[].contentParts[].text | 文字列 | ○ | 部分テキスト内容 | | elements[].contentParts[].style.fontFamily | 文字列 | 任意 | フォント名 | | elements[].contentParts[].style.fontSize | 数値 | 任意 | フォントサイズ | | elements[].contentParts[].style.color | 文字列 | 任意 | 色（16進カラーコード） | | elements[].contentParts[].style.effect | 文字列 | 任意 | エフェクト種別 | ※ type="image" の場合のみ有効 | フィールド | データ型 | 必須 | 説明 | |--------------------------------------|-------------|------|-------------------------------------------| | elements[].imageCategory | 文字列 | 任意 | 画像カテゴリ（人物／アイコンなど） | | elements[].description | 文字列 | 任意 | 画像内容の説明文 | --- ## 5. 出力プロンプト設計 プロンプトは保存データ（elements配列）および入力フォーム情報を基にテンプレート展開で生成する。 ### 5.1 出力フォーマット例 ```text 【用途】ブログ記事のアイキャッチ 【ターゲット】30代女性向け 【サイズ】1200x800 【要素リスト】 1. テキスト - 内容: - "見出し" （フォント: Arial / サイズ: 24 / 色: #000000） - "タイトル" （フォント: Arial / サイズ: 24 / 色: #ff0000） - 位置: x=100, y=50 2. 画像（カテゴリ: person） - 内容: 笑顔の女性 - 位置: x=300, y=200 以下はコーディング規約となるので厳守でお願いします。 - TailwindCSSは使用せず、すべてカスタマイズしたCSSで実装してください。 - shadcn/ui は使用せず、すべてカスタマイズしたコンポーネントで実装してください。 - UIはAtomic Designの概念に基づいて実装してください。 - atoms - 最も基本的なUI要素（例：ボタン、入力フィールド、ラベル） - components/atomsディレクトリに配置 - 基本的にサーバーコンポーネントとして実装する - 基本的にステートレスコンポーネントとして実装する - 単にプロップスを受け取り、UIをレンダリングする役割とする - 基本的にサーバーコンポーネントとして実装する - molecules - 複数の原子を組み合わせた機能的なUIグループ（例：フォーム、カード） - components/moleculesディレクトリに配置。 - 基本的にサーバーコンポーネントとして実装する - 基本的にステートレスコンポーネントとして実装する - 単にプロップスを受け取り、UIをレンダリングする役割とする - 基本的にサーバーコンポーネントとして実装する - organisms - 複数の分子（場合によっては原子も）を組み合わせて、より複雑なUIセクションを形成（例：ヘッダー、フッター） - components/organismsディレクトリに配置。 - ステート管理が不要であれば、サーバーコンポーネントとして実装する - templates - ページのレイアウトを定義し、実際のコンテンツを配置する前の構造を提供 - components/templatesディレクトリに配置 - pages - 各種ルーティング用のページ - state管理とstateを更新するためのロジックはhokksを利用する - Next.jsに依存しない様々なプロジェクトで使えるような共通ロジックは「utils」フォルダに実装してください。 - api疎通は「Repository Factory」パターンで実装してください。 - apiから受け取ったデータは「zod」で型チェックを行うようにしてください。 zodの定義はmodelsフォルダに実装してください。 ### ディレクトリ構成（サンプル一部のみ） /components/ ├── atoms/ │ ├── button/ │ │ ├── index.tsx │ │ ├── style.css │ ├── badge/ │ │ ├── index.tsx │ │ ├── style.css /pages/ ├── index.tsx ├── style.css /models/ ├── hoge.ts /repositories/ ├── factory.ts ├── hogeRepository.ts /utils/ ├── date.ts ├── file.ts