Figma Make 使ってみる

Figma Make用プロンプト：

夫婦・カップル向けの共有家計簿アプリのUIデザインを作成してください。WebブラウザとモバイルWebビューの両方で使用できるレスポンシブデザインにしてください。

アプリの特徴：

• 2人でリアルタイムに家計を共有・管理
• シンプルな操作性と支出分析機能のバランス
• 家計全体の収支をメインに表示（個人別ではなく合計重視）

デザイン要件：

• シンプルでモダンなデザイン
• ミニマルで洗練された印象
• 余白を活かした見やすいレイアウト
• モノトーンベースに1-2色のアクセントカラー
• レスポンシブデザイン：デスクトップ（1440px）、タブレット（768px）、モバイル（375px）に対応

必須画面：

1. ホーム画面：今月の収支サマリー、最近の取引、クイック入力ボタン
2. 入力画面：金額、カテゴリ、メモ、日付、支払者（どちらが支払ったか）をシンプルに入力
3. 分析画面：カテゴリ別支出グラフ、月別推移、予算との比較
4. 設定画面：カテゴリ管理、パートナー招待、通知設定

UI要素：

• モバイル：フローティングアクションボタンで素早い支出入力
• デスクトップ：サイドバーナビゲーション、モバイルは下部タブナビゲーション
• 円グラフやシンプルなバーチャートで視覚的な分析
• アイコンは線画のシンプルなもの
• 数字は大きく見やすく表示
• カード型のコンポーネントで情報を整理
• デスクトップでは2-3カラムレイアウト、モバイルでは1カラム

カラースキーム：

• 背景：白またはライトグレー
• テキスト：ダークグレーから黒
• アクセント：ブルーまたはグリーン系の落ち着いた色
• 収入：グリーン系、支出：レッド系の色分け

レスポンシブ対応の要点：

• グリッドシステムを使用した柔軟なレイアウト
• タッチフレンドリーなボタンサイズ（最小44px）
• デスクトップではホバーエフェクト、モバイルではタップフィードバック
• ブレークポイントでの適切なレイアウト変更

Prompt:

Create a UI design for a shared household budget app for couples. Design for mobile web view only.

App Features:

• Real-time sharing and management of household finances between 2 people
• Balance between simple usability and spending analysis features
• Focus on total household budget display (prioritize combined totals over individual spending)

Design Requirements:

• Simple and modern design
• Minimal and sophisticated impression
• Clean layout with effective use of whitespace
• Monochrome base with 1-2 accent colors
• Mobile-first design (375px width)

Required Screens:

1. Home Screen: Monthly income/expense summary, recent transactions, quick input button
2. Input Screen: Simple entry for amount, category, memo, date, and payer (who paid)
3. Analysis Screen: Category-based spending charts, monthly trends, budget comparison
4. Settings Screen: Category management, partner invitation, notification settings

UI Elements:

• Floating action button for quick expense entry
• Visual analysis with pie charts and simple bar charts
• Simple line-art icons
• Large, readable numbers
• Card-based components for organized information
• Single column layout optimized for mobile

Color Scheme:

• Background: White or light gray
• Text: Dark gray to black
• Accent: Calm blue or green tones
• Income: Green tones, Expenses: Red tones

Mobile-Specific Considerations:

• Bottom tab navigation
• Touch-friendly button sizes (minimum 44px)
• Tap feedback for interactions
• Smooth scrolling for longer content

Design for iPhone 14 Pro size (393px × 852px viewport).