プレミアムフィンテック暗号通貨取引ダッシュボードUIモックアップ

あなたは、モダンでミニマルなデザイン、シャドウ、ガラス、ソフトな色を取り入れた経験豊富なUIデザイナーです。 あなたの役割は、以下の要件に基づいて、プロフェッショナルで美しい、納品可能なモックアップを作成することです： <requirements> ## 1. 全体的なスタイルとビジュアル言語 このインターフェースは、ダークテーマを使用したプレミアムでモダンなフィンテック/暗号通貨取引ダッシュボードを表しています。 ビジュアル言語は、**ソフトなニューモーフィズム**と**ラグジュアリーなWeb3美学**を組み合わせています。 中核となる特徴： - 暖かいゴールド/オレンジのアクセントハイライト - ミニマルなエフェクトとシャドウを備えたモノクロームのカラーパレット - 奥行きと微妙な背景を持つカードベースのレイアウト - 最小限のボーダー、シャドウまたは明るい背景による分離 ターゲットとする認識： - 安全 - プロフェッショナル - ハイエンド/機関級 - 経験豊富なトレーダー向けに最適化 --- ## 2. レイアウト構造 ### グローバルレイアウト - デスクトップファーストのダッシュボード - 出力比率：3:2 - 3つの主要領域： 1. 上部ナビゲーションバー（水平） 2. 左サイドバーナビゲーション（垂直） 3. メインコンテンツ領域（複数列のカードグリッド） スペーシングは寛大で、明瞭さと視覚的な余白を優先しています。 --- ## 3. 上部ナビゲーションバー - 高さ：72px - 左： - ブランドロゴテキスト「Mevolut」 - スタイライズされた「M」 - ゴールド/オレンジのアクセント - 中央： - ナビゲーションリンク：ダッシュボード、セキュリティ、紹介、取引手数料、API管理 - 右： - 注文リンク - プライマリCTA：「入金」（ゴールドのピルボタン） - ユーザーアバター（円形） - テーマトグル（月アイコン） タイポグラフィ： - クリーンなサンセリフ - ミディアムウェイト - 白のプライマリテキスト、ミュートされたグレーの非アクティブ状態 --- ## 4. 左サイドバーナビゲーション - 幅：240px - 背景：ほぼ黒 - アイコン付きの垂直ナビゲーション項目： - ダッシュボード（アクティブ） - セキュリティ - 紹介 - 取引手数料 - API管理 - 下部に配置： - 設定 アクティブ項目： - 微妙な背景ハイライト - 軽い背景の色合い - 角丸コンテナ アイコン： - アウトラインスタイル - アクティブ状態でゴールドアクセント --- ## 5. メインコンテンツ領域 ### 5.1 ユーザー概要カード - 上部の大きな角丸カード - 左： - 円形アバター - 挨拶テキスト（「こんにちは…」） - ユーザー名 - インラインブロック： - UID（コピーアイコン） - 本人確認ステータス - セキュリティレベル - タイムゾーン - 最終ログインタイムスタンプ - 右： - 「情報を隠す」トグル スタイル： - 微妙な内側シャドウ --- ### 5.2 入金/購入カード - 中サイズのカード - 入金オプションを説明するタイトルテキスト - 2つのアクション行： - 入金（ドルまたは暗号通貨） - 株式を購入（現地通貨） - 各行： - アイコン - ラベル - 矢印アクションボタン（ゴールドアクセント） --- ### 5.3 総資産カード - USD残高とUSD換算を表示 - 背景に大きなフェードしたドル記号のウォーターマーク - アクションタブ： - 株式を購入 - 入金 - 出金 - 数値は大きい --- ### 5.4 VIPレベルカード - 現在のVIPレベルを表示 - 現物および先物の手数料率 - トークン保有量のプログレスバー - 「もっと見る」リンク プログレスバー： - 角丸 - ダークな背景トラック --- ### 5.5 現在の保有テーブル - テーブルレイアウトを含むカード - 列： - コイン（アイコン+名前） - 価格 - 24時間変化 - 4時間トレンド（スパークライン） - アクション（入金、出金、取引） スパークライン： - プラストレンドは緑 - マイナストレンドは赤 ホバー： - 行ごとに微妙な背景ハイライト --- ### 5.6 アフィリエイトプログラムカード - プロモーションカード - ゴールドコインのイラスト - 短い説明とCTAボタン（「今すぐ申し込む」） --- ### 5.7 情報/ニュースカード - お知らせの縦リスト - 見出し+タイムスタンプ - 上部に「もっと見る」リンク --- ## 6. カラーパレット - プライマリ背景：深いチャコール/ブラック - カード表面：わずかに明るい - アクセントカラー：暖かいゴールド - テキスト階層： - 白（プライマリ） - ミュートされたグレー（セカンダリ） - ダークグレー（無効） - ステータスカラー： - プラスは緑 - マイナスは赤 --- ## 7. エフェクトとインタラクション - 全体に角丸（sm） # デザイントークン： { // グローバルテーマ定義 "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // レイアウトの測定と構造 "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // カラーシステム "colors": { "background": "#0B0D10", // メインアプリの背景 "primaryAccent": "#F5A623", // ゴールド/オレンジのハイライト "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // タイポグラフィスケール "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 } }, // コアUIコンポーネント "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" } }, // アイコンシステム "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>