UIコンポーネント動作確認

TsumioデザインシステムのUIコンポーネントテストページ

Button Components

Basic Variants

Sizes

States

With Icons

Card Components

Default Card

This is a default card with shadow-sm.

Elevated Card

This is an elevated card with shadow-lg.

Outlined Card

This is an outlined card with border-2.

Input Components

Basic Input

有効なメールアドレスを入力してください

Error State

With Icons

Password Input

Badge Components

Variants

Primary
Secondary
Success
Warning
Error
Outline

Sizes

Small
Medium
Large

Dot Indicators

オンライン
待機中
エラー

Recommendation Card Components

AI推奨カードコンポーネントの表示テスト。2軸分類情報、スコア、推奨理由を含む。

VTI

バンガード・トータル・ストック・マーケットETF

現在価格

¥15,420

世界株連動
米ドル
米国大型株式
推奨購入金額¥100,000
推奨購入株数6
期待リターン+8.5%
リスクレベル
中リスク

推奨理由

グローバル分散投資の基礎として推奨。米国株式市場全体への幅広い投資が可能で、長期的な成長が期待できます。

1343

NEXT FUNDS 東証REIT指数連動型上場投信

現在価格

¥2,156

世界株低相関
日本円
国内REIT
推奨購入金額¥50,000
推奨購入株数23
期待リターン+4.2%
リスクレベル
低リスク

推奨理由

現在のポートフォリオに不足している不動産セクターへの投資。インフレヘッジとしても機能します。

GLD

SPDR ゴールド・シェア

現在価格

¥28,540

世界株低相関
米ドル
コモディティ(金)
推奨購入金額¥30,000
推奨購入株数1
期待リターン+3.5%
リスクレベル
低リスク

推奨理由

リスクヘッジ資産として推奨。世界情勢の不安定化に対する保険的役割を果たします。

States

通常状態

VTI

バンガード・トータル・ストック・マーケットETF

現在価格

¥15,420

世界株連動
米ドル
米国大型株式
推奨購入金額¥100,000
推奨購入株数6
期待リターン+8.5%
リスクレベル
中リスク

推奨理由

グローバル分散投資の基礎として推奨。米国株式市場全体への幅広い投資が可能で、長期的な成長が期待できます。

購入処理中

1343

NEXT FUNDS 東証REIT指数連動型上場投信

現在価格

¥2,156

世界株低相関
日本円
国内REIT
推奨購入金額¥50,000
推奨購入株数23
期待リターン+4.2%
リスクレベル
低リスク

推奨理由

現在のポートフォリオに不足している不動産セクターへの投資。インフレヘッジとしても機能します。

Portfolio Summary Components

ポートフォリオサマリーコンポーネントの表示テスト。総資産、収益、最終更新時刻を含む。

通常表示

総資産

¥5,000,000

+3.0%

今月の収益

¥150,000

前月の収益

¥120,000

年初来収益

¥800,000

最終更新: 0秒前

大きな金額

総資産

1.5億円

+3.0%

今月の収益

¥4,500,000

前月の収益

¥3,800,000

年初来収益

2500万円

最終更新: 0秒前

負の収益

総資産

¥3,000,000

-3.0%

今月の収益

-¥90,000

前月の収益

¥50,000

年初来収益

-¥200,000

最終更新: 0秒前

最小構成(前月・年初来なし)

総資産

¥1,000,000

+3.0%

今月の収益

¥30,000

ローディング状態

Performance Chart Component

ポートフォリオパフォーマンスチャート。期間切り替え、3つのライン表示(ポートフォリオ、ベンチマーク、累積入金額)

通常表示(期間切り替え対応)

現在の評価額

¥1,789,189

トータルリターン

+¥689,189(+62.65%)

ベンチマーク比較

アウトパフォーム 0.26%

データなし状態

データを読み込み中...

エラー状態(無効なデータ)

データの読み込みに問題が発生しました

Accessibility Test

キーボードナビゲーション(Tab、Enter、Space)とスクリーンリーダーでの動作を確認してください。

Screen Reader Test