厳選・オープン・無料
Tana
編集タイポグラフィと温かみのある人間的な写真を使用し、会議を能動的な作業のように感じさせるプレミアム生産性ツール。
productnotes
01
デザイン DNA
生産性会議メモAIコラボレーションワークフロー
クラシックな編集タイポグラフィとモダンなアプリUIパターンを融合させた、スタイリッシュでハイエンドな生産性アプリケーション。
02
カラー
#0C0805Ink
#3A3A3AInk soft
#FBFBFBBG
#FFF2EFBG soft
#6A6A6AMuted
rgba(12,8,5,0.1)Line
柔らかいピーチのアクセントを加えた暖かみのある高コントラストモノクロームパレット。可読性とプレミアム感を優先します。
03
タイポグラフィ
didone-serif · humanist-sans · monospace
- display
72px · 400 - headline
48px · 400 - body
17px · 400 - nav
15px · 400
大規模なディスプレイテキストと見出しにはDidone Serif（Source Serif 4）を使用。 · 本文、UI要素、ナビゲーションにはHumanist Sans（Inter）を使用。 · ディスプレイテキストには、 tighterなnegative letter spacingを維持。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
一貫したリズムのために4pxの基本incrementを使用。カードとセクションでは、たっぷりとしたpadding（24px-48px）を確保します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 6px
md · 14px
lg · 20px
pill · 999px
分離のためにrgba(12,8,5,0.1)を使用した、繊細な1pxボーダー。
rgba(20, 22, 36, 0.1) 0px 6px 18px -12px · rgba(20, 22, 36, 0.28) 0px 40px 96px -28px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
ヒーローセクションにはセンタリングされた単一カラムレイアウト、コンテンツにはグリッドに拡張。
07
モーションとインタラクション
120msmicro
160mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hoverおよびclick時の、滑らかなopacityとtransformトランジション。
繊細なopacityの低下または背景色の変更。 · 少しscale down（transform）またはopacityの変更。
08
コンポーネント
- button プライマリアクションには高コントラストの黒い角丸ピルボタン、セカンダリには透明またはライトグレー。
- card 大きなborder-radius（14px-20px）を持つ柔らかく角丸のカード。メディアや複雑なUIプレビューを含むことが多い。
- chip 小さな、角丸のピル-shapedタグまたはステータスインジケーター。
- input 最小限のボーダーを持つ、繊細でクリーンな入力フィールド。
- hero たっぷりとした縦方向の余白と柔らかい背景グラデーションを持つ、全幅のセンタリングされた見出し。
09
文体と禁止事項
- トーン 自信に満ち、プロフェッショナルで、少し編集的な響き。
- 見出し 短くインパクトのある文章。イタリックで強調された単語を1つ使用することが多い。
- CTA 直接的で利益志向。例：「無料で試す」。
- ビビッドで高クロマのアクセントカラーを使用しない — スクリーンショットは主にモノクロームパレットで、暖かみのある柔らかいアクセントが使用されている。
- 見出しに幾何学的または技術的なsans-serifを使用しない — スクリーンショットはエレガントなserifタイポグラフィを使用している。
- ダークモードをデフォルトにしない — スクリーンショットは明るいオフホワイト背景（#FBFBFB）を使用している。
- 鋭く四角い角を使用しない — スクリーンショットはすべてのカードとボタンに大きなborder-radius（14px、20px）を使用している。
- 密集したグリッドでレイアウトを雑踏させない — スクリーンショットはたっぷりとした余白と、焦点を絞ったセンタリングされたヒーローを使用している。
- 遊び心のあるまたはアニメーション調のイラストを使用しない — スクリーンショットは高品質でシネマティックな写真に依存している。
- 避ける: 過度な句読点
- 避ける: 本文のALL CAPS
- 避ける: 過度に技術的な専門用語
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
Tanaは、クラシックな編集デザインとモダンなアプリUIを融合させたプレミアム生産性ツールです。ビジュアルシステムでは、大規模なディスプレイ見出しにDidone-serif（Source Serif 4）を、すべての本文とUI要素にHumanist-sans（Inter）を使用しています。プライマリカラーパレットは、オフホワイト（#FBFBFB）の上のインク（#0C0805）という高コントラストのモノクロームで、特定のセクションでは柔らかいピーチ/暖色（#FFF2EF）のアクセントを加えています。重要な制約：ビビッドで高クロマのアクセントカラーは決して使用せず、常に柔らかく角丸の角（14px-20px radius）を使用し、プレミアムで編集的な雰囲気を維持するためにたっぷりとした縦方向の余白（24px-96px）を確保します。トーンは自信に満ち、プロフェッショナルで、短くインパクトのある見出しに、時折イタリックの強調を使用します。
en · zh-CN · zh-TW · ja · ko