あなたはモダンでミニマリスティックなデザイン、影、ガラス表現、ソフトな色使いを重視する経験豊富なUIデザイナーです。 あなたの役割は、以下の要件に基づき、納品可能なプロフェッショナルで美しいモックアップを作成することです。 <requirements> ## 1. 全体スタイルとビジュアル言語 このインターフェースは、ダークテーマを用いたプレミアムでモダンなフィンテック/暗号資産取引ダッシュボードを表現します。 ビジュアル言語は **ソフトなニューモーフィズム** と **ラグジュアリーなWeb3美学** を組み合わせます。 コア特性: - 温かみのあるゴールド/オレンジのアクセントハイライト - ミニマリスティックな効果と影を持つモノクロマチックなカラーパレット - 奥行きと繊細な背景を持つカードベースレイアウト - 最小限のボーダー、影または明るい背景による分離 ターゲット知覚: - 安全 - プロフェッショナル - ハイエンド/機関投資家級 - 経験豊富なトレーダー向けに最適化 --- ## 2. レイアウト構造 ### グローバルレイアウト - デスクトップファーストのダッシュボード - 出力比率: 3:2 - 3つの主要領域: 1. トップナビゲーションバー(水平) 2. 左サイドバーナビゲーション(垂直) 3. メインコンテンツエリア(カードのマルチカラムグリッド) 余白は広めに取り、明瞭さと視覚的な呼吸感を優先します。 --- ## 3. トップナビゲーションバー - 高さ: 72px - 左側: - ブランドロゴテキスト「Mevolut」 - スタイル化された「M」 - ゴールド/オレンジアクセント - 中央: - ナビゲーションリンク: Dashboard, Security, Referral, Trading Fees, API management - 右側: - Orderリンク - プライマリCTA: 「Deposit」(ゴールドのピル型ボタン) - ユーザーアバター(円形) - テーマトグル(月アイコン) タイポグラフィ: - クリーンなサンセリフ - ミディアムウェイト - 白をプライマリテキスト、非アクティブはミュートグレー --- ## 4. 左サイドバーナビゲーション - 幅: 240px - 背景: ほぼ黒 - アイコン付き縦型ナビゲーション項目: - Dashboard(アクティブ) - Security - Referral - Trading Fees - API management - 下部配置: - Settings アクティブ項目: - 繊細な背景ハイライト - わずかな背景ティント - 角丸コンテナ アイコン: - アウトラインスタイル - アクティブ時はゴールドアクセント --- ## 5. メインコンテンツエリア ### 5.1 ユーザー概要カード - 上部の大きな角丸カード - 左側: - 円形アバター - 挨拶テキスト(「Hello…」) - ユーザー名 - インライン情報ブロック: - UID(コピーアイコン) - 本人確認ステータス - セキュリティレベル - タイムゾーン - 最終ログイン時刻 - 右側: - 「Hide info」トグル スタイル: - 繊細なインナーシャドウ --- ### 5.2 入金/購入カード - 中サイズのカード - 入金オプションを説明するタイトルテキスト - 2つのアクション行: - Deposit(ドルまたは暗号資産) - Buy stocks(現地通貨) - 各行: - アイコン - ラベル - 矢印アクションボタン(ゴールドアクセント) --- ### 5.3 総資産カード - USD残高とUSD換算額を表示 - 背景に大きく薄いドル記号の透かし - アクションタブ: - Buy stocks - Deposit - Withdraw - 数値は大きく表示 --- ### 5.4 VIPレベルカード - 現在のVIPレベルを表示 - 現物および先物手数料率 - トークン保有量の進捗バー - 「View more」リンク 進捗バー: - 角丸 - 暗い背景トラック --- ### 5.5 現在の保有テーブル - テーブルレイアウトを含むカード - 列: - Coin(アイコン+名称) - Price - 24h Change - 4h Trend(スパークライン) - Actions(Deposit, Withdraw, Trade) スパークライン: - 上昇トレンドは緑 - 下降トレンドは赤 ホバー: - 行ごとの繊細な背景ハイライト --- ### 5.6 アフィリエイトプログラムカード - プロモーションカード - ゴールドコインのイラスト - 短い説明とCTAボタン(「Apply now」) --- ### 5.7 情報/ニューカード - お知らせの縦型リスト - 見出し+タイムスタンプ - 上部に「View more」リンク --- ## 6. カラーパレット - プライマリ背景: 深いチャコール/黒 - カード面: わずかに明るい色 - アクセントカラー: 温かみのあるゴールド - テキスト階層: - 白(プライマリ) - ミュートグレー(セカンダリ) - ダークグレー(無効) - ステータスカラー: - ポジティブは緑 - ネガティブは赤 --- ## 7. 効果とインタラクション - 全体で角丸(sm) # Design tokens: { // Global theme definition "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Layout measurements and structure "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Color system "colors": { "background": "#0B0D10", // Mn app background "primaryAccent": "#F5A623", // Gold/orange highlight "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Typography scale "typography": { "fontFamily": "SF Pro, system-ui, sans-serif", "weights": { "heading": 600, "body": 400, "numeric": 500 }, "sizes": { "h1": 24, "h2": 20, "h3": 16, "body": 14, "caption": 12 } }, // Core UI components "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "none", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "transparent", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "outline" }, "table": { "rowHeight": 56, "divider": "subtle", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Icon system "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>