Notion はドキュメント、ナレッジベース、プロジェクト管理をひとつの場所に収めたワークスペースです。ビジュアルは暖色のミニマルが際立ち、グレースケールは黄褐色の下地を帯び（#f6f5f4 の暖かな白）、本文は純黒ではなく 95% の黒を使います。1px の淡いボーダーと透明度 0.05 未満の多層シャドウが、UI を紙のように軽く感じさせます。コンテンツ駆動で、読みやすさと秩序感を重視する効率化プロダクトに適しています。
Notion生産性と SaaS
プロンプトテンプレート
基本テンプレート
Design a Notion-inspired interface. - NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px); - Warm neutral palette: grays carry yellow-brown undertones (#f6f5f4 warm white, #31302e warm dark); - Near-black text via rgba(0,0,0,0.95) -- not pure black, creating micro-warmth; - Ultra-thin borders: 1px solid rgba(0,0,0,0.1) throughout -- whisper-weight division; - Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth. Colors: #000000f2, #ffffff, #0075de, #213183 with #0075de accent. Typography: NotionInter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Notion aesthetics. Use Notion color identity with #0075de accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Notion style. Use Notion color identity with #0075de accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Notion design language. Use Notion color identity with #0075de accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Notion visual identity. Use Notion color identity with #0075de accents. Compelling, conversion-focused.
使用例
Notion アプリ
WebBuild a web app with Notion design language and #0075de color system.
Notion ダッシュボード
ダッシュボードCreate a dashboard using Notion style with data visualization and NotionInter typography.
✅ 適した用途
- SaaS 製品
- ノートとナレッジベース系プロダクト
- ドキュメント協業とプロジェクト管理の UI
❌ 適さない用途
- モーション重視のゲーミフィケーション娯楽
- ネオンでダークなテック UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。