UIインタラクション設計図

プロンプト

{
  "type": "skincare e-commerce landing page mockup",
  "brand": "{argument name=\"brand name\" default=\"DERMA CALM\"}",
  "color_palette": ["white", "light blue", "{argument name=\"primary color\" default=\"dark blue\"}"],
  "layout": {
    "header": {
      "logo": "left-aligned brand name with Japanese subtext",
      "navigation_links": {
        "count": 6,
        "labels": ["ABOUT", "PRODUCT", "FEATURE", "INGREDIENT", "VOICE", "Q&A"]
      },
      "buttons": {
        "count": 2,
        "labels": ["マイページ", "今すぐ購入する"]
      }
    },
    "hero_section": {
      "left_column": {
        "headline": "{argument name=\"hero headline\" default=\"敏感な肌にも、毎日つづけられる安心ケア。\"}",
        "subtext": "paragraph detailing low irritation, moisturizing, fragrance-free, and alcohol-free benefits",
        "buttons": {
          "count": 2,
          "labels": ["今すぐ購入する", "詳しく見る"]
        }
      },
      "center_column": {
        "product": "white pump bottle with clear cap labeled {argument name=\"product type\" default=\"Moisture Barrier Serum\"}",
        "props": ["dollop of white cream", "circular badge reading 皮膚科医監修"]
      },
      "right_column": {
        "subject": "{argument name=\"model description\" default=\"young East Asian woman with clear glowing skin touching her cheek\"}",
        "background": "blurred laboratory glassware in a bright, clean clinical setting"
      }
    },
    "bottom_features_panel": {
      "left_cards": {
        "count": 3,
        "descriptions": ["95% satisfaction with 5 stars", "shield icon for low irritation formula", "drop icon for skin barrier support"]
      },
      "right_badges": {
        "count": 3,
        "descriptions": ["no fragrance icon", "no alcohol icon", "patch tested icon"]
      },
      "footer": "fine print disclaimers at the bottom"
    }
  }
}

日本語訳

{
  "type": "スキンケアECランディングページのモックアップ",
  "brand": "{argument name=\"brand name\" default=\"DERMA CALM\"}",
  "color_palette": ["白", "ライトブルー", "{argument name=\"primary color\" default=\"ダークブルー\"}"],
  "layout": {
    "header": {
      "logo": "日本語のサブテキストを添えた左揃えのブランド名",
      "navigation_links": {
        "count": 6,
        "labels": ["ABOUT", "PRODUCT", "FEATURE", "INGREDIENT", "VOICE", "Q&A"]
      },
      "buttons": {
        "count": 2,
        "labels": ["マイページ", "今すぐ購入する"]
      }
    },
    "hero_section": {
      "left_column": {
        "headline": "{argument name=\"hero headline\" default=\"敏感な肌にも、毎日つづけられる安心ケア。\"}",
        "subtext": "低刺激、保湿、無香料、アルコールフリーの利点を詳しく述べた段落",
        "buttons": {
          "count": 2,
          "labels": ["今すぐ購入する", "詳しく見る"]
        }
      },
      "center_column": {
        "product": "クリアキャップ付きの白いポンプボトル、ラベルは {argument name=\"product type\" default=\"モイスチャーバリアセラム\"}",
        "props": ["ひとすくいの白いクリーム", "「皮膚科医監修」と書かれた円形バッジ"]
      },
      "right_column": {
        "subject": "{argument name=\"model description\" default=\"透き通るように輝く肌で頬に手を当てた若い東アジア系の女性\"}",
        "background": "明るく清潔なクリニカルな空間にぼかして配置された実験器具"
      }
    },
    "bottom_features_panel": {
      "left_cards": {
        "count": 3,
        "descriptions": ["星5つで満足度95%", "低刺激処方を示すシールドアイコン", "肌バリアサポートを示すしずくアイコン"]
      },
      "right_badges": {
        "count": 3,
        "descriptions": ["無香料アイコン", "アルコールフリーアイコン", "パッチテスト済みアイコン"]
      },
      "footer": "下部に小さな免責事項の注記"
    }
  }
}

テンプレート変数

置換可能なパラメータを含みます。角括弧内は既定値です

出典

原作者

ryuya__31

原典

元の投稿を見る ↗

収録元

freestylefly/awesome-gpt-image-2 · 134 · MIT