デザイン

​

ユースケース

​

デザイナー — 局所的なイテレーションと複数面のコラボレーション

​

プロダクトマネージャー — 必要なタイミングで高忠実度プロトタイプを更新

​

マーケティング・運営 — 多方向の素材を並行生成

​

仕組み

• Questions — 入力が不十分なときは Agent が推測で進めず、構造化された質問で意図を擦り合わせ、無駄な反復を最小化します。
• Design Plan — 生成前に Agent が Plan タブに構造化されたデザイン計画（レイアウト、スタイル、コンテンツ階層）を提示し、確認後に実行します。
• Nudge — 生成後、配色・余白・角丸など重要な決定事項は調整可能なパラメータとして公開され、ブリーフを書き直さずに微調整できます。

​

ワークスペース

​

デザインを作成する

1

Design に切り替える

QoderWork ホーム下部の入力欄でワークスペース切替（デフォルトは General）をクリックし、Design を選択します。

QoderWork の設定からデフォルトのワークスペースを変更できます。主にデザイン作業を行うなら、Design をデフォルトに設定すると一貫して使えます。

2

要件を記述する

入力欄に自然言語または音声で要件を記述します。目的、主要セクション、トーンを具体的に指定してください。例：「ブランドナビゲーション、力強い見出し、製品価値提案、メイン CTA、サブ CTA、製品 UI プレビューと顧客信頼の根拠を含む高忠実度の AI プロダクトホームページをデザインして。モダン、信頼感、洗練の方向で。」スクリーンショットやリンクは入力欄に直接ペーストできます。マイクアイコンで 音声入力 も利用できます。

3

スタイルリファレンスを選びフォルダを固定する（任意）

入力欄の下にワークスペースの任意設定が並びます：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 は選んだライブラリをベースに生成します。

4

直接実行するかデザインプランに入るかを選ぶ

送信後、Agent はまずブリーフを読み解き、軽い分析を行います（左パネルに Thinking として推論が表示されます）。そのうえで Enter design planning の選択カードを表示し、2 つのボタンを提示します：

• Run directly — 質問とプランをスキップし、現在のコンテキストでそのままキャンバスに描画します。要件がすでに明確、もしくは素早く方向性を見たい場合に便利です。
• Enter — デザインプランモードに入ります。Agent はまず質問で意図を擦り合わせ、Design Plan を作成してから生成します。高忠実度や本番品質の案件で推奨されます。

5

Agent の確認質問に答える

デザインプランモードでは、Agent が Questions タブを開き、製品タイプ・ターゲット・忠実度・ブランドアセットなどを構造化された単一選択（Other の自由記述付き）で聞きます。回答することでプランが実際のコンテキストに沿ったものになります。やり取りを省略したい場合は下部の Let AI decide をクリックしてください。

6

Design Plan を確認する

続いて Agent は Plan タブに Design Plan を書き出します：意図と方向性のサマリ、Contract パネル（成果物 / プラットフォーム / 出力 / ライブラリ / 忠実度 / スタイル）、各ファイルの目的を一行で示す Artifacts リスト。問題なければ Run plan、調整が必要なら Request changes で書き直させます。

7

キャンバスの生成を確認する

Agent は Canvas タブで生成を進めます。左パネルに Thinking として推論が表示され、各コンポーネントが配置されるたびにキャンバスが更新されます。

8

動作プレビューを確認する

Preview に切り替えて、CTA・ホバー・ナビゲーションなど実際の UI として操作確認します。

​

反復する

• キューに追加：下部の入力欄に追加指示を投げると、現在のステップ完了後に処理されます。
• 生成を停止：入力欄横のストップボタンで生成を中断できます。
• キャンバス上での選択と注釈：領域を選んで変更内容を伝えると、Agent はキャンバス文脈に基づいて調整します。フレーム全体を再生成しません。
• Nudge による微調整：生成後は配色、余白、角丸などが調整可能なパラメータとして公開されます。
• モデルの切り替え：入力欄横のモデル切替（例：Standard / Premium）で次のステップのモデルを変更できます。
• エンジニアリングファイルを直接編集：コードレベルで触りたいときは Design Files から直接編集できます。

​

典型的なシナリオ

​

プロダクトランディングページ

エンタープライズユーザー向けの SaaS プロダクトランディングページをデザインしてください。
含む要素：トップナビ、ヒーロー（見出し＋サブタイトル＋メイン CTA）、
3 列のプロダクト優位性、顧客ロゴバー、
料金比較テーブル、ボトム CTA、フッター。
スタイル：クリーン、余白多め、クールなカラーパレット。

​

マーケティングビジュアルキット

オンライン製品発表イベント向けのマーケティングビジュアルセットをデザインしてください：
1. 16:9 プロモバナー（見出し＋カウントダウン＋QR コード領域）
2. 正方形の SNS 用画像（Instagram・Twitter 向け）
3. イベントランディングページ（アジェンダ、登壇者、参加登録フォーム）
ブランドカラー #1A73E8 で統一。モダンなテック風スタイル。

​

ダッシュボード再設計

データ分析ダッシュボードを再設計してください。
含む要素：サイドバーナビ、トップフィルターバー、KPI カード 4 枚、
ライントレンドチャート、ドーナツ分布チャート、データテーブル。
Linear のデザインを参考に。ダークテーマ、情報密度は高いが
ビジュアルの階層が明確であること。

​

Qoder への引き渡し

​

次のステップ