厳選・オープン・無料

Segment

複雑なデータパイプラインを簡素化するプロフェッショナルな顧客データプラットフォーム。

01

デザイン DNA

顧客データのための信頼性の高いインフラプラミング

02

カラー

テクニカルでプレミアムな印象を与えるための、高コントラストダークモード。プライマリアクションにはブルーを使用。

03

タイポグラフィ

humanist-sans · monospace

• display56px · 700
• headline40px · 700
• body16px · 400

視覚的な密度を保つため、大きなディスプレイテキストにはタイトなトラッキングを適用。 · 本文テキストには標準的な1.75の行間を用い、読みやすさを確保。 · フォントウェイトは控えめに保ち、主に400と700を使用。

04

余白

セクション間に十分な垂直方向のスペーシングを設け、落ち着いた、散らからないレイアウトを実現。

05

サーフェス (角丸 / 影 / 罫線)

ボーダーの使用は最小限にし、主にボタンや下線に1pxまたは2pxを使用。

0px 10px 37.5px 0px rgba(18, 28, 45, 0.15) · inset 0px 0px 0px 2px rgb(24, 102, 238) · inset 0px 0px 0px 2px rgb(255, 255, 255)

06

レイアウト

目立つヒーローセクションに続き、マルチカラムのフィーチャーグリッドを配置した、清潔で上部が重いレイアウト。

07

モーションとインタラクション

インタラクティブな要素に対する、滑らかなbackground-colorおよびcolorのトランジション。 · ボタンやリンクのhover時の、繊細なtransform効果。

インタラクティブ性を示すための、background-colorやopacityの繊細な変化。 · カラーの変化による、即座のビジュアルフィードバック。

08

コンポーネント

• button プライマリアクションにはソリッドブルーで塗りつぶし、セカンダリアクションにはアウトラインを持つ、角丸のピルボタン。
• card コンテンツ領域を区別するために、繊細なボーダーや背景のシフトを用いた、シンプルなダークカード。
• chip カテゴリ分けのための、明るい背景にダークテキストを持つ、小さなピル形状のタグ。
• input 明確なボーダーと角丸を持つ、標準的なフォームフィールド。
• hero 大きな見出し、補足テキスト、そして目立つイラストを備えた、ダークなフルワイドセクション。

09

文体と禁止事項

• トーン プロフェッショナルで、有益かつ率直。
• 見出し 明確で直接的。信頼を構築するために、一人称複数をよく使用。
• CTA アクション重視で具体的。ユーザーを次のステップへ導く。

• 散らかった、マルチカラムのグラデーションを使用しない。スクリーンショットでは、ソリッドで深いネイビーの背景が示されている。
• シャープな角を使用しない。スクリーンショットでは、すべてのコンポーネントに角丸（4px、8px、50px）が使われている。
• 長い段落のテキストを中央揃えにしない。スクリーンショットでは、読みやすさのために本文テキストが左揃えになっている。
• 細く繊細なタイポグラフィを使用しない。スクリーンショットでは、太く明確な見出しと可読性の高い本文テキストが使われている。
• 雑然としたナビゲーションバーを使用しない。スクリーンショットでは、項目が最小限の、シンプルで上揃えのナビゲーションが使われている。
• 深いドロップシャドウを使用しない。スクリーンショットでは、フラットデザインの美学のために、繊細でソフトなシャドウが使われている。
• 避ける: 過度にカジュアルなスラング
• 避ける: 攻撃的なセールス言葉
• 避ける: 不必要に複雑な専門用語

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko