Zapier は 9,000 以上のアプリをつなぎ、AI ワークフローとエージェントを自動化するオーケストレーションプラットフォームです。UI は純白ではなく暖かなクリーム色（#fffefb）を使って紙の質感を生み出し、本文は赤みを帯びたほぼ黒（#201515）で「圧迫ではなく呼吸」を実現します。Degular Display が行高 0.90 でインパクトのあるヒーロー見出しを描き、Inter がすべての機能 UI を担い、GT Alpina の細いセリフ体はエディトリアルなアクセントにのみ現れます。ブランドオレンジ（#ff4f00）が自動化というテーマに火を点けます。効率化ツールと親しみやすいイラスト風のプロダクトに適しています。
Zapier生産性と SaaS
プロンプトテンプレート
基本テンプレート
Design a Zapier-inspired interface. - Warm cream canvas (#fffefb) instead of pure white -- organic, paper-like warmth; - Near-black with reddish undertone (#201515) -- text that breathes rather than dominates; - Degular Display for hero headlines at 0.90 line-height -- compressed, impactful, modern; - Inter as the universal UI font across all functional typography; - GT Alpina for editorial accents -- thin-weight serif with extreme negative tracking. Colors: #201515, #fffefb, #fffdf9, #ff4f00 with #201515 accent. Typography: Inter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Zapier aesthetics. Use Zapier color identity with #201515 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Zapier style. Use Zapier color identity with #201515 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Zapier design language. Use Zapier color identity with #201515 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Zapier visual identity. Use Zapier color identity with #201515 accents. Compelling, conversion-focused.
使用例
Zapier アプリ
WebBuild a web app with Zapier design language and #201515 color system.
Zapier ダッシュボード
ダッシュボードCreate a dashboard using Zapier style with data visualization and Inter typography.
✅ 適した用途
- SaaS 製品
- 自動化と連携のプラットフォーム
- 非技術ユーザー向けの効率化ツール
❌ 適さない用途
- 厳粛な金融コンプライアンスページ
- ダーク SF 風の UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。