厳選・オープン・無料
Automator Community
期限切れドメインの発見と確保のための、プロフェッショナルなドメインマーケットプレースツール
SaaSFintechProductCleanTooling
01
デザイン DNA
ドメイン期限切れバックオーダー投資フィンテックSEO
ドメイン投資家向けに調整された、クリーンでデータリッチな金融ダッシュボード
02
カラー
#049FCEAccent
#374151Ink
#4B5563Ink soft
#FFFFFFBG
#FBFBFBBG soft
#DBEEF9BG quiet
#9CA3AFMuted
rgba(209, 213, 219, 1)Line
クリーンでデータファーストのレイアウト。ニュートラルなホワイトキャンバスに対し、プライマリのシアンアクセントを活用し、アクション可能な要素と主要指標を強調します
03
タイポグラフィ
humanist-sans
- display
35px · 700 - h2
24px · 600 - body
16px · 400 - small
14px · 400
プライマリインターフェースにはすべてDM Sansを使用 · ヒエラルキーと強調には、ボルド�（600-700）を使用 · 高密度データテーブルには、十分な行間を確保
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
カードには16pxの基本パディングを使用する、標準4pxグリッドシステム
05
サーフェス (角丸 / 影 / 罫線)
sm · 8px
md · 12px
lg · 16px
pill · 999px
1px solid #D1D5DB
0px 4px 8px 0px rgba(0, 0, 0, 0.06) · 0px 1px 2px 0px rgba(0, 0, 0, 0.06)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
最大1280pxのセンタリングコンテナを備えた12カラムグリッド。データテーブルには標準的な垂直リズムを使用
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素の滑らかな背景色トランジション · 状態変化のための微妙なトランスフォームアニメーション · 広範な状態更新のための0.5秒の背景トランジション
微妙な背景色の暗化またはソフトシャドウの浮き上がり · 背景のシフトによる即座の視覚フィードバック
08
コンポーネント
- button 角丸ピル型ボタン。プライマリはシアンからパープルへのグラデーションまたはソリッドシアン、セカンダリは微妙なボーダー付きホワイト
- card 微妙なシャドウやライトな背景ティントを備えた角丸コンテナ。データブロックのグループ化に使用
- chip メタデータ用のインラインバッジ（例：ステータスタグ）。高コントラストテキスト付きのソリッド背景
- input 16pxパディング付きのクリーンなボーダー付きインプット。フォーカス時にトランジション
- hero 高コントラストバナー（グラデーション背景）と、その下のソフトテキストコンテンツブロックを組み合わせたスプリットカードレイアウト
09
文体と禁止事項
- トーン プロフェッショナルで信頼でき、率直
- 見出し 明確で、大胆かつデータ指向。ユーティリティとドメインの価値に焦点
- CTA アクション指向で目立つ。コンバージョンを促すために高コントラストグラデーションを使用
- ボーダーのないインプットを使用しない — スクリーンショットでは、すべてのインタラクティブフィールドに明確な1pxボーダーが表示されています
- 完全にモノクロームのパレットを使用しない — スクリーンショットでは、主要CTAに明確なシアンからパープルへのグラデーションが表示されています
- ダークモードインターフェースを使用しない — スクリーンショットでは、ホワイト（#FFFFFF）をベースに淡いブルーのティント（#DBEEF9）をアクセントとした、主にライトモードの背景が表示されています
- 複雑なセリフ書体を使用しない — スクリーンショットでは、クリーンなヒューマニストサンス serifフォントファミリーが一貫して使用されています
- 要素に鋭い角を使用しない — スクリーンショットでは、一貫して8pxから16pxのborder-radiusが使用されています
- 深く重いドロップシャドウを使用しない — スクリーンショットでは、非常に軽く、微妙なrgba(0,0,0,0.06)の浮き上がりが使用されています
- 避ける: 遊び心のある、あるいは過度にカジュアルな言葉遣い
- 避ける: 明確なユーティリティのない抽象的なメタファー
- 避ける: 重要な情報への低コントラストテキスト
- 避ける: 密集し、フォーマットされていないテキストの壁
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
あなたは、ドメイン投資家向けのプロフェッショナルでデータ駆動型のSaaSインターフェースを作成するUIデザイナーです。デザインは信頼感、効率性、クリーンさを感じさせる必要があります。ライトモードの美学を活用し、ホワイト（#FFFFFF）をベースに、淡いブルーのティント（#DBEEF9）をアクセントとします。プライマリアクションには、注意を引くために鮮やかなシアンからパープルへのグラデーションを使用してください。すべてのテキストにはヒューマニストサンスの「DM Sans」フォントファミリーを使用し、高密度データテーブルの高い可読性を維持してください。主要ルール：すべてのカードとボタンには8px以上のborder-radiusを維持し、浮き上がりには重いボーダーの代わりに微妙なrgba(0,0,0,0.06)シャドウを使用し、すべてのステータスインジケーター（「ブロック済み」や「アダルト」など）を高コントラストのシアンで明確に強調してください。ダークモード、過度にカジュアルな言葉遣い、鋭く箱型のインターフェース要素は避けてください。
en · zh-CN · zh-TW · ja · ko