厳選・オープン・無料
Felt
マップ、アプリ、ダッシュボードを簡単に作成できるクラウドネイティブのGISプラットフォーム。
SaaSProductivityToolingClean
01
デザイン DNA
GISマッピング空間コラボレーションプラットフォーム
地図のためのGoogle Docs
02
カラー
#DC8C46Accent
#333333Ink
#FFFFFFInk soft
#3D521EBG
#64754BBG soft
#EEEBG quiet
rgba(51,51,51,1)Line
実用性と親しみやすさのバランスを取るため、高コントラストの自然なトーンと温かみのあるアクションカラーを組み合わせる。
03
タイポグラフィ
transitional-serif · grotesque-sans · monospace
- display
101px · 300 - body
16px · 400
見出しには、 Tight な字間の軽量なトランジショナルセリフ書体を使用 · UI要素には、クリーンなグロテスクサンセリフを使用 · 技術的なラベルには等幅フォントを使用
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
8px ベースライングリッド
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #333333
0px 2px 5px 0px rgba(0,0,0,0.2)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
余裕のある余白を設けた中央揃えコンテンツカラム
07
モーションとインタラクション
75msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover時の背景色トランジション · focus時の文字色トランジション
背景色の変更 · 微細な背景の暗転
08
コンポーネント
- button アクセント背景色またはボーダースタイルを用いた角丸長方形
- card インターフェーススクリーンショット用のクリーンなボーダーコンテナ
- chip タグまたはステータスラベルとして使用
- input 細いボーダーを備えた標準的なテキスト入力フィールド
- hero 無地のカラーブロック上に、製品のショーケースと共に配置される大规模タイポグラフィ
09
文体と禁止事項
- トーン プロフェッショナルでありながら、親しみやすくモダン
- 見出し インパクトのある大きなセリフ書体
- CTA 直接的で行動を促すスタイル(例:「無料で始める」)
- スクリーンショットは落ち着いた自然なパレットを示しています。ネオン色や高彩度の人工的な色を使わないでください。
- スクリーンショットはクリーンな1pxボーダーやボーダーレスレイアウトを示しています。太い装飾的なボーダーを使わないでください。
- スクリーンショットは要素の周囲に余裕のある余白を示しています。詰まった密集したレイアウトを使わないでください。
- スクリーンショットでは、ナビゲーションや特定のラベルに大文字を使用しています。UIラベルにすべて小文字を使わないでください。
- スクリーンショットでは、ほとんどの要素に非常に微細な、またはシャドウなしのデザインを示しています。重いドロップシャドウを使わないでください。
- スクリーンショットでは、インパクトを与えるためのトランジショナルセリフ書体を使用しています。見出しにplayfulなサンセリフ書体を使わないでください。
- 避ける: 専門用語
- 避ける: 攻撃的なセールス言葉
- 避ける: 過度に playful なトーン
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
これはクラウドネイティブのGISプラットフォームのモダンなSaaSランディングページです。使いやすく、コラボレーションできるマッピングツールとして位置づけられています。プライマリカラーは深い森の緑(#3D521E)と温かみのあるアクセントオレンジ(#DC8C46)、対比にはオフホワイト(#EEE)を使用。タイポグラフィは、ディスプレイ用のトランジショナルセリフ書体と本文用のグロテスクサンセリフをペアリングしています。重要な注意点:ネオンカラー、密集したレイアウト、装飾的なボーダー、小文字のUIラベル、重いシャドウ、ディスプレイ用のサンセリフ書体は避けてください。
en · zh-CN · zh-TW · ja · ko