Web3・クリプト デザインインスピレーション
未来感とトラストレス。グラデーションが通貨 -- これがWeb3デザインの本質だ。Uniswap、Rainbow、そして先進的なDeFiプロトコルに共通するのは、ピル型要素とマルチカラーグラデーションが織りなす信頼と未来感である。深い闇の中でネオンのような光が浮かぶ世界で、分散型の価値交換を視覚的に体現する。
このページの使い方
スクロールするだけでデザインのアイデアが得られるように設計しています。各セクションにインラインHTMLのビジュアル例を配置しているため、コードを読まなくても視覚的にパターンを把握できます。
デザイン哲学 -- トラストレスの視覚化
コードが法律。グラデーションが通貨。ピルが信頼。
DeFiの世界では、仲介者が存在しない。その代わりに、スマートコントラクトが信頼を担保する。UIはこの「トラストレス」な世界を反映し、角のないピル型要素が「摩擦のなさ」を、マルチカラーグラデーションが「価値の流動性」を表現する。
なぜマルチカラーグラデーションなのか
- 流動性の表現: 複数の色が混ざり合い、トークンの交換を視覚化
- 未来感: 従来の金融UIにはない、新しい世界の象徴
- ブランド識別: Uniswapのピンク、Aaveの紫 -- グラデーションがブランドになる
以下が、この哲学を体現したDeFiインターフェースのプレビューである:
カラーパレット -- 深い闇とネオン
Web3 UIの背景は深い紫がかった黒。#0e0e10から始まる階層が、デジタルアセットの世界を形成する。
Background Hierarchy
マルチカラーグラデーション
#ff6b6b
#feca57
#48dbfb
#ff9ff3
#00d68f
#ff4d4d
ステータスインジケーター
ConnectedPendingFailed
| Token | 値 | 役割 |
|---|---|---|
| bg-deepest | #0e0e10 | 最深部 |
| bg-surface | #1e1e24 | カード |
| text-primary | #ffffff | 見出し・価格 |
| text-secondary | #a0a0b0 | 説明文 |
| text-muted | #6b6b80 | ラベル |
| price-up | #00d68f | 価格上昇 |
| price-down | #ff4d4d | 価格下降 |
タイポグラフィ -- モノスペースの信頼
Web3ではモノスペースフォントが信頼の証。ウォレットアドレス、トークン量、価格はすべてモノスペースで表示する。
Token Price
Inter / 32px / Weight 7003,245.80 USDC
Monospace / 24px / Amount0x1a2b3c4d5e6f7890abcdef1234567890abcd9f8e
Monospace / 14px / Addressコンポーネント -- トークンリスト
ETH
Ethereum
$3,245.80
+2.34%
USDC
USD Coin
$1.00
0.00%
UNI
Uniswap
$12.45
-1.23%
レイアウト -- スワップ中心構造
App Structure
Fixed Header (logo + pill tabs + wallet)
Swap Card (480px, centered)
Chart
History
Network Status Bar
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/WEB3_CRYPTO.mdをプロジェクトのDESIGN.mdにコピー- トークンロゴのSVGを準備
- Stitch に「この DESIGN.md に従ってDeFiスワップ画面を作成してください」と指示
適したプロジェクト
- DeFiスワップインターフェース
- 暗号資産ダッシュボード
- NFTマーケットプレイス
- ウォレットアプリ
不向きなプロジェクト
- 伝統的な金融サービスUI
- コーポレートサイト
- ブログ・メディアサイト
セキュリティ注意
Web3 UIではトランザクション情報の透明性が極めて重要です。ガス代、スリッページ、ルーティング情報を常に表示し、ユーザーの信頼を確保してください。情報を隠すUIは、Web3の文化に反します。