厳選・オープン・無料
OpenSea
デジタルアセットを閲覧・取引するための高密度ダークモードダッシュボード。
Web3NFT
01
デザイン DNA
マーケットプレイス取引コレクティブルデジタルアセットweb3
現代のための賑やかなデジタル競売場
02
カラー
#0786FFAccent
#FFFFFFInk
#ACADA6Ink soft
#141415BG
#26272DBG soft
#1B1D1FBG quiet
#47BB64Muted
rgba(255,255,255,0.08)Line
データの可読性を最大化するための、ダークグレー上のハイコントラストホワイト。
03
タイポグラフィ
grotesque-sans · monospace
- display
32px · 500 - heading
20px · 500 - body
16px · 400 - small
14px · 400 - caption
12px · 400
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
一定の4pxグリッドシステム
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255,255,255,0.08)
0px 1px 2px 0px rgba(0,0,0,0.03) · 0px 1px 3px 0px rgba(0,0,0,0.1) · inset 0px 0px 0px 1px rgba(255,255,255,0.08)
06
レイアウト
1440container
12columns
24pxgutter
768 / 1024breakpoints
左サイドバーと右ランキングパネルを備えた密集型データダッシュボード。
07
モーションとインタラクション
150msmicro
200mssmall
400msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing
ホバー時の不透明度フェード · インタラクション時のスケール · リニアグラデーションのシフト
背景色のシフトと微細な不透明度の変化 · スケールまたは色の変化による即座の視覚フィードバック
08
コンポーネント
- button ハイコントラストのピル形状プライマリボタン、長方形のセカンダリボタン。
- card 微細なボーダーと角丸を持つダークサーフェスカード。
- chip フィルタリング用の、微細な背景塗りを持つ小型丸型タグ。
- input ダーク角丸の検索バー。目立つショートカットヒント付き。
- hero オーバーレイデータ付きで、注目のコレクションを紹介するフルワイド大型カルーセル。
09
文体と禁止事項
- トーン プロフェッショナルで、データドリiven、かつ率直
- 見出し 太字で簡潔。主要な指標に焦点を当てる
- CTA アクション指向で非常に視認性が高い
- 明るいホワイトの背景を使用しない — スクリーンショットは#141415のダークテーマを示している
- セリフ体のタイポグラフィを使用しない — スクリーンショットはクリーンでモダンなグロテスクサンセリフを示している
- 至る所に鮮やかなマルチカラーのアクセントを使用しない — スクリーンショットではグリーンとレッドがポジティブ／ネガティブな指標にのみ特別に使用されている
- 大きく緩いスペーシングを使用しない — スクリーンショットは密集し情報量の多いダッシュボードレイアウトを示している
- 複雑で重いシャドウを使用しない — スクリーンショットは非常に微細またはボックスシャドウなしを示している
- 大きな半径の角丸入力を使用しない — スクリーンショットは16-20pxの半径の入力を示しており、指定がない限り完全なピル形状にはしない
- 避ける: 遊び心のある言葉遣い
- 避ける: 過度の感嘆符
- 避ける: コンテキストのない専門用語
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
OpenSeaはNFTの主要なデジタルマーケットプレイスで、高密度ダークモードダッシュボードインターフェースで設計されている。プライマリカラーはダークな背景（#141415）、鮮明なホワイトテキスト（#FFFFFF）、およびセカンダリ情報用の微細なグレー（#ACADA6）。ポジティブなトレンドはグリーン（#47BB64）で、ネガティブはレッド（#E24756）で示される。タイポグラフィはクリーンでモダンなグロテスクサンセリフフォント（gtAmerica）を採用し、数値データにはモノスペースバリアント（gtAmericaMono）を使用。レイアウトは複雑でデータドリivenで、永続的な左サイドバーと密集した右側ランキングパネルを備えたマルチカラム構造。主要なデザインルール：明るい背景は決して使用しない；ホワイトスペースよりも情報密度を優先；色は意味的な意味合い（データ用のグリーン／レッド）に厳密に使用；装飾的な要素のないプロフェッショナルでミニマルな美学を維持。重要な禁止事項：不必要なアニメーションを追加しない；広くゆったりとしたスペーシングを使用しない；データ重視のUIとそぐわない遊び心のある丸みのあるUI要素を使用しない。
en · zh-CN · zh-TW · ja · ko