Editorial / Interface

UI/UX Redesign Prompt (Pop Design Style)

Full prompt

You are an experienced senior UI/UX designer specializing in new service launches and redesigns. Analyze the attached image (or input text if no image is attached) and extract **only the 'functional requirements' and 'information structure'** shown there. Based on the extracted functions, generate a high-resolution device mockup image of the app/service with a **completely refreshed design**, showing both the 'Smartphone version (mobile app)' and the 'PC version (Web dashboard or LP)' side-by-side. **Important Requests:** 1. **Design Refresh:** **Do not imitate** the visual style of the attached image at all. Propose a completely new design according to the 'Pop Design' instructions below. 2. **Functionality Maintenance:** Core app functions, such as 'Upload,' 'Video Tiling Display,' and 'Export Settings,' must be included in the UI. 3. **No Characters:** Do not place any characters or human illustrations in the image. Focus only on the UI and devices. ▼ Instructions for the Generation Process (Thinking Process) Construct the design by executing the following thought process before drawing: * [Step 1: Extraction of Functional Requirements]: Identify what the service does from the attached image (e.g., video upload, tiling edit, output) and list the necessary UI elements. * [Step 2: Formulation of Pop Design Concept]: Define a vibrant color palette, playful shapes, and approachable typography based on the '▼ New Design and Style Specification' below. * [Step 3: Responsive UI Design]: * Smartphone Version: Optimize the UI using the defined pop design so that it is fun to operate even on a small screen. Buttons should be large and easy to press. * PC Version: Design a visually enjoyable grid layout utilizing the wide screen, using the defined pop design. * [Step 4: Spatial Composition]: Set an angle where the PC and smartphone are beautifully aligned, and the new design of both screens is clearly conveyed. ▼ New Design and Style Specification * **Design Direction:** Adopt **'Fun, Approachable, and Energetic Pop Design.'** * **Color:** Use a highly saturated, vibrant multi-color palette (e.g., candy colors, bright yellow, hot pink, sky blue) to give an energetic impression. * **Shape:** Frequently use large rounded corners for buttons, cards, and windows to create a soft, tactile texture. Icons should be in a playful style drawn with thick lines. * **Font:** Use an approachable and highly legible rounded Gothic Japanese font. * **Overall Atmosphere:** Finish with a bright, positive UI that makes the user excited to interact with it. * **Composition:** Cross-platform mockup with the PC and smartphone beautifully aligned, in an isometric (oblique overhead) or front view. The background should be a bright studio environment that enhances the pop UI. * **Text:** Place accurate Japanese text indicating the functions. ▼ Input Text (App Function Definition) {argument name="app function definition" default="App to tile and export uploaded videos\nNo AI analysis function needed\nI want to be able to set the resolution!"}
View original prompt

あなたは新規サービスの立ち上げやリデザインを得意とする、経験豊富なシニアUI/UXデザイナーです。 添付された画像(もし添付がない場合は入力テキスト)を分析し、そこに示されている**「機能要件」と「情報構造」のみを抽出**してください。 その抽出した機能を元に、**デザインを完全に刷新した**、このアプリ/サービスの「スマートフォン版(モバイルアプリ)」と「PC版(WebダッシュボードまたはLP)」を並べた高解像度のデバイスモックアップ画像を生成してください。 **重要なお願い:** 1. **デザインの刷新:** 添付画像のビジュアルスタイルは**一切模倣しないでください**。後述する「ポップなデザイン」の指示に従って、全く新しいデザインを提案してください。 2. **機能の維持:** 「アップロード」「動画のタイル化表示」「エクスポート設定」など、アプリとしてのコア機能は必ずUIに含めてください。 3. **キャラクター禁止:** 画像内にキャラクターや人物のイラストは一切配置しないでください。UIとデバイスのみに集中してください。 ▼ 生成プロセスへの指示 (Thinking Process) 描画前に、以下の思考プロセスを実行してデザインを構築してください。 * [ステップ1: 機能要件の抽出]: 添付画像から、このサービスが何をするものか(動画アップロード、タイル化編集、出力など)を特定し、必要なUI要素をリストアップします。 * [ステップ2: ポップなデザインコンセプトの策定]: 下記「▼ 新しいデザイン・スタイル指定」に基づき、鮮やかなカラーパレット、遊び心のある形状、親しみやすいタイポグラフィを定義します。 * [ステップ3: レスポンシブUI設計]: * スマホ版: 定義したポップなデザインを用いて、狭い画面でも楽しく操作できるUIを最適化します。ボタンは押しやすく大きめに配置します。 * PC版: 定義したポップなデザインを用いて、広い画面を活かした視覚的に楽しいグリッドレイアウトを設計します。 * [ステップ4: 空間構成]: PCとスマートフォンを美しく並べ、両方の画面の新デザインが鮮明に伝わるアングルを設定します。 ▼ 新しいデザイン・スタイル指定 * **デザインの方向性:** **「楽しく、親しみやすく、エネルギッシュなポップデザイン」**を採用してください。 * **カラー:** 高彩度で鮮やかなマルチカラーパレット(例:キャンディカラー、ブライトイエロー、ホットピンク、スカイブルーなど)を使用し、元気な印象を与えます。 * **形状:** ボタンやカード、ウィンドウには大きな角丸(Rounded corners)を多用し、柔らかく触りたくなるような質感を出します。アイコンは太めの線で描かれた遊び心のあるスタイルにします。 * **フォント:** 親しみやすく、視認性が高い丸ゴシック系の日本語フォントを使用します。 * **全体の雰囲気:** ユーザーが操作していてワクワクするような、明るくポジティブなUIに仕上げてください。 * **構図:** アイソメトリック(斜め俯瞰)またはフロントビューで、PCとスマホが美しく並んでいるクロスプラットフォーム・モックアップ。背景はポップなUIを引き立てる明るいスタジオ環境。 * **テキスト:** 機能を示す正確な日本語テキストを配置。 ▼ 入力テキスト(アプリの機能定義) {argument name="アプリの機能定義" default="アップロードした動画をタイル化してエクスポートするアプリ\nAI分析機能は不要\n解像度の設定をできるようにしたい!"}