厳選・オープン・無料
Spark
AI駆動の明瞭さとプラットフォーム間の一貫性にフォーカスした、モダンなメールクライアント。
productivityemail
01
デザイン DNA
集中生産性スマートAIクロスプラットフォーム
散らかった机を、一つの集中できるワークスペースに整える。
02
カラー
#205EFFAccent
#111111Ink
#333333Ink soft
#FBFBFDBG
#F5F5F7BG soft
#F8F8FABG quiet
#6E6E6EMuted
rgba(175,175,175,1.0)Line
クリーンで広がりを感じる白を基調とし、鮮やかなブルーのアクセションカラーと高コントラストテキストを採用。
03
タイポグラフィ
humanist-sans · system-sans
- display
56px · 800 - headline
32px · 700 - body
20px · 400 - small
14px · 400
印象を与えるための tightening されたトラッキングの太字表示タイプ · 最大限の可読性を実現するウェイトの本文 · ジオメトリックなヒューマニスト一次フォントとシステムフォールバック
04
余白
4px
8px
12px
16px
24px
32px
40px
64px
8pxをベースユニットとし、セクションごとに広めのパディングを採用
05
サーフェス (角丸 / 影 / 罫線)
sm · 6px
md · 16px
lg · 24px
pill · 999px
1px solid rgba(175,175,175,0.25)
0px 20px 40px 0px rgba(34,41,69,0.12) · 0px 7px 30px 0px rgba(160,165,209,0.2)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準的な12カラム中央揃いグリッドと、余裕のあるホワイトスペース
07
モーションとインタラクション
200msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover時の滑らかなカラー遷移(0.3秒) · 状態変化のための透明度フェード · インタラクティブなカードの微細なリフト
0.3秒の遷移で滑らかに背景色をフェードイン、モックアップは微細にスケールアップ · 微細な陰影の軽減とともに、即座にカラーがシフト
08
コンポーネント
- button ピル型の角丸を持つ、ハイコントラストのソリッドプライマリボタン、およびアウトライン付きゴーストセカンダリボタン
- card 白を背景に、微細な陰影を伴う柔らかい角丸カード
- chip 背景グラデーションを伴うピル型ステータスバッジ(例:AIタグ)
- input クリーンなボーダー付きインプット、微細な内部陰影あり
- hero 左に大きなタイポグラフィ、右にブルーのラジアルグラデーション背景を持つフローティングデバイスモックアップを配置した分割レイアウト
09
文体と禁止事項
- トーン プロフェッショナルで自信に満ち、焦点を絞ったトーン
- 見出し ピリオド付きの短く力強い宣言文
- CTA ハイコントラストボタン内のアクション指向の動詞(購入、ダウンロード、見る)
- ダークモードレイアウトを使用しない — スクリーンショットは主にライト(#FBFBFD)背景
- ヘッドラインにセリフフォントを使用しない — スクリーンショットはヒューマニストサンセリフ(Sofia-Pro)
- 複数の競合するアクセントカラーを使用しない — スクリーンショットは単一の支配的なブルー(#205EFF)
- 密な情報アーキテクチャを作成しない — スクリーンショットは余裕のあるホワイトスペースと広めのパディング(64px)
- カードにシャープな角を使用しない — スクリーンショットは角丸(16px〜24px)
- 強調に薄いライトウェイトフォントを使用しない — スクリーンショットはヘッドラインに太字(800)
- 避ける: 過度にテクニカルな専門用語
- 避ける: アグレッシブなセールス言語
- 避ける: 視覚的な雑踏
- 避ける: 低コントラストのテキスト
- 避ける: 複雑なネストメニューデザイン
- 避ける: 密なテキストブロック
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 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Sparkは、モダンなプロフェッショナル向けのスマートで集中できるソリューションとしてポジショニングされた生産性重視のメールクライアントです。デザインDNAは、主にホワイト(#FBFBFD)背景と、プライマリアクションに単一の高クロマブルー(#205EFF)を用いた、クリーンで広がりを感じる美学が特徴です。タイポグラフィは、表示ヘッドラインにtight letter-spacing(-1.5px)とウェイト800のヒューマニストサンセリフ(Sofia-Pro)を採用し、本文にはシステムフォントを使用。レイアウトは余裕のあるホワイトスペース(64pxパディング)と柔らかい角丸(16〜24px)を活用。重要な禁止事項:プライマリインターフェースとしてダークモードを導入しない、表示タイプにセリフフォントを使用しない、複数の競合するアクセントカラーでカラーシステムを断片化しないこと。
en · zh-CN · zh-TW · ja · ko