Calendly
冷たい大理石に濃い青色のインク
Calendlyは、落ち着いた自信に満ちたプランニングワークスペースのような印象を与えます。ほぼ白のキャンバスには十分な余白があり、クールなグレーの背景に浮かぶ鮮明な白い製品カード、そしてすべてのタイポグラフィは純粋な黒ではなく濃い青のインクでレンダリングされています。特徴的な要素は、見出し、ボタン、アイコン、リンクなど、テキストが表示されるすべての場所に使用されている濃い青（#0b3558）で、インターフェース全体を柔らかくし、一般的なSaaSランディングページよりも温かみがありスタイリッシュにしています。すべての主要なアクションには単一の明るい青（#006bff）が使用され、製品レイアウトを超えて広がる装飾的なピンクと青の飛沫は、ごちゃごちゃすることなく温かみを加えています。コンポーネントは控えめに保たれており、1pxの細い境界線、微妙な青みがかった影、24pxの大きなカード半径、8pxのボタンの角は、無味乾燥ではなく、意図的な印象を与えます。
デスクトップでは最大幅1200px、中央揃え、広い余白。メイン画面は2列に分かれており、左側の列には80pxのヘッダー、本文、積み重ねられたログインボタンがあり、右側の列には背景に装飾要素のある予約ウィジェットカードがあります。メイン画面の下には、Trustのロゴが入った幅いっぱいのストライプが1本あります。後続のセクションでは、中央揃えのヘッダーブロック（H2 + サブテキスト + オプションのコールトゥアクション）と、各製品画像の背後に装飾的なアクセント要素がある機能の説明ブロック（テキスト左/製品右または製品左/テキスト右）が交互に表示されます。カードグリッドはほとんど使用されず、レイアウトは複数列のグリッドよりも、ペアのセクションを横に並べることを優先しています。セクション間の間隔は48～64pxです。ナビゲーションは、左側にロゴ、中央揃えのメニュー、右側にコールトゥアクションのグループがある64pxの固定トップバーです。
主なビジュアル要素は製品のスクリーンショットです。予約カレンダーのユーザーインターフェースのシンプルなモックアップを、角が丸みを帯びた真っ白なカードにレンダリングしています。装飾的なデザインとして、各製品カードは、わずかにずらしてぼかしたコーラルパープル（#e55cff）またはアジュールブルー（#0099ff）の柔らかなスポットで囲まれており、平面的なスクリーンショットではなくコラージュ効果を生み出しています。写真やライフスタイル画像は一切使用されていません。すべてのビジュアル要素は、製品のユーザーインターフェース、抽象的なアクセント形状、または信頼バー上のモノクロのパートナーロゴを表しています。アイコンは線幅1.5～2ピクセルの直線で、モノクロ、濃い青（インクネイビー）または青（シグナルブルー）です。
パレット
ブランド
- Ink Navy
#0b3558— 本文、見出し、アイコン、行動喚起のための暗い背景、ナビゲーションリンク。 - Signal Blue
#006bff— 主要なコールトゥアクション（CTA）、アクティブナビゲーション、リンク強調、選択された州
中性
- Carbon
#0a0a0a— テキストは純粋な黒色（フォールバック）、ロゴのグリフ、アイコンの塗りつぶし。 - Slate Gray
#476788— 追加の本文、補足説明文、非表示のラベル。 - Mist Gray
#a6bbd1— 無効化されたテキスト、非アクティブな機能ラベル、ライトアイコンのアウトライン - Cloud
#f8f9fb— ページキャンバス、フッターの背景、追加の表面 - Paper
#ffffff— カードの表面、隆起したパネル、暗い背景にボタンの文字。 - Pebble
#f0f3f8— アイコンの背景画像、入力フィールドのシェーディング、さりげない区切り線、ホバー効果。
タイポグラフィ
12～80ピクセル・10段階
- Gilroy — 交換： Manrope · 概要 400, 500, 600, 700 · すべてのインターフェーステキスト。Gilroyは、広い開口部と均一なストロークコントラストを持つ幾何学的なヒューマニストサンセリフ体です。太字（700）は見出しに、500～600はボタンと小見出しに使用されます。ManropeまたはInterに置き換えてください。
- Gilroy — 交換： Inter · 概要 400 · 本文および汎用UIラベル - 400ポイントのフォントウェイトにより、長文でも読みやすく、重たい印象を与えません。
- Gilroy — 交換： Inter · 概要 500 · 副見出しと強調表示された本文テキスト - カードの見出しとインラインラベルには、14/500フォントが主なツールとして使用されます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8-16px |
| ボタンの半径 | 8px |
| カード半径 | 24px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 48-64px |
| ページ幅 | 1200px |
AI がCalendlyスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- ElevenLabs — 温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Monad — 温熱羊皮紙に関する編集技術誌
- Dub — リンクのマットな和紙製コントロールパネル
- Seline Analytics — 温かい紙の上に静かに置かれた分析表
- Notion — 真昼の太陽の下、温かい紙のノート
- Anthropic — 温かみのある羊皮紙に印刷された科学分野の専門誌――落ち着いた象牙色の表面、セリフ体の編集見出し、そして行動が必要な時だけ現れる、たった一つの粘土色のアクセント。
- Augen Pro — Appleの白いプレゼンテーションでは、モノクロームの空間に、臨床的で軽やかなエレクトリックブルーが唯一のアクセントとして用いられている。
- Antimetal — クリーム色の紙に書かれた編集記事――科学雑誌の静かな朝。そこでは、抑制された表現が自信を伝え、セリフ体が重要な役割を担っている。
- Perk — 温めたパーチメント紙に電気石灰を塗る
- Ditto — 陽光が差し込む工房で、野の花のサンプルが作られている。温かみのあるクリーム色の表面、鮮やかな黄色のベースカラー、深い紺色のインク、作品の背後で咲き誇る有機的な色彩。
- Officevibe — 温かみのあるクリーム色の紙に印刷された編集雑誌。人事管理に関する思慮深いエッセイが、まるで商品のように提示される様子を想像してみてください。モダンな青いインターフェースを通して、筆記体のセリフ体フォントがささやくように流れるのです。