厳選・オープン・無料
Intercom
明瞭さ、抑制、エレガントな機能性を優先する、プレミアムAIネイティブのヘルプデスクです。
SaaSCleanProductivityCalmRefined
01
デザイン DNA
helpdeskAIcustomer supportautomationenterprise
洗練されたモダンなエンタープライズダッシュボード。ハイエディトリアルな写真とクリーンなソフトウェアUIを融合させたデザインです。
02
カラー
#0007cbAccent
#111111Ink
rgba(17,17,17,0.7)Ink soft
#ffffffBG
#f1eee9BG soft
#d3cec6BG quiet
rgba(17,17,17,0.4)Muted
高コントラストのモノクロームを基盤とし、暖色系ベージュのニュートラルと、インタラクティブなハイライトのための単一の深い青のアクセントカラーを採用しています。
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
54px · 400 - h2
28px · 400 - body
16px · 400 - caption
14px · 400
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
可読性のため、4pxをベース単位とした広めの縦方向のスペーシング。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(17,17,17,0.4)
0 0 18px rgba(0,0,0,0.2)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
コンテンツカラムの最大幅を制限した、フル幅のレスポンシブレイアウト。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
color、background-color、border-colorプロパティの滑らかなトランジション。 · hover状態のための微細なbackground-sizeアニメーション。
滑らかなcolorとbackground-colorのトランジション。 · 微細なスケール変化やカラーチェンジによる即座のレスポンス。
08
コンポーネント
- button クリーンなサンセリフタイポグラフィを用いた、ソリッドブラックまたはアウトライン付きのピル-shaped ボタン。
- card 最小限のボーダーや微細なシャドウを持つクリーンなカード。製品UIのスクリーンショットを含むことが多いです。
- chip 微細な背景またはボーダーを持つ、シンプルなテキストタグ。
- input 微細なボーダーと角丸を持つ、クリーンなテキスト入力フィールド。
- hero テキストと製品画像やフォトグラフィを並べたレイアウトと組み合わせた、大型で表現力豊かなタイポグラフィ。
09
文体と禁止事項
- トーン プロフェッショナルで、自信に満ち、先進的。
- 見出し 製品リーダーシップとAI能力についての、太字で直接的なステートメント。
- CTA 「無料トライアルを開始」や「デモを表示」のような、明確で行動を促すフレーズ。
- ヒーローにダーク背景を使用しない — スクリーンショットはクリーンな白い背景を示しています。
- 見出しに装飾的すぎるディスプレイセリフフォントを使用しない — スクリーンショットはクリーンなジオメトリックサンセリフタイポグラフィを示しています。
- 明るく彩度の高いアクセントカラーに依存しない — スクリーンショットは単一の深い青のアクセントを伴う抑制されたパレットを示しています。
- 小さく窮屈なタイポグラフィを使用しない — スクリーンショットは広めの行高と文字間隔を示しています。
- 複雑で雑然とした背景パターンを使用しない — スクリーンショットはソリッドカラーとフォトグラフィックなイメージを示しています。
- 角張った過激なUIコンポーネントを使用しない — スクリーンショットは角丸のボタンとカードを示しています。
- 避ける: 過度にカジュアルな言葉遣い
- 避ける: 曖昧なマーケティングジャーゴン
- 避ける: 強引な緊急性を煽る戦術
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(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
Intercomのホームページは、モダンなSaaSデザインの達人です。ハイエディトリアルな美学とクリーンで機能的なUIを融合させています。中核のアイデンティティはプロフェッショナルでAIに焦点を当てており、ホワイト(#ffffff)、暖色系ベージュ(#d3cec6)、およびほぼブラック(#111111)のテキストを基盤とする抑制されたカラーパレットを使用しています。タイポグラフィは主にクリーンなジオメトリックおよびヒューマニストサンセリフで、ヒーローヘッドラインには54pxのディスプレイサイズで Tightな文字間隔を使用しています。重要なインタラクションには滑らかな0.4sトランジションが特徴です。重要なデザインルール:広めのホワイトスペースを優先し、過度に装飾的な要素を避け、モノクロームをベースに暖色系ニュートラルを微妙に加えることで、製品イメージと深い青(#0007cb)のアクセントが際立つようにしてください。
en · zh-CN · zh-TW · ja · ko