この記事の内容
あやね
PixsoのUIデザインメーカーで画面の目的と制約を先に定義し、DeepSeek-V4-Flashの出力を編集可能な下書きとして扱います。生成結果をそのまま出荷せず、レビュー、状態設計、アクセシビリティ、handoffまで同じファイルで確認します。
1. DeepSeek-V4-Flashが向く日常UIタスク
このモデルは、設定画面、一覧、フォーム、オンボーディングなど、短い反復で複数案を比べる作業に向きます。完成品を一度で得るためではなく、レイアウトの仮説をすばやく作るために使います。
入力には利用者、目的、主要アクション、画面幅、コンテンツ量、ブランド要件を入れます。曖昧な「きれいな画面」という指示だけでは、チームが検証できる出力になりません。
タスクとモデルを対応させる
- 最初の構造案：画面の領域、情報の優先順位、主要導線を指定する。
- 複数案の比較：同じ要件で2〜3案を作り、差分を記録する。
- 既存製品の改善：不足する状態や操作を指摘し、変更範囲を限定する。
- 最終判断：生成結果ではなく、実データとレビュー記録で採否を決める。
2. Pixsoキャンバスで生成UIを扱う
生成直後にレイヤー名、Auto Layout、コンポーネント、テキストの編集可能性を確認します。画像として貼り付いた画面は、後工程で再利用できる構造に置き換えます。
コメントには採用理由、未解決の問い、次の担当者を残します。同期編集だけで合意したとみなさず、版と決定を分けて記録します。
3. PixsoでDeepSeek-V4-Flashを使う手順
Step 1：Pixso AIを開く
PixsoのAI機能を開き、対象ファイルとページを確認します。新しい実験は既存の承認済みコンポーネントと混ざらない場所で行います。
Step 2：Designモードに切り替える
UIを生成するモードを選び、対象フレームの幅、端末、既存のライブラリを確認します。
Step 3：DeepSeek-V4-Flashを選ぶ
モデルを選択したら、利用目的と制約が一致しているかを確認します。モデル名だけで出力品質を保証しないでください。
Step 4：構造化したプロンプトを書く
「利用者」「タスク」「データ」「状態」「アクセシビリティ」「禁止事項」を短い箇条書きにします。例として、請求管理者が失敗した支払いを再試行するダッシュボードと、loading・empty・error・successを指定します。
Step 5：生成してキャンバスに配置する
結果を別フレームに配置し、元の要件と照合します。良い見た目でも主要タスクが見つからない場合は採用しません。
Step 6：変更範囲を絞って改善する
余白、ラベル、階層、状態など一つの論点を指定して再編集します。画面全体を毎回作り直すと、差分と原因が追えなくなります。
4. キャンバス内で下書きを精製する
生成後はSmart Layoutで整列を確認し、Smart Editingで限定的な文言や要素を修正します。AIの提案は候補であり、プロダクトの用語、法務、ローカライズ担当が確認します。
ブランドカラー、タイポグラフィ、角丸、影を既存の変数とコンポーネントへ置き換えます。新しい値を直接入力し続けると、同じ意味の画面で差分が増えます。
生成結果は複雑なマスク、細かいレイヤー、長いテキストで崩れることがあります。該当箇所を分割して再生成し、元の構造を残したまま比較します。
5. 下書きをインタラクティブなプロトタイプへ
主要フローを一つ選び、クリック領域、遷移、loading、error、successをつなぎます。クリックできることだけでなく、戻る操作、権限不足、再試行の結果も確認します。
レビュー担当には実データに近い長いラベルと空の状態を渡します。短いダミー文字だけで承認すると、実装時の折返し問題を見逃します。
6. デザインシステムでAI出力を制御する
新規案件ではブランドカラーから初期トークンを作り、既存案件ではTeam Libraryの承認済みコンポーネントへ置き換えます。状態、サイズ、強調度は意味のあるvariantとして定義します。
Smart Searchで再利用できる素材を探し、Smart Renameでレイヤー名を整えます。自動化後も、影響を受けたインスタンスを目視で確認します。
7. 開発者handoffとD2Cコード出力
承認済みフレーム、変数、レスポンシブ規則、画像、未解決の問題をDev Viewで共有します。D2CはReact、Vue、HTML、ArkUI、Flutter向けの出発点を作れますが、API、状態管理、認証、エラー処理は実装側で検証します。
8. 既存資産を捨てずに導入する
Figma、Sketch、Axure、Adobe XD、SVGなどの既存ファイルを取り込み、ベクター、フォント、variant、prototype trigger、Auto Layoutを比較します。
最初は重要度の低い一つの機能で試し、インポート、DeepSeekの二案生成、Smart Layout、レビュー、handoffを通します。
9. 最初の下書きを改善する
設定画面の保存ボタンが不明確、ラベルが狭い、選択肢が不足しているなど、具体的な問題を一つずつ指示します。抽象的な「もっと良くして」より、結果を判定しやすくなります。
結論
DeepSeek-V4-Flashは、Pixsoで日常画面の案を速く作るための選択肢です。短い要件から始め、編集可能な結果をデザインシステム、プロトタイプ、アクセシビリティ、handoffの証拠へ変換してから実装へ渡します。
