厳選・オープン・無料

Postmark

実際にユーザーが好むメール配信サービス。

01

デザイン DNA

重要なメールを優先的かつ高効率に配信する、専用のデリバリーサービス。

02

カラー

読みやすさを确保するため、高コントラストで鮮やかなプライマリーイエローを、クリスプなホワイトと深みのあるインクでバランスさせています。

03

タイポグラフィ

slab-serif · humanist-sans · monospace

• display56px · 900
• heading40px · 700
• subhead20px · 400
• body16px · 400
• caption14px · 400

メインのインパクトのある見出しにはslab-serifを採用し、親しみやすさと力強さを表現。 · 本文にはhumanist-sansを採用し、優れた可読性とモダンな印象を維持。 · 大きなディスプレイテキストにはtightな字間を維持。

04

余白

8pxグリッド

05

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

1px solid rgba(36,39,45,1)

0px 2px 3px 0px rgba(0,0,0,0.07) · 0px 4px 15px 0px rgba(0,0,0,0.07) · 0px 9px 25px 0px rgba(0,0,0,0.2)

06

レイアウト

左右分割カラムを持つ標準的なヒーローレイアウト。左にコンテンツ、右にビジュアル／テスティモニアルカードを配置。

07

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

要素がビューポートに入る際のフェードインとスライドアップ。 · hover状態の滑らかなカラー変化。

背景カラーまたはテキストカラーの控えめな変化と、滑らかなトランジション。 · 標準的なボタン状態による即時のフィードバック。

08

コンポーネント

• button 角丸のソリッドプライマリーカラーで、プライマリーアクションに使用。
• card 控えめなシャドウと角丸を持つホワイト背景で、テスティモニアルに使用。
• chip 矢印インジケーターを伴うシンプルなテキストリンク。
• input 明確なボーダーとpaddingを持つ標準テキスト入力フィールド。
• hero 鮮やかな背景カラーに、大きく太字のタイポグラフィを配置。補助ビジュアルまたはCTAを伴います。

09

文体と禁止事項

• トーン 自信に満ち、率直で、フレンドリー。
• 見出し バリュープロポジションを、大胆で明確に表現。
• CTA トライアル開始や詳細学習に焦点を当てた、行動を促すスタイル。

• ダークモードテーマを使用しない。スクリーンショットでは、明るくエネルギッシュなイエローがプライマリーバックグラウンドとして使用されている。
• 過度に複雑なグラデーションを使用しない。スクリーンショットでは、主にソリッドカラーの背景とシャドウによる控えめな深みが示されている。
• 細く装飾的なセリフフォントを使用しない。スクリーンショットでは、頑丈で太字のslab-serifディスプレイフォントが使用されている。
• 彩度が低くコントラストの弱いパレットを使用しない。スクリーンショットでは、鮮やかで高コントラストな配色が示されている。
• 非常に密度の高い多カラムレイアウトを使用しない。スクリーンショットでは、十分なホワイトスペースとセクション間の明確な区切りが示されている。
• 汎用的で抽象的なアイコンを使用しない。スクリーンショットでは、個性を加えるカスタムラインアートイラストが使用されている。
• 避ける: 非開発者を遠ざける過度な技術用語は避ける。
• 避ける: 冷たい、あるいは純粋に企業的なトーンは避ける。

10

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

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

11

System Prompt

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