アプリUI/UX改善
UI改善、注釈画像、開発者向けプロンプトを生成
アプリUI/UX改善
UI改善、注釈画像、開発者向けプロンプトを生成
コンテンツ紹介
説明
AndroidやiOSの既存アプリのスクリーンショットを、開発者が実装できる明確なUI/UX改善案へと変換します。 それぞれの変更について以下を取得できます: • 提案する結果を示すクリーンなモックアップ。 • 番号付きの矢印が付いた、対応する注釈画像。 • 変更点、維持すべき点、インタラクションの動作、結果の検証方法を説明する、コピー可能な実装プロンプト。 人間やAIのコーディングアシスタントと協働するアプリオーナー、開発者、デザイナー向けに設計されています。 デフォルトでアプリケーションのアイデンティティを保持し、解決したい問題に焦点を当てます。大小の画面、テキストスケーリング、アクセシビリティ、多言語のRTL/LTRレイアウトを考慮します。 デフォルト言語は英語です。ユーザーの言語が特定できる場合はその言語で応答し、翻訳が要求されない限りアプリのインターフェース言語を保持します。 視覚的な成果物の生成には、画像理解、画像生成、参照画像編集機能が必要です。コンパイル、実装、テスト済みのアプリケーションではなく、デザイン提案と開発者向け指示書を生成します。
関連スキル
すべて表示AIデザイン・成果物スタジオ
構造化された8つのフェーズを通じて、大まかなアイデアやコンテンツのアウトライン、インターフェースのスクリーンショットを、洗練された実装可能なデザイン成果物に変換します。 ### 対象ユーザー 試行錯誤によるプロンプトの調整なしで、アクセシブルなビジュアルデザインとクリーンなフロントエンドコードを必要とする創業者、プロダクトマネージャー、マーケター、教育者、クリエイター、開発者。 ### 入力内容 - デザインの目標とターゲット層(SaaSのランディングページ、ダッシュボード、モバイルUI、印刷用ワークシート、SNS画像、ポスター、ブランドキットなど)。 - 必要なコピー、寸法、ブランドカラー、または参考のスクリーンショット(省略された場合は、適切なデフォルト値が適用され、その旨が明示されます)。 ### 動作の仕組み 1. **概要と戦略**: 目的と制約を抽出し、仕様の競合を早期に検出し、最適な戦略(コンバージョン、タスク効率、可読性・印刷、アクセシビリティ優先)を選択します。 2. **ビジュアルシステム**: セマンティックなカラーパレット(WCAG 2.2 AAのコントラスト比計算に基づく)、モジュール式のタイポグラフィースケール、4px/8pxグリッドを固定します。 3. **制作とスマートフォールバック**: セマンティックなHTML5/CSS3、スケーラブルなSVGベクター、印刷対応ワークシート(`@page` / `@media print`)、W3Cデザイントークンを生成します。ラスタ画像ツールが有効でない場合は、3つの独立した画像プロンプト(厳格な階層型、クリエイティブな美観、ハイブリッド)も生成されます。 4. **厳格な4状態QA**: コントラスト、ラベル、リンク、印刷のジオメトリを監査し、すべてのチェックに `VERIFIED`(検証済み)、`NOT VERIFIED`(未検証)、`FAILED`(失敗)、`NOT APPLICABLE`(該当なし)のいずれかのタグを付けます。 ### 得られるもの - 簡潔なデザイン概要とビジュアルシステムのトークンテーブル - 実装可能なHTML/CSS/SVGファイル、または印刷可能なレイアウト - 編集およびエクスポート手順を含む4状態QAレポート ### 制限事項 FigmaやIllustratorにインポート可能なオープンフォーマット(`.html`、`.css`、`.svg`、`.pdf`、`design-tokens.json`)を出力し、クローズドなバイナリ(`.fig`、`.psd`)は出力しません。商業用のCMYK印刷校正や法的な商標確認には、人間のレビューが必要です。
画像リミックス:再現&カスタム
印象的な参考画像をもとに、広告、ファッションコンセプト、エディトリアルポートレート、商品シーン、ビジュアル探索向けのパーソナライズされたビジュアルを作成します。 Image Remixは、参考画像の魅力を分析し、被写体、スタイル、商品に合わせてアレンジできるようサポートします。気に入った構図や雰囲気を保ちながら、5つのガイド付き選択で必要な要素だけを変更できます。 5つのクリエイティブ設定 • キャラクター/被写体 — 元画像の外見を保つ、変更内容を説明する、または参考画像を指定する。 • 衣装 — 服装を保つ、新しいスタイルを説明する、または衣装の参考画像を使う。 • 環境 — 場所を保つ、またはシーンを別の場所へ移す。 • 肌のリアルさ — なめらかでリアルな肌、自然な質感、控えめなそばかす、または独自の説明を選ぶ。 • ジュエリー — 保持、デザイン変更、置き換え、削除、または参考画像の指定ができる。 仕組み 元画像をアップロードして選択を行います。必要に応じて人物、衣装、商品などの参考画像を追加してください。必要な情報が不足している場合は確認し、英語の完全な生成プロンプトを作成します。さらに、意図した仕上がりをあなたの言語で説明し、画像を1枚生成します。 変更をコントロールし、ビジュアルの魅力を保つ 変更を選ばない限り、ポーズ、フレーミング、視点、雰囲気は一貫して保たれます。新しい要素が自然になじむよう、照明、影、反射、素材感は適切に調整されます。 参考画像にはそれぞれ別の役割があります。衣装の参考画像は服装を、商品の参考画像は商品のデザインを導きます。これにより、関係のない顔、背景、アクセサリーが引き継がれるのを防ぎやすくなります。 受け取れるもの • パーソナライズされた生成画像1枚。 • 完全で再利用可能な英語の画像プロンプト。 • あなたの言語による明確な説明。 照明、フレーミング、アスペクト比、テキストについて任意の指示を追加できます。確定した選択を維持したまま、対象を絞った修正で仕上がりを調整できます。 参考画像に基づく再現であり、ピクセル単位の完全な複製は保証されません。
ビフォーアフター広告スタジオ
変化を主役に。 1枚の商品写真から、表現力豊かなアートディレクション、印象的な構図、そして変化を中心に据えた大胆なビフォーアフター広告ビジュアルを作成します。 化粧品やパーソナルケア用品から、クリーニング用品、フィットネス用品まで、このスキルは商品の用途を探り、関連するメリットを視覚化するクリエイティブな方法を提案します。 あなたの商品。あなたのクリエイティブディレクション。 写真から始めましょう。このスキルが商品を調査し、シーン、素材、ビジュアル要素、フォーマット、テキストのスタイル選びをサポートします。意外性を求めるなら、AIにクリエイティブの主導権を任せることもできます。 3つのコンセプト。3つの異なるビジュアルアイデア。 完全な画像生成プロンプト付きで、商品に合わせた3つのコンセプトを提案します。流れる布からの登場、彫刻のような空間、ドラマチックなクローズアップ、ガラスの変化、商品を中心に築かれた意外な世界などを思い描いてみてください。それぞれのコンセプトが異なるビジュアルストーリーを描きます。 ビフォーアフターを、構図の中心に。 大きく、読みやすい変化のシーンが構図をリードします。商品の配置、雰囲気、タイポグラフィが一体となり、スマートフォンの画面でも変化が際立ちます。 あなたが承認してから、作成します。 プロンプトを確認し、修正を依頼し、1つまたは3つすべてのコンセプトを選択できます。画像生成は承認後にのみ開始され、お使いのワークスペースで利用できる機能を使用します。 あなたの好みに合わせて設計。 正方形、縦長、横長、またはカスタムサイズを選べます。目を引く見出しを加える、コピーを最小限にする、あるいはビジュアルに語らせることもできます。ワークフローは使用言語に合わせて調整されますが、制作プロンプトはデフォルトで英語で作成されます。 商品をアップロード。シーンを形に。変化を際立たせましょう。
情報
- バージョン
- v2
- 最終更新
- 実行クレジット
- 使用量に応じて消費
- モデル
- 自動選択