厳選・オープン・無料
Cal
個人や企業向けの、完全にカスタマイズ可能で開発者フレンドリーなスケジューリングソフトウェア。
ProductivitySaaSCalendarCleanProduct
01
デザイン DNA
スケジューリングカレンダーミーティング生産性カスタマイズ可能
洗練された近代スイスの鉄道時刻表を、デジタルなスケジューリング・プラットフォームに翻訳したものです。
02
カラー
#000000Ink
#292929Ink soft
#FFFFFFBG
#F4F4F4BG soft
#E1E2E3BG quiet
#898989Muted
rgba(0,0,0,0.16)Line
高コントラストのモノクロム。纯白に纯黑を基調とし、階層や構造にはニュートラルグレーを使用。
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
48px · 500 - h2
32px · 600 - body
16px · 400 - caption
12px · 400
見出しは字間 -0.2px のタイトなカーニング · 本文は快適な行の高さ 1.5 · ボタンやナビゲーションは強調のためウェイト 500 · カレンダーの日付や小さなラベルはウェイト 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
一貫した 4px ベースグリッドにより、UI コンポーネントの紧密な配置とコンテンツセクションのゆったりとした余白を実現します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
カードのエッジには、rgba(0,0,0,0.16) または明るいグレーを使用した、精緻な 1px solid のボーダー。
rgba(34, 42, 53, 0.08) 0px 0px 0px 1px · rgba(34, 42, 53, 0.05) 0px 4px 8px 0px · rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えのコンテナレイアウト。テキストとUIモックアップが左右に分割された大きなヒーローセクションが特徴。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
ボタンやリンクの精緻なホバー遷移 · 対話的なカレンダーエレメントの滑らかなレイアウト変化
ボタンやインタラクティブな要素の背景色の変化、または精緻な高さの変化。 · 色の変化やフォーカスリングによる即座の視覚的フィードバック。
08
コンポーネント
- button プライマリアクションには実黒の塗りつぶし、セカンダリアクションには白/透明の塗りつぶしを持つ、ピル型または角丸長方形のボタン。
- card カレンダーUIやインテグレーショングリッドをフィーチャーし、精緻なシャドウまたは明るいボーダーを持つ白いカード。
- chip 「App store」や「Cal.com launches v6.5」などのタグ用の小さな角丸ピル。
- input 角丸ボーダーと精緻なシャドウを持つクリーンなテキスト入力。予約ウィジェットの一部としてよく使用される。
- hero 左側に大きなタイポグラフィ、右に詳細なスケジューリングウィジェットのモックアップを持つ目立つトップセクション。
09
文体と禁止事項
- トーン プロフェッショナルで明確、率直。効率性とカスタマイズ可能性に焦点を当てる。
- 見出し 価値提案を先頭に置く、太字で簡潔なステートメント。
- CTA アクション指向で率直（例：「Googleで登録」「はじめる」）。
- 高彩度のプライマリカラーを使用しない — スクリーンショットは厳密にモノクロのブラック＆ホワイトパレットを示しています。
- 装飾的なセリフフォントを使用しない — スクリーンショットは全編にわたりクリーンで幾何学的なサンセリフタイポグラフィを示しています。
- カードに重いドロップシャドウを追加しない — スクリーンショットは明るいボーダーを使用した、非常に精緻でほぼフラットな高さを示しています。
- ボタンにシャープな角を使用しない — スクリーンショットは一貫して角丸またはピル型のボタンデザインを示しています。
- レイアウトを要素で混雑させない — スクリーンショットは豊かな余白と焦点を絞ったコンテンツの階層を示しています。
- 本文にすべて大文字を使用しない — スクリーンショットは可読性を高めるための混在ケーステキストを示しています。
- ラベルなしのアイコンに頼らない — スクリーンショットはすべてのUI要素に明確で記述的なテキストが添えられていることを示しています。
- 避ける: 見出しに過度に技術的な専門用語を使用する
- 避ける: 派手またはネオンのアクセントカラーを使用する
- 避ける: 製品モックアップよりも装飾的な画像に頼る
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
Cal.com は、ハイエンドでカスタマイズ可能なスケジューリングソフトウェア・プラットフォームです。そのデザインDNAは、ブラック、ホワイト、ニュートラルグレーのクリーンなモノクロムパレットに基づき、ディスプレイには幾何学的なサンセリフフォント、本文にはヒューマニストサンセリフを使用しています。レイアウトはゆったりとして構造化されており、12カラムグリッドと 4px ベースのスペーシングが特徴です。主要コンポーネントには、製品の機能性を紹介するピル型ボタンや精緻なカードが含まれます。重要な制約：派手なアクセントカラーは避けること、セリフフォントは使用しないこと、高コントラストでプロフェッショナルな審美性を維持すること。混雑したレイアウトは避け、明瞭さと余白を優先すること。全体的な印象は高級感があり、開発者志向で、信頼性と精度を強調しています。
en · zh-CN · zh-TW · ja · ko