UI・Web素材 / #156
アプリ画面のモックアップ
UI mockup / Screen / Wireframe
本物のUIに見せたいなら、余白とタップ領域の指定が効きます。
PROMPT
スマートフォンアプリの画面デザインを1枚作成して。縦位置 9:16。 構成:上部にヘッダー、その下に大きなカードが1枚、下部にタブバーが4項目。 カードには写真の領域と、その下にテキスト行を模した3本のグレーのバー(長さがそれぞれ違う)。 角丸は12px相当で統一、要素間の余白は広く均等に。 配色は白背景、グレーの階調、アクセント1色のみ。 実在するアプリやブランドのロゴ、実際の文章は入れない。
TIPS
- テキストは「グレーのバー」で表すと、文字崩れを完全に回避できます。
- 実在アプリの模倣にならないよう、ロゴやブランド名は入れないでください。
Related
UI・Web素材の他のプロンプト
#154
アプリのアイコン
App icon / Rounded square / Simple
#155
Webサイトのヒーロー画像
Hero / Web / Copy space
#157
デバイスに画面をはめ込む
Device mockup / Presentation / Studio
#158
広告バナーをサイズ展開する
Banner / Multi-size / Layout
#159
シームレスな背景パターン
Seamless / Tile / Pattern