> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qoder.com/llms.txt
> Use this file to discover all available pages before exploring further.
# デザイン
デザインは QoderWork のカスタムワークスペースで最初に提供される領域特化モードです。AI ネイティブの「デザイン as コード」キャンバス上で、自然言語（あるいは音声）で要件を記述するだけで、無限キャンバスに **実行可能・編集可能・引き渡し可能** なデザイン成果物を得られます。
クラウド協調のベクター編集を中心に据えた従来のデザインツールと異なり、デザインは成果物をチームで共同管理するコード資産として扱います。最初の一歩からデザイナーとエンジニアが同じ実行可能ファイルを操作し、成果物はワンクリックで Qoder IDE に引き渡せます。デザインからコードへの「ロスのある引き渡し」を排除します。
## ユースケース
### デザイナー — 局所的なイテレーションと複数面のコラボレーション
従来のフローでは、修正のたびに切り出し、再エクスポート、注釈の更新、エンジニアとの同期、最終ピクセルの検証が発生します。デザインではこれらをキャンバス内に圧縮します：領域を選択し意図を注釈すれば、Agent がキャンバス文脈に基づいて即座に調整します。Nudge を使えば配色・余白の微調整を満足するまでリアルタイムに行えます。成果物は読みやすく、引き継ぎ可能なエンジニアリング構造を保ちます。
### プロダクトマネージャー — 必要なタイミングで高忠実度プロトタイプを更新
ハイファイプロトタイプは設計の方向性を直感的に伝えられますが、通常はデザインチームの工数に依存します。デザインは PM に第三の選択肢を提供します：構造化された Questions で意図を擦り合わせ、Design Plan で方向性を確認したうえで、デザインクオリティを備えた操作可能なプロトタイプをキャンバス上で得られます。レビューや関係者向けデモにそのまま使えます。
### マーケティング・運営 — 多方向の素材を並行生成
1 つのキャンペーンでもキービジュアル、バナー、ランディングページなど多数の成果物が必要ですが、デザインリソースが限られると単一方向しか出せません。デザインでは並行生成が現実的です：テーマとトーンを入力し、Design Plan で方向性を確認すれば、**Auto Style Reference** でリファレンスを切り替えるだけでポスター、バナー、ランディングページなど高頻度の成果物を多方向にカバーできます。
## 仕組み
デザインは 3 つのメカニズムで AI のデザイン生成プロセスを再構築します：
* **Questions** — 入力が不十分なときは Agent が推測で進めず、構造化された質問で意図を擦り合わせ、無駄な反復を最小化します。
* **Design Plan** — 生成前に Agent が **Plan** タブに構造化されたデザイン計画（レイアウト、スタイル、コンテンツ階層）を提示し、確認後に実行します。
* **Nudge** — 生成後、配色・余白・角丸など重要な決定事項は調整可能なパラメータとして公開され、ブリーフを書き直さずに微調整できます。
## ワークスペース
右側のキャンバスには 5 つのタブがあります：
| タブ | 役割 |
| :------------------- | :--------------------------- |
| **Canvas** | 無限キャンバス。Agent はここで生成と編集を行います |
| **Design Files** | キャンバスの裏にあるエンジニアリングファイル |
| **Preview** | 実際の UI として動作プレビュー |
| **Style References** | デザインで使用中のスタイルリファレンスを確認・切り替え |
| **Plan** | Agent が生成前に拠り所とする構造化デザインプラン |
## デザインを作成する
QoderWork ホーム下部の入力欄でワークスペース切替（デフォルトは **General**）をクリックし、**Design** を選択します。
QoderWork の設定からデフォルトのワークスペースを変更できます。主にデザイン作業を行うなら、Design をデフォルトに設定すると一貫して使えます。
入力欄に自然言語または音声で要件を記述します。目的、主要セクション、トーンを具体的に指定してください。例：*「ブランドナビゲーション、力強い見出し、製品価値提案、メイン CTA、サブ CTA、製品 UI プレビューと顧客信頼の根拠を含む高忠実度の AI プロダクトホームページをデザインして。モダン、信頼感、洗練の方向で。」*
スクリーンショットやリンクは入力欄に直接ペーストできます。マイクアイコンで [音声入力](/ja/qoderwork/voice-input) も利用できます。
入力欄の下にワークスペースの任意設定が並びます：**Work in a Folder**、**Auto Style Reference**、**Fidelity**、**Component library**。
* **Auto Style Reference** をクリックして生成前に全体トーンを固定します——**Auto Style Reference** のままにすると Canvas が 161 のリファレンスから最適なものを自動選択します。Airbnb、Airtable、Apple、Carbon、Cloudscape などの特定スタイルも指定可能で、上部の検索ボックスで名前で絞り込めます。
* **Work in a Folder** をクリックしてタスクをローカルディレクトリに紐づけます——Agent はそのディレクトリにエンジニアリングファイルを書き込むため、長期的なメンテナンスや Qoder IDE への引き渡しに向きます。
* **Fidelity** をクリックして **Wireframe**（低忠実度のレイアウトを優先し、視覚スタイルを最小限に）と **High fidelity**（最終納品に近い視覚デザインとディテール、デフォルト）を切り替えます。
* **Component library** をクリックして対象を選びます——デフォルトは **No library**（HTML-first。ブリーフで React など別フレームワークが明示的に指定されない限り）。**shadcn/ui**、**Spark Design**、**Ant Design** の 3 つの React コンポーネントライブラリから選ぶこともでき、Agent は選んだライブラリをベースに生成します。
送信後、Agent はまずブリーフを読み解き、軽い分析を行います（左パネルに **Thinking** として推論が表示されます）。そのうえで **Enter design planning** の選択カードを表示し、2 つのボタンを提示します：
* **Run directly** — 質問とプランをスキップし、現在のコンテキストでそのままキャンバスに描画します。要件がすでに明確、もしくは素早く方向性を見たい場合に便利です。
* **Enter** — デザインプランモードに入ります。Agent はまず質問で意図を擦り合わせ、Design Plan を作成してから生成します。高忠実度や本番品質の案件で推奨されます。
デザインプランモードでは、Agent が **Questions** タブを開き、製品タイプ・ターゲット・忠実度・ブランドアセットなどを構造化された単一選択（*Other* の自由記述付き）で聞きます。回答することでプランが実際のコンテキストに沿ったものになります。やり取りを省略したい場合は下部の **Let AI decide** をクリックしてください。
続いて Agent は **Plan** タブに **Design Plan** を書き出します：意図と方向性のサマリ、**Contract** パネル（成果物 / プラットフォーム / 出力 / ライブラリ / 忠実度 / スタイル）、各ファイルの目的を一行で示す **Artifacts** リスト。問題なければ **Run plan**、調整が必要なら **Request changes** で書き直させます。
Agent は **Canvas** タブで生成を進めます。左パネルに **Thinking** として推論が表示され、各コンポーネントが配置されるたびにキャンバスが更新されます。
**Preview** に切り替えて、CTA・ホバー・ナビゲーションなど実際の UI として操作確認します。
## 反復する
ブリーフを最初から書き直す必要はありません。同じキャンバスで反復できます。
* **キューに追加**：下部の入力欄に追加指示を投げると、現在のステップ完了後に処理されます。
* **生成を停止**：入力欄横のストップボタンで生成を中断できます。
* **キャンバス上での選択と注釈**：領域を選んで変更内容を伝えると、Agent はキャンバス文脈に基づいて調整します。フレーム全体を再生成しません。
* **Nudge による微調整**：生成後は配色、余白、角丸などが調整可能なパラメータとして公開されます。
* **モデルの切り替え**：入力欄横のモデル切替（例：**Standard** / **Premium**）で次のステップのモデルを変更できます。
* **エンジニアリングファイルを直接編集**：コードレベルで触りたいときは **Design Files** から直接編集できます。
Agent は会話のコンテキストを保持するため、*「レイアウトはそのままで、ヒーローを暗めにして CTA を広げて」* のような局所的な指示が、キャンバスに既にある内容に正確に反映されます。
## 典型的なシナリオ
### プロダクトランディングページ
```plaintext theme={null}
エンタープライズユーザー向けの SaaS プロダクトランディングページをデザインしてください。
含む要素：トップナビ、ヒーロー（見出し＋サブタイトル＋メイン CTA）、
3 列のプロダクト優位性、顧客ロゴバー、
料金比較テーブル、ボトム CTA、フッター。
スタイル：クリーン、余白多め、クールなカラーパレット。
```
### マーケティングビジュアルキット
```plaintext theme={null}
オンライン製品発表イベント向けのマーケティングビジュアルセットをデザインしてください：
1. 16:9 プロモバナー（見出し＋カウントダウン＋QR コード領域）
2. 正方形の SNS 用画像（Instagram・Twitter 向け）
3. イベントランディングページ（アジェンダ、登壇者、参加登録フォーム）
ブランドカラー #1A73E8 で統一。モダンなテック風スタイル。
```
### ダッシュボード再設計
```plaintext theme={null}
データ分析ダッシュボードを再設計してください。
含む要素：サイドバーナビ、トップフィルターバー、KPI カード 4 枚、
ライントレンドチャート、ドーナツ分布チャート、データテーブル。
Linear のデザインを参考に。ダークテーマ、情報密度は高いが
ビジュアルの階層が明確であること。
```
## Qoder への引き渡し
右上の **Handoff to Qoder** をクリックすると、現在のコード成果物を Qoder IDE にそのまま引き渡せます。フロントエンドコードを書けるデザイナーは、同じブランチで反復を続けて直接コミットすることもでき、デザインと開発のあいだでツールを行き来する必要がなくなります。
## 次のステップ
AI Slides でプレゼンテーション作成
AI 協作の文書執筆と校正