Skip to content

Web3・クリプト デザインインスピレーション

未来感とトラストレス。グラデーションが通貨 -- これがWeb3デザインの本質だ。Uniswap、Rainbow、そして先進的なDeFiプロトコルに共通するのは、ピル型要素とマルチカラーグラデーションが織りなす信頼と未来感である。深い闇の中でネオンのような光が浮かぶ世界で、分散型の価値交換を視覚的に体現する。

このページの使い方

スクロールするだけでデザインのアイデアが得られるように設計しています。各セクションにインラインHTMLのビジュアル例を配置しているため、コードを読まなくても視覚的にパターンを把握できます。


デザイン哲学 -- トラストレスの視覚化

コードが法律。グラデーションが通貨。ピルが信頼。

DeFiの世界では、仲介者が存在しない。その代わりに、スマートコントラクトが信頼を担保する。UIはこの「トラストレス」な世界を反映し、角のないピル型要素が「摩擦のなさ」を、マルチカラーグラデーションが「価値の流動性」を表現する。

なぜマルチカラーグラデーションなのか

  • 流動性の表現: 複数の色が混ざり合い、トークンの交換を視覚化
  • 未来感: 従来の金融UIにはない、新しい世界の象徴
  • ブランド識別: Uniswapのピンク、Aaveの紫 -- グラデーションがブランドになる

以下が、この哲学を体現したDeFiインターフェースのプレビューである:

NeoSwap
SwapPool0x1a2b...9f8e
FromBalance: 2.451
1.000ETH
ToBalance: 12,500
3,245.80USDC
Swap

カラーパレット -- 深い闇とネオン

Web3 UIの背景は深い紫がかった黒。#0e0e10から始まる階層が、デジタルアセットの世界を形成する。

Background Hierarchy

deepest
#0e0e10
base
#16161a
surface
#1e1e24
elevated
#26262e
input
#2a2a34

マルチカラーグラデーション

#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 700
3,245.80 USDC
Monospace / 24px / Amount
0x1a2b3c4d5e6f7890abcdef1234567890abcd9f8e
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 への投入方法

  1. /Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/WEB3_CRYPTO.md をプロジェクトの DESIGN.md にコピー
  2. トークンロゴのSVGを準備
  3. Stitch に「この DESIGN.md に従ってDeFiスワップ画面を作成してください」と指示

適したプロジェクト

  • DeFiスワップインターフェース
  • 暗号資産ダッシュボード
  • NFTマーケットプレイス
  • ウォレットアプリ

不向きなプロジェクト

  • 伝統的な金融サービスUI
  • コーポレートサイト
  • ブログ・メディアサイト

セキュリティ注意

Web3 UIではトランザクション情報の透明性が極めて重要です。ガス代、スリッページ、ルーティング情報を常に表示し、ユーザーの信頼を確保してください。情報を隠すUIは、Web3の文化に反します。