厳選・オープン・無料

Zed

工業的な精度と洗練されたエディトリアルな明瞭さを融合させた、高性能コードエディターのランディングページ。

01

デザイン DNA

精密に設計されたドイツ車のインターフェースと現代的なミニマリズムの融合

02

カラー

主要アクション用に単一の支配的なブルーを配置し、クールなニュートラルグレーで落ち着きを持たせた、高コントラスト機能パレット

03

タイポグラフィ

geometric-sans · monospace

• hero64px · 700
• h148px · 700
• h224px · 700
• body16px · 400
• small14px · 400
• mono14px · 400

大きなディスプレイテキストにはtightな文字间距を使用 · 本文テキストの可読性のために適度なline-heightを維持 · コードブロックと技術コンテンツにはmonospaceフォントのみを使用

04

余白

8pxグリッドシステムと、息をつかせるための適度な余白

05

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

1px solid rgba(169,175,188,0.3)

0 1px 3px rgba(0,0,0,0.1) · 0 4px 6px -4px rgba(0,0,0,0.1) · 0 10px 15px -3px rgba(0,0,0,0.1) · 0 1px 3px 0 rgba(230,239,254,1)

06

レイアウト

適度なパディングと明確な視覚的階層を持つ中央揃え単一カラムレイアウト

07

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

ホバー時の微細なスケールとtranslate変換 · インタラクティブ要素の滑らかなカラー遷移 · コンテンツ表示時の優しいフェードイン

シャドウ強調と軽いカラーシフトを伴う微細な浮き上がり · スケール変換による即座の視覚フィードバック

08

コンポーネント

• button プライマリ：白文字のブルーソリッドフィル；セカンダリ：グレーボーダーとダークテキストのアウトライン；どちらも微細なホバーシャドウ付き
• card 軽いグレーの背景、微細なボーダー、クリーンなタイポグラフィ、最小限の装飾要素
• chip ラベルやメタデータ用の軽いグレー背景の小さなインライン要素
• input フォーカス時に微細なシャドウがつくクリーンなボーダー付きインプット
• hero Supportingテキスト、二つのアクションボタン、微細なグラデーション背景を備えた大型の中央揃えヘッドライン

09

文体と禁止事項

• トーン 自信に満ち、技術的でありながらも親しみやすい
• 見出し パフォーマンスと開発者体験を強調する明確で簡潔なステートメント
• CTA 明確な価値提案を伴う直接的でアクション指向の言葉

• 過度なカラーコントラストを使用しない — スクリーンショットではニュートラルグレーに対するコントロールされたブルーアクセントが示されています
• ダークモードをプライマリとして実装しない — スクリーンショットでは微細なテクスチャを持つライトテーマが示されています
• 装飾的なイラストを使用しない — スクリーンショットではタイポグラフィに焦点を当てたクリーンなデザインが示されています
• 不必要なボーダーや仕切り線を追加しない — スクリーンショットでは余白によるクリーンな分離が示されています
• 複雑なアニメーションを使用しない — スクリーンショットでは最小限のモーションデザインが示されています
• インターフェースを過密にしない — スクリーンショットでは適度なスペーシングと息継ぎのスペースが示されています
• 避ける: 過度にカジュアルまたは遊び心のある言葉
• 避ける: コンテキストのない技術用語
• 避ける: マーケティングの誇張や最上級の表現

10

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

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

11

System Prompt

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