プロダクト&インダストリアルデザイン・インターフェースコンセプト

UI スケッチを洗練されたインターフェースのモックアップに変える

UI スケッチを洗練されたインターフェイスのモックアップに変換します。リクエストごとに 1 つの画像。

完全なプロンプトは必要ありません。必要なテキスト フィールドに入力するだけです。

仕組み
Before・参考画像1枚
UI スケッチを洗練されたインターフェースのモックアップ (既存のインターフェースのワイヤーフレームまたはスクリーンショット) に変換します。
後・生成結果
UI スケッチを洗練されたインターフェースのモックアップに変換 - 生成された結果

このワークフローで作成されるもの

UI スケッチを洗練されたインターフェイスのモックアップに変換します。リクエストごとに 1 つの画像。

誰のためのものか
プロダクトデザイナー、開発者
何をするのか
補助的なビジュアルスタイル、コンポーネント、デバイスシーン
どこで使用するか
製品レビュー、デモンストレーション

リクエストごとに 1 つの画像。

必要なもの

既存のインターフェースのワイヤーフレームまたはスクリーンショット必須 · 画像 1 枚
ナビゲーション、構造、コンポーネント、および主要なエントリ ポイントを保持する
製品タイプと不変の情報アーキテクチャ必須・1項目
製品構造を変更せずに、変更を視覚的な改良に限定する

必要な入力をすべて入力します。オプションの入力は有用な場合にのみ追加し、条件付き入力はこのリクエストに適用される場合にのみ適用可能としてマークします。

このワークフローの使用方法

  1. 生成フォームを開く

    「このワークフローを使用する」を選択して、必要な入力を表示します。生成する前にサインインする必要があります。

  2. 必要な入力を追加します

    準備: 既存のインターフェイス + 製品タイプおよび不変情報アーキテクチャのワイヤーフレームまたはスクリーンショット → 補足的なビジュアル スタイル、コンポーネント、デバイス シナリオ → 現在の単一 UI コンセプト マップ。すべての必須フィールドに入力し、必要な場合にのみオプションの入力を追加し、各条件入力に該当するかどうかをマークします。

  3. テキストと出力設定を確認する

    「製品タイプと不変情報アーキテクチャ」の正確性を確認し、このユースケースに適したアスペクト比、解像度、品質を選択してください。生成フォームには、使用可能なオプションが表示されます。

  4. 生成してレビューする

    「画像の生成」を選択し、結果を確認してフルサイズの画像を開きます。以下の詳細な要件と照らし合わせて確認してください。リクエストごとに 1 つの画像。

プロンプトを書く必要がありますか?

完全なプロンプトは必要ありません。必要なテキスト フィールドに入力するだけです。

「製品タイプと不変情報アーキテクチャ」を完了して、このリクエストに何を含めるか、作成するかを説明します。生成命令を記述する必要はありません。フォーム フィールドを使用して、このワークフローで要求された画像、正確なコピー、データ、または説明を入力します。

詳細な結果要件

必須入力

既存のインターフェイス + 製品タイプおよび不変情報アーキテクチャのワイヤーフレームまたはスクリーンショット → 補足的なビジュアル スタイル、コンポーネント、デバイス シナリオ → 現在の単一 UI コンセプト マップ

入力品質

インターフェイスの目的、プラットフォーム、ページの種類、コンテンツ、参照フレーム。

構成

利用できる普遍的な公的標準はありません。使用するプラットフォームまたはサービスの要件を確認してください。

出力アスペクト比

参照イメージからではなく、選択したプラットフォーム配置またはプロダクション テンプレートから出力キャンバスを設定します。この要求に一致するオプションを選択します: UI コンセプトの作業キャンバス - 4:3 (推奨)。検証済みの配置テンプレートまたはプロダクション テンプレートで必要な場合にのみ、別の比率を使用してください。プラットフォームで固定アスペクト比が必要ない場合は、UI コンセプトの推奨作業キャンバスとして 4:3 を使用してください。適切な呼吸空間を設けて被写体を構図します。リクエストごとにアスペクト比固有の成果物を 1 つ作成します。追加の各配置を個別の出力として生成します。完全な件名、すべてのテキスト、および必要なすべての安全領域を維持しながら、選択した比率で再構成します。主題を拡大解釈したり、重要なコンテンツのトリミングを脚色として扱ったりしないでください。

変わらないもの

利用できる普遍的な公的標準はありません。使用するプラットフォームまたはサービスの要件を確認してください。

何が変わるのか

色、フォント、間隔、角の丸み。

背景と設定

利用できる普遍的な公的標準はありません。使用するプラットフォームまたはサービスの要件を確認してください。

照明と色

利用できる普遍的な公的標準はありません。使用するプラットフォームまたはサービスの要件を確認してください。

テキスト要件

利用できる普遍的な公的標準はありません。使用するプラットフォームまたはサービスの要件を確認してください。

プラットフォームのサイズのガイドライン

利用できる普遍的な公的標準はありません。使用するプラットフォームまたはサービスの要件を確認してください。

出力フォーマット

利用できる普遍的な公的標準はありません。使用するプラットフォームまたはサービスの要件を確認してください。

避けるべきもの

一般的なウェブサイト/モバイル端末モデルにより適しています。現在、First Draft は独自のデザイン システムを使用できず、特殊な形状のグラフィック デザインは失敗する傾向があります。

公式およびプラットフォームの要件

利用できる普遍的な公的標準はありません。使用するプラットフォームまたはサービスの要件を確認してください。

よくある質問

このワークフローでは何を作成できますか?

UI スケッチを洗練されたインターフェイスのモックアップに変換します。リクエストごとに 1 つの画像。

プロンプトを書く必要がありますか?

「製品タイプと不変情報アーキテクチャ」を完了して、このリクエストに何を含めるか、作成するかを説明します。生成命令を記述する必要はありません。フォーム フィールドを使用して、このワークフローで要求された画像、正確なコピー、データ、または説明を入力します。

何をアップロードする必要がありますか?

「既存のインターフェースのワイヤーフレームまたはスクリーンショット」: 画像 1 枚。必須。 JPG、PNG、および WebP がサポートされており、画像あたり最大 10 MB です。

一世代が何を生み出すのか?

リクエストごとに 1 つの画像。

よくある検索用語

ui mockup generatorai mockup generator for app

公的証拠と情報源

直接関連する公的情報源が 1 件見つかり、具体的な制約が 3 種類抽出されました。以下のコンテンツは、出典から明らかな情報のみを再説明しています。空白フィールドへの入力は行われません。

画像を生成する

UI スケッチを洗練されたインターフェースのモックアップに変える

既存のインターフェイス + 製品タイプおよび不変情報アーキテクチャのワイヤーフレームまたはスクリーンショット → 補足的なビジュアル スタイル、コンポーネント、デバイス シナリオ → 現在の単一 UI コンセプト マップ