厳選・オープン・無料

Missive

チームメールコラボレーションツールのためのプロフェッショナルなSaaSランディングページ。

01

デザイン DNA

メールとタスクを管理するためのクリーンで効率的なチームコックピット。

02

カラー

クリスピーな白の背景にダークテキスト、主要アクションのための単一の鮮やかなブルー。

03

タイポグラフィ

transitional-serif · humanist-sans

• display48px · 400
• h232px · 400
• body16px · 400
• caption14px · 400

主要なマーケティングヘッドラインには、Tiempos Headline（トランジショナルセリフ）を使用。 · 本文テキスト、ナビゲーション、UI要素には、Inter（ヒューマニストサンセリフ）を使用。 · 明確な階層性を確保するため、本文テキストのウェイトを400、ナビゲーションリンクを500に設定。

04

余白

標準的な4px基本単位と、8と16の倍数を使用した一貫したスペーシング。

05

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

1px solid #E4E6E9を、微妙な区切り線や入力フィールドに使用。

rgba(0, 0, 0, 0.1) 0px 0px 32px 0px

06

レイアウト

中央揃えのコンテンツレイアウトで、標準的なトップナビゲーションバーと、白/グレー交互のセクション構成。

07

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

すべてのインタラクティブ要素に対する微細なトランジション（0.3秒のopacityまたはtransform）。

ボタンやリンクのopacityまたは色の変化。 · インタラクティブ要素への即座のビジュアルフィードバック。

08

コンポーネント

• button ブルー（#2266ED）の白文字テキスト付き角丸プライマリボタン、および白背景にダークテキストのセカンダリボタン。
• card UIモックアップや機能セクションのための、微妙なシャドウまたはボーダー付きのクリーンな白カード。
• chip アプリケーションインターフェース内のカテゴリやステータスに使用される、小さな角丸タグ。
• input ライトグレーのボーダーと微細な角丸を持つ標準的な入力フィールド。
• hero セリフフォントの大きな中央揃えヘッドラインに、サンセリフ本文テキストとプライマリ/セカンダリCTAが続く。

09

文体と禁止事項

• トーン プロフェッショナルで、親切かつ率直。
• 見出し セリフフォント、大きなサイズ、明確なメリットと価値提案に焦点。
• CTA アクション志向（無料で試す、デモを見る、登録する）で、明確で簡潔な言語を使用。

• 鮮やかな、多色グラデーションは使用しない — スクリーンショットではクリーンな白/グレーの背景が示されている。
• 重く暗いシャドウは使用しない — スクリーンショットではrgba(0,0,0,0.1) 0px 0px 32pxのような微細で柔らかいシャドウが示されている。
• 大きなセクションに全大文字（all-caps）は使用しない — スクリーンショットでは標準的な文例ケースやタイトルケースが示されている。
• 本文テキストに過度に装飾的なフォントは使用しない — スクリーンショットではクリーンで読みやすいサンセリフ（Inter）が示されている。
• everywhereに過度に濃く、コントラストの高いアクセントカラーは使用しない — スクリーンショットでは、鮮やかなブルーをプライマリボタンとリンクに限定している。
• 複雑で雑然としたレイアウトは使用しない — スクリーンショットでは、広々としたホワイトスペースと明確なビジュアル階層が示されている。
• 避ける: スラング
• 避ける: 過度にカジュアルな言葉
• 避ける: 専門用語が多い説明

10

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

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

11

System Prompt

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