
UI / UX デザイン
パステル調ランニングアプリ3画面UIモックアップ
愛らしいマスコットと柔らかいパステルトーンを備えた3画面のフィットネスアプリUIを生成します。マスコットやアクセント色を変更して応用可能です。
uiデザインモバイルアプリフィットネスランニングアプリモックアップパステルカラーマスコット
プロンプト
{
"type": "モバイルフィットネスアプリUIモックアップ",
"style": "クリーンでモダンなパステルアプリデザイン、ソフトベージュと温かみのあるホワイトサーフェス、落ち着いたセージグリーンのアクセント、丸みを帯びたカードとボタン、繊細なシャドウ、極細のミニマリスト線画アイコン、[ナマケモノ]のマスコットによる親しみやすく遊び心のあるブランディング、ダークブラウンのドットグリッド背景によるDribbble風プレゼンテーション",
"theme": "[ランニング記録アプリ]",
"layout": {
"device_count": 3,
"arrangement": "均等に配置された3台の縦長スマートフォン画面の正面並列表示",
"background": "薄い均等ドットグリッドの非常に濃いブラウン",
"screens": [
{
"position": "left",
"screen_type": "ホームダッシュボード",
"header": {
"greeting": "Good morning, Runner! 👋",
"left_icon": "none",
"right_icon": "notification bell"
},
"hero_card": {
"headline": "Ready for a great day?",
"subcard_text_line_1": "Every step forward is a win.",
"subcard_text_line_2": "Let's make it count. 🌱",
"illustration": "クリーム色のヘッドバンドとミントグリーンの運動着を着た愛らしい[ナマケモノ]がカード右側で手を振って立っている"
},
"sections": [
{
"title": "This Week",
"position": "upper middle",
"count": 3,
"labels": [
"Runs",
"Distance",
"Time"
],
"values": [
"3",
"12.6 km",
"1h 45m"
],
"presentation": "3つの等分割カラムと薄緑の円形アイコンを持つ単一の角丸統計カード"
},
{
"title": "NEXT GOAL",
"position": "middle lower",
"count": 1,
"labels": [
"20 km this month"
],
"values": [
"63%"
],
"presentation": "緑のプログレスバーと右側に手を振る小さなナマケモノのイラストがある角丸進捗カード"
},
{
"title": "Recent Activity",
"position": "lower",
"count": 1,
"labels": [
"Recent Activity"
],
"presentation": "下部ナビゲーションにクロップされた別の角丸カードの上端"
}
],
"bottom_nav": {
"count": 4,
"labels": [
"Home",
"Run",
"Progress",
"Profile"
],
"active": "Home"
}
},
{
"position": "center",
"screen_type": "ランニング概要",
"header": {
"left_icon": "back chevron",
"center_text": "Great job!",
"subtext": "You did it. Time to celebrate. 🎉",
"right_icon": "share"
},
"hero_illustration": "ヘッドバンド、ミントグリーンのスポーツウェア、金メダルを身につけ両手を挙げて祝う可愛い[ナマケモノ]",
"stats_row": {
"count": 3,
"labels": [
"DISTANCE",
"TIME",
"PACE"
],
"values": [
"5.00km",
"32:15",
"6:27"
],
"presentation": "3つの角丸統計ピル"
},
"achievement_card": {
"count": 1,
"title": "New Personal Best! 🌟",
"subtitle": "You shaved 1:12 off your previous 5K.",
"icon": "小さな金メダルバッジ"
},
"table_section": {
"title": "Splits",
"count": 2,
"columns": [
"KM",
"PACE",
"TIME"
],
"rows": [
[
"1",
"6:35",
"6:35"
],
[
"2",
"6:23",
"12:58"
]
],
"presentation": "薄い区切り線がある角丸ホワイトテーブルカード"
}
},
{
"position": "right",
"screen_type": "目標設定画面",
"header": {
"left_icon": "close x",
"center_text": "Time to run!",
"subtext": "You've got this. We'll take it slow. 🦥",
"right_icon": "settings gear"
},
"goal_visual": {
"type": "circular progress selector",
"top_label": "CHOOSE A GOAL",
"main_value": "5.00",
"unit": "kilometers",
"ring": "淡いベージュの円上の太い部分セージグリーン弧",
"illustration": "円の右上でストレッチする小さな[ナマケモノ]"
},
"goal_options": {
"count": 4,
"labels": [
"2 km",
"5 km",
"10 km",
"Half"
],
"active": "5 km"
},
"primary_cta": {
"label": "Start Run",
"style": "大型の角丸セージグリーンボタン"
},
"secondary_action": {
"label": "Just Track",
"icon": "location pin"
},
"bottom_nav": {
"count": 4,
"labels": [
"Home",
"Run",
"Progress",
"Profile"
],
"active": "Run"
}
}
]
}
}カスタマイズできる部分
生成する前に、プロンプトのこれらの部分を自分のテーマや文言に置き換えてください。
[ナマケモノ]プレースホルダー[ランニング記録アプリ]プレースホルダー
プロンプトの詳細
- カテゴリ
- UI / UX デザイン
- モデル
- GPT IMAGE 2
- 1 枚あたりのコスト
- 1K:43 クレジット · 2K:86 クレジット · 4K:143 クレジット
- アスペクト比
- 16:9
- 追加日