厳選・オープン・無料
Mem
パーソナルAI搭載ノート Taking アプリケーションのための、清潔で温かみがあり、インテリジェントなSaaSランディングページ。
productivitynotes
01
デザイン DNA
AI-firstknowledge managementminimalistwarmapproachable
あなたのニーズを先読みする、エレガントで温かみのあるデジタルノート。
02
カラー
#100F31Ink
#FCF8F1BG
#707070Muted
rgba(16, 15, 49, 0.15)Line
落ち着きと読みやすさを実現するため、温かみのあるオフホワイト背景に深いネイビータイポグラフィを組み合わせる。
03
タイポグラフィ
humanist-sans · monospace
- display
80px · 400 - heading
32px · 400 - body
16px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
4pxをベースとした一貫した垂直リズムと、余裕のあるpaddingで駆動。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 60px
pill · 100px
プライマリインタラクティブ要素には1px solid #100F31
none
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
非対称ヒーローレイアウトの中央揃えコンテナ。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
smooth transitions
ホバー時に微妙なopacityまたは色のシフト。 · 即座の視覚的フィードバック。
08
コンポーネント
- button 100pxのborder-radiusとダークネイビーのstrokeを持つ、ピルシェイプのアウトラインボタン。
- card ソフトシャドウを持つ円形の画像コンテナによって暗示される。
- chip N/A
- input 角が丸い検索バーとオレンジのフォーカスリング。
- hero 左側に大きなタイポグラフィ、右側にオーバーラップする円形要素を持つスプリットレイアウト。
09
文体と禁止事項
- トーン helpful、friendly、confident。
- 見出し 直接的で利益を重視したスタイル。例：「One place for everything on your mind」。
- CTA 明確なアクション重視のラベル。例：「Download Mem」「Watch the video」。
- ホワイト背景を使用しない — スクリーンショットでは温かみのあるクリーム色（#FCF8F1）の背景が示されている。
- 明るいプライマリブルーをボタンに使用しない — スクリーンショットではネイビーのボーダーを持つアウトラインボタンが示されている。
- ヘッドラインに太字のサンセリフを使用しない — スクリーンショットではより軽量なhumanist-sansが使用されている。
- コンテナにシャープなコーナーを使用しない — スクリーンショットではピルシェイプのボタンと円形の画像要素が示されている。
- プライマリインターフェースとしてダークモードを使用しない — スクリーンショットでは明確にライトテーマが示されている。
- 長いヘッドラインにセンタリングされたテキストを使用しない — スクリーンショットでは左揃えのヒーローテキストが示されている。
- 避ける: 過度に専門的な業界用語
- 避ける: アグレッシブな販売言葉
- 避ける: 複雑な比喩表現
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
Memは、パーソナルナレッジマネジメントのための、清潔で温かみがあり、AIに焦点を当てたSaaSアプリケーションです。落ち着きと読みやすさを実現するため、明るいクリーム色背景（#FCF8F1）に深いネイビー（#100F31）のタイポグラフィを組み合わせています。デザインはhumanist-sansフォントファミリーと、余裕のあるspacing、ピルシェイプのUIコンポーネントに依存しています。重要なデザインルール：ホワイト背景を避ける、強烈なプライマリブルーのボタンを避ける、センタリングされたテキストの代わりに左揃えで利益を重視したヘッドラインを使用する。全体的な美学はミニマルで、フレンドリーであり、明確さと使いやすさに焦点を当てています。
en · zh-CN · zh-TW · ja · ko