厳選・オープン・無料
Reclaim
スケジューリングを自動化し、ワークライフバランスを取り戻すために設計された、AIファーストのカレンダーアプリケーション。
productivitysaas
01
デザイン DNA
インテリジェント自動化生産性スケジューリング
あなたのワークカレンダーを自動的に整理する、AI搭載のタイムキーパー。
02
カラー
#5562EBAccent
#181D25Ink
#4A4A4AInk soft
#FFFFFFBG
#EBEFFFBG soft
#F5F7FABG quiet
#6B7280Muted
rgba(24, 29, 37, 0.1)Line
鮮やかなプライマリブルーアクセントと、集中力を高める補助的なグリーントーンを備えた、クリーンで高コントラストのベース。
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
72px · 700 - headline
40px · 600 - subhead
24px · 500 - body
18px · 400 - caption
14px · 400
大胆でモダンなディスプレイ用には、geometric-sansを使用。 · 可読性の高い本文には、humanist-sansを使用。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
128px
4pxグリッドに基づき、ヒーローセクションには広めのホワイトスペースを、UIコンポーネントにはより詰め込んだ間隔を設定。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(24, 29, 37, 0.1)
0px 5px 40px 0px rgba(9, 14, 21, 0.16) · 0px 20px 32px -8px rgba(9, 20, 66, 0.25)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024 / 1440breakpoints
目立つ中央揃えのヒーローセクションを先頭に、交互に配置されたコンテンツブロックを備えるレスポンシブグリッド。
07
モーションとインタラクション
150msmicro
250mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
ビューポートに进入する要素に対する、控えめなフェードインとトランスフォーム遷移。 · hover時のインタラクティブ要素に対する、色とストロークの遷移。
プライマリボタンには控えめな色の変化や明度の変化。カードには軽いスケーリングやシャドウの浮き上がり。 · スケールや不透明度の変化による即座の視覚フィードバック。
08
コンポーネント
- button 丸みを帯びたピル形状(999px radius)で高コントラスト。プライマリアクションはソリッドブルー背景、セカンダリアクションはアウトライン。
- card 控えめな角丸(12px)で、淡い背景色(青、緑、ダーク)と統合されたイメージを採用。
- chip ステータスや機能のハイライトに使用される、小さな丸みを帯びたタグやバッジ。
- input 控えめなボーダーを持つ標準的な角丸入力フォーム。フォームや検索インターフェースでよく使用。
- hero 製品のモックアップやライフスタイルイメージと組み合わせた巨大なタイポグラフィ。ホワイトスペースを効果的に活用。
09
文体と禁止事項
- トーン プロフェッショナルで、自信に満ち、かつ有益的。
- 見出し 直接的で、メリットを促進し、製品の「AI」や「自動化」の性質を強調。
- CTA 行動を促し、奨励するもの。「Get started」や「Book a demo」を使用。
- ダークモードをプライマリインターフェースとして使用しない — スクリーンショットは主に明るい、白をベースにしたテーマを示しています。
- ヘッドラインに単色グラデーションを使用しない — スクリーンショットは「calendar」という言葉にマルチカラーグラデーション(ブルーからグリーン)を使用しています。
- プライマリ要素に鋭い角を使用しない — スクリーンショットはボタンに広く使われるピル形状(999px radius)を示しています。
- 混雑または密集したレイアウトを使用しない — スクリーンショットは明瞭さのために広めのホワイトスペースと大きなタイポグラフィを示しています。
- UIテキストに装飾的またはセリフフォントを使用しない — スクリーンショットは全体を通してクリーンでモダンなサンセリフフォントを使用しています。
- プライマリアクションに控えめまたは低コントラストの色を使用しない — スクリーンショットはメインボタンに高鮮度のブルーを使用しています。
- 避ける: 曖昧なマーケティング用語
- 避ける: 攻撃的または強引な言葉
- 避ける: 誇張表現の過剰な使用
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 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Reclaim.aiは、自動カレンダー管理に焦点を当てた、AI搭載の生産性SaaSツールです。ビジュアルシステムは、クリーンで明るいテーマの美学を採用し、プライマリアクセントカラーに#5562EB(鮮やかなブルー)、セカンダリーグリーンに#7AC17Bを使用しています。タイポグラフィはgeometricとhumanistサンセリフフォントの混合で、モダンで非常に可読性の高いインターフェースを作り出しています。重要な要素には、大きな、メリットを促進するヘッドラインと広めのホワイトスペースが含まれます。重要なデザインルール:ボタンに鋭い角を使用しない(ピル形状を使用);ダークモードをプライマリUIとして使用しない;非ヘッドラインテキストに複雑なグラデーションを使用しない;すべてのプライマリCTAに高コントラストを確保;雑然とした印象を避けるために十分なホワイトスペースを維持する。
en · zh-CN · zh-TW · ja · ko