厳選・オープン・無料
Statsig
プロダクト実験と分析のための、クリーンで高い信頼性を持つSaaSプラットフォーム。
saasdev
01
デザイン DNA
実験分析メトリクス開発者向け
プロダクトチームのためのモダンなエンタープライズデータワークベンチ。
02
カラー
#367EEDAccent
#1F2328Ink
#535963Ink soft
#FFFFFFBG
#F6F6F6BG soft
#F2F2F2BG quiet
#808080Muted
rgba(31,35,40,0.1)Line
主要なインタラクティブ要素として単一の鮮やかなブルーアクセントを用いた、ハイコントラクトなニュートラルパレット。
03
タイポグラフィ
geometric-sans · monospace
- display
50px · 500 - headline
40px · 600 - subhead
24px · 400 - body
16px · 400 - small
14px · 400 - micro
12px · 400
本文テキストの色は #1F2328 · サブテキストの色は #535963 · アクセント要素には #367EED を使用
04
余白
4px
8px
16px
20px
24px
40px
60px
80px
一貫した4pxベースグリッドと、主要セクション用の20px、40px、80pxマクロスペーシング。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 10px
lg · 30px
pill · 999px
1px solid #1F2328
rgba(27, 37, 40, 0.05) 0px 0px 20px 0px · rgb(212, 215, 220) 0px 0px 0px 1px inset
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準的なトップナビゲーションレイアウト。中央揃えのヒーロー、その後にコンテンツセクションが縦に並ぶ構成。
07
モーションとインタラクション
200msmicro
400mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
ボタンとナビゲーションリンクのhover状態 · focusまたはhover時の滑らかな透明度の変化
インタラクティブ要素の、微細な背景色の変化や透明度の変化。 · 状態変化による即座の視覚的フィードバック。
08
コンポーネント
- button ダーク背景（#1F2328）またはボーダーアウトラインスタイルの、角丸のピル形状。
- card 微細なシャドウと角丸を持つ、クリーンなホワイトサーフェス。
- chip 薄いグレー背景と細いボーダーを持つ、角丸のボーダー。
- input 角丸を持つ、薄いグレー背景またはボーダーフィールド。
- hero アイソメトリックなプロダクトUIスクリーンショットの上に配置された、中央揃えの大型タイポグラフィ。
09
文体と禁止事項
- トーン 直接的で、技術的、そして自信に満ちた。
- 見出し 計測と出荷に焦点を当てた、的確でアクション指向のステートメント。
- CTA 無料アカウントの開始や仕組みの確認に焦点を当てた、明確で取引的。
- 重いドロップシャドウを使用しない — スクリーンショットでは微細で拡散したボックスシャドウが示されている
- 角丸の四角形コーナーを使用しない — スクリーンショットでは完全に円形のピルボタンが示されている
- 明るいネオンアクセントを使用しない — スクリーンショットではプロフェッショナルで控えめなブルー（#367EED）が示されている
- インタフェースを雑然とさせない — スクリーンショットでは十分なホワイトスペースとクリーンなグリッドベースのレイアウトが示されている
- 背景色を変化させない — スクリーンショットでは厳密にホワイトとライトグレー（#F6F6F6）の背景システムが示されている
- 装飾的なフォントを使用しない — スクリーンショットでは非常に legible な、ニュートラルなジオメトリック・サンセリフタイポグラフィが示されている
- 避ける: 曖昧なマーケティング用語
- 避ける: 過度に遊び心のある、あるいはカジュアルな言葉
- 避ける: 雑然とした、または忙しないUIパターン
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
プロダクト実験と分析のための、クリーンで開発者向けのB2B SaaSプラットフォーム。デザインはホワイト（#FFFFFF）とダークブラウンに近い黒（#1F2328）を基調とするニュートラルなカラーパレットを特徴とし、単一の鮮やかなブルーアクセント（#367EED）を用いる。タイポグラフィはジオメトリック・サンセリフカテゴリで、表示用ヘッドラインには tightened な文字間隔を持つ強力なタイポスケールを使用。重要な禁止事項: 雑然としたレイアウト、重いシャドウ、あるいは遊び心のあるタイポグラフィを避けること。十分なホワイトスペースを保ち、ピル形状のボタンを使用し、トーンは直接的かつ技術的なものとする。高いコントラストと明確なビジュアル階層を確保すること。
en · zh-CN · zh-TW · ja · ko