厳選・オープン・無料
Vapi
大規模なエンタープライズ音声AIエージェントを構築・デプロイするための、開発者ファーストのプラットフォームです。
aivoice
01
デザイン DNA
エンタープライズ音声AIプラットフォーム開発者スケーラブル
コンシューマアプリのように親しみやすいエンタープライズグレードの開発者向けプラットフォームであり、ハイエディタリアルな写真とクリーンな技術ドキュメントを融合させています。
02
カラー
#FA5E53Accent
#1F1F23Ink
#4B5563Ink soft
#FFFAEABG
#FAFAFABG soft
#F3F4F6BG quiet
#9CA3AFMuted
rgba(0,0,0,0.1)Line
温かみのあるクリーミーなベースパレットを、高コントラストのダークインクとプライマリアクション用の単一の高彩度レッドアクセントで構成しています。
03
タイポグラフィ
geometric-sans · humanist-sans · monospaced
- display
56px · 500 - h2
40px · 500 - h3
24px · 500 - body
16px · 400 - caption
14px · 400
大きな表示用テキストには tighten(負の)文字間隔を用い、モダンでインパクトのある印象を創出します。 · カテゴリラベルや「アイブロー」テキストには大文字とトラッキングされたスタイルを用います。 · 見出しには一貫してプライマリなジオメトリックサンセリフを使用し、大胆でテクニカルなアイデンティティを確立します。
04
余白
4px
8px
16px
24px
32px
40px
48px
64px
72px
96px
余裕のある均一なスペーシングで、特に24pxと40pxの間隔を優先し、密度の高い機能グリッドでも明瞭さを維持します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 6px
md · 8px
lg · 12px
pill · 999px
控えめな囲みとカード定義のために、最小限の1px実線ボーダーを使用します。
rgb(204, 204, 204) 0px 0px 2px 2px · 0px 4px 6px -1px rgba(0, 0, 0, 0.1)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
余裕のある外側パディングを持つ標準的な12カラムグリッドシステムで、モバイルでは単一カラムのスタックに折りたたまれます。
07
モーションとインタラクション
150msmicro
220mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素の滑らかな色と背景の変化。 · ドロップダウンやオーバーレイの表示時のフェードイン/フェードアウト。 · 状態変化時の控えめなトランスフォーム移動。
ボタンやリンクの控えめな色の変化と背景のシフト。 · 軽微なトランスフォームやアルファ値の変化による即座の視覚フィードバック。
08
コンポーネント
- button プライマリは白テキストを載せたダークなピル形状、セカンダリは控えめなボーダー付きの透明なゴーストボタンです。
- card 余裕のある空白と控えめな水平区切り線で区切られた、クリーンでほぼボーダーレスなセクションです。
- chip 控えめなグレーのボーダーと6pxから8pxのボーダー半径を持つ、機能的なドロップダウンとステータスピルです。
- input 8pxのボーダー半径、控えめなボーダー、内部パディングを持つ標準テキスト入力です。
- hero ダークなグラデーションオーバーレイを重ねたフルワイドのシネマティックな写真で、白い表示テキストの高い可読性を確保しています。
09
文体と禁止事項
- トーン 自信に満ち、テクニカルで、エンタープライズに焦点を当てたトーンです。
- 見出し 短く、インパクトがあり、人間中心的なスタイル(例:「すべての顧客に人間の言葉で語りかける」)。
- CTA 直接的でアクション指向のスタイル(例:「始める」「通話を開始」)。
- 純白(#FFFFFF)の背景を使用しないこと — スクリーンショットでは温かみのあるクリーミーなオフホワイト(#FFFAEA)が使用されています。
- 装飾的なセリフフォントを使用しないこと — スクリーンショットは完全にクリーンなジオメトリックおよびヒューマニストサンセリフ系に依存しています。
- 明るいネオン或多色グラデーションを使用しないこと — パレットはクリーム色、黒、単一のレッドアクセントに厳密に限定されています。
- 重いドロップシャドウを使用しないこと — スクリーンショットは奥行きのために非常に控えめで几乎見えないボックスシャドウを使用しています。
- ボーダーでレイアウトを雑然とさせないこと — スクリーンショットは分離のために余裕のある空白と水平線を使用しています。
- 大きな複数行のブロッククォートを使用しないこと — スクリーンショットは最大のインパクトのために高度に圧縮された大きな表示タイプを使用しています。
- 避ける: 過度にplaybackまたはカジュアルな言葉遣い
- 避ける: 明確なコンテキストのない専門用語
- 避ける: 視覚的に雑然としたレイアウト
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Vapiは、開発者向けに設計されたエンタープライズ音声AIプラットフォームです。温かみのあるクリーム色の背景(#FFFAEA)、鮮明なブラックタイポグラフィ(#1F1F23)、プライマリアクション用の単一のレッドアクセント(#FA5E53)に基づいた、洗練されながらも非常に可読性の高い美学が特徴です。タイポグラフィシステムは厳密にサンセリフであり、見出しにはtightな文字間隔の太字ジオメトリック表示フォント、本文にはクリーンなヒューマニストサンセリフを使用しています。レイアウトはゆとりがあり、12カラムグリッドと余裕のあるパディングを採用しています。重要なデザイン制約として、純白の背景の使用回避、装飾的セリフの回避、視覚的な雑踏の回避、および可読性とエンタープライズ信頼性を優先した控えめでプロフェッショナルなカラーパレットの維持が挙げられます。
en · zh-CN · zh-TW · ja · ko