厳選・オープン・無料
Framer
統合デザインツールで美しいウェブサイトを構築する、スタイリッシュなダークモードのSaaSプラットフォーム。
Design ToolsExpressiveMotionPlayful
01
デザイン DNA
クリエイティブビジュアルビルダー高性能スタートアップ向け
洗練されたクリエイティブスタジオのような、ハイエンドなデザインツール。
02
カラー
#0099FFAccent
#FFFFFFInk
rgba(255,255,255,0.6)Ink soft
#000000BG
#242424BG quiet
#999999Muted
rgba(255,255,255,0.1)Line
1つの鮮やかなブルーアクセントを持つ、高コントラストのダークモード。
03
タイポグラフィ
geometric-sans · humanist-sans · geometric-mono
- display
96px · 500 - display-sm
32px · 500 - body
18px · 400 - caption
12px · 400
大きなディスプレイテキストにはタイトな文字间距を使用 · ダーク背景に対して本文テキストを高コントラクトに維持 · ヘッダーやUIにはジオメトリック・サンセリフを優先
04
余白
4px
8px
12px
16px
20px
24px
32px
48px
64px
96px
プレミアム感を演出する、十分な余白を持った一貫した4pxグリッド。
05
サーフェス (角丸 / 影 / 罫線)
sm · 6px
md · 8px
lg · 15px
pill · 100px
最小限の、微かなホワイトボーダーやシャドウでディープネスを定義することが多い。
0px 1px 2px rgba(0,0,0,0.25) · 0px 10px 30px rgba(0,0,0,0.25) · 0px 0px 0px 2px #090909
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
大きなマージンと明確な縦のリズムを持つ、中央揃えコンテンツ。
07
モーションとインタラクション
200msmicro
300mssmall
800msmedium
cubic-bezier(0.44, 0, 0.56, 1)easing
スムーズなフェードインと微かなhoverトランジション
ボタンやリンク上の微かな色の変化や透明度の変化。 · 軽微なスケールや色の変化による即座のビジュアルフィードバック。
08
コンポーネント
- button 黒地に白、または白地に黒テキストの、コントラストの強いピル型ボタン。
- card 画像やデータを含むことが多い、微かなボーダーと角丸を持つダークカード。
- chip 小さな、角丸のラベルやタグ。
- input 微かなボーダーを持つ、クリーンなダークインプット。
- hero ダーク背景の中央に配置され、明確なCTAを持つ、巨大で大胆なタイポグラフィ。
09
文体と禁止事項
- トーン 自信に満ち、モダンでプロフェッショナル。
- 見出し 大胆で、直接的で、メリットを重視。
- CTA 明確でアクション指向。
- 明るい背景を使用しない — スクリーンショットでは主背景色 #000000。
- セリフフォントを使用しない — スクリーンショットではサンセリフのディスプレイおよび本文フォント。
- 角丸の四角形を使用しない — スクリーンショットでは100pxのピルボタン。
- 複数の明るい色を使用しない — スクリーンショットでは主たるブルーアクセント。
- 細く軽いタイポグラフィを使用しない — スクリーンショットでは大胆で高コントラストの見出し。
- 雑然としたレイアウトを使用しない — スクリーンショットでは豊かな余白と明確な階層構造。
- 避ける: 過度にテクニカルな専門用語
- 避ける: 受動的な言葉遣い
- 避ける: 雑然としたレイアウト
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはデザインツールのための高性能SaaSウェブサイトです。デザインDNAはダークで、プレミアムで、クリーンな美学です。主要カラーは#000000(背景)、#FFFFFF(インク)、#0099FF(アクセント)。フォントは主にジオメトリックおよびヒューマニスト・サンセリフ。重要ルール:明るい背景を使用しない、セリフフォントを使用しない、複数の競合するアクセントカラーを使用しない、見出しに細いタイポグラフィを使用しない、雑然としたレイアウトを使用しない、非ピルボタンを使用しない。トーンは自信に満ちモダンで、スピードとクリエイティブパワーに焦点を当てる。
en · zh-CN · zh-TW · ja · ko