厳選・オープン・無料
Hygraph
エンタープライズチームのコンテンツスピードを加速するために設計された、AI駆動のヘッドレスCMSです。
cmsdev
01
デザイン DNA
Headless CMSContent VelocityStructured ContentAI-Powered
エンタープライズコンテンツオペレーション向けの高性能エンジン。
02
カラー
#685CEFAccent
#081026Ink
#2D3A5FInk soft
#FFFFFFBG
#F6F8F9BG soft
#E7EAEFBG quiet
#566A95Muted
rgba(231, 234, 239, 1.0)Line
クリーンでプロフェッショナルな印象を基調とし、主要なアクションや状態変化を強調するために鮮やかなパープルアクセントを採用しています。
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
56px · 500 - headline
40px · 500 - subtitle
20px · 400 - body
16px · 400 - label
14px · 500
見出しにはジオメトリック・サンセリフフォントを使用し、モダンで構造的な見た目を実現しています。 · 本文テキストにはヒューマニスト・サンセリフフォントを使用し、高い可読性を確保しています。 · モノスペースフォント(Space Grotesk)はコードスニペットや技術的な詳細に使用されます。 · 大文字テキストは、ラベルやナビゲーション要素に控えめに使用されます。 · 大文字テキストの字間は、可読性を高めるためにわずかに広めに設定されています。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
パディング、マージン、レイアウト間隔には、4pxのベースグリッドが一貫して使用されています。
05
サーフェス (角丸 / 影 / 罫線)
sm · 6px
md · 8px
lg · 10px
pill · 9999px
1px solid rgba(231, 234, 239, 1.0)
None: rgba(0, 0, 0, 0.047) 0px 12px 12px 0px, rgba(0, 0, 0, 0.055) 0px 25px 25px 0px · None: rgba(91, 76, 255, 0.6) 0px 2px 4px 0px, rgb(91, 76, 255) 0px 0px 0px 1px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準の12カラムグリッドシステムを使用し、最大幅は1280px、レスポンシブブレークポイントは768pxと1024pxです。
07
モーションとインタラクション
150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素のホバーステートに、微細なバネアニメーション(cubic-bezier(0.18, 0.89, 0.31, 1.57))が使用されます。 · カラー、背景カラー、ボーダーカラーの変更には、滑らかなトランジション(0.15s)が使用されます。 · 要素の表示には、フェードイン(0.3s)が使用されます。
ボタンやリンクなどのインタラクティブ要素は、ホバー時に繊細なカラーまたは背景の変化が加わり、しばしば微細なバネアニメーションを伴います。 · 要素をクリックすると、フィードバックとして軽微なトランスフォームやカラーチェンジがトリガーされる場合があります。
08
コンポーネント
- button プライマリボタンはピル型(9999px radius)で、ソリッドパープル背景(#685CEF)と白文字です。セカンダリボタンは明るいラベンダー背景(#E8E9FF)とパープル文字を採用しています。
- card カードは、繊細なボーダー、白い背景、最小限のシャドウを持つシンプルなコンテナです。
- chip タグやラベルに使用される、ピル型の小さな要素です。明るい背景と繊細なボーダーが特徴です。
- input テキスト入力欄は、繊細なボーダー、丸みのある角、クリーンな白い背景を持っています。
- hero 目立つ見出し、サブテキスト、明確なCTAを配置した、大きな中央揃えのヒーローセクションです。
09
文体と禁止事項
- トーン プロフェッショナルで、自信に満ち、未来志向のトーンです。
- 見出し 明確な価値提案を伝える、インパクトの大きい大きな見出しです。
- CTA 「お問い合わせ」や「無料で始める」のように、直接的で行動を促すスタイルです。
- 確立されたパープルパレット以外の、刺激的で高彩度のカラーを使用しないでください。
- 見出しに重厚なブラックレターや高度に装飾的なフォントを使用しないでください。
- スクリーンショットが明るく空気感のあるインターフェースを示しているため、完全なダークモードテーマは使用しないでください。
- ボタンやカードに鋭い90度の角を使用しないでください。デザインはより柔らかく丸みのある形状を好んでいます。
- メインコンテンツに密集した複数カラムのテキストレイアウトを使用しないでください。デザインはクリーンで中央揃えの読書パスを好んでいます。
- テキストコンテンツと競合するような、大きく複雑な背景画像は使用しないでください。
- 避ける: 過度にカジュアルな言葉遣い
- 避ける: 文脈のない技術用語
- 避ける: 受動態
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(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
AI駆動のヘッドレスCMS向けの、プロフェッショナルでエンタープライズ志向のB2B SaaSウェブサイトをデザインしています。デザインはクリーンで、空気感があり、信頼感を与えるものでなければなりません。白い背景に、CTAを誘導するメインのパープルアクセント(#685CEF)を採用します。タイポグラフィは、見出し用のジオメトリック・サンセリフと本文用のヒューマニスト・サンセリフを組み合わせ、両方とも高い可読性を持ちます。主要な要素には、丸みのあるボタン(ピル型)、微細なシャドウ、豊かなホワイトスペースが含まれます。ダークモードは使用せず、インタラクティブ要素には鋭い角を使用せず、密集した乱雑なレイアウトは使用しないでください。全体的な印象は、精密さ、効率性、モダンなテクノロジーを感じるものでなければなりません。
en · zh-CN · zh-TW · ja · ko