厳選・オープン・無料

Hygraph

エンタープライズチームのコンテンツスピードを加速するために設計された、AI駆動のヘッドレスCMSです。

01

デザイン DNA

エンタープライズコンテンツオペレーション向けの高性能エンジン。

02

カラー

クリーンでプロフェッショナルな印象を基調とし、主要なアクションや状態変化を強調するために鮮やかなパープルアクセントを採用しています。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display56px · 500
• headline40px · 500
• subtitle20px · 400
• body16px · 400
• label14px · 500

見出しにはジオメトリック・サンセリフフォントを使用し、モダンで構造的な見た目を実現しています。 · 本文テキストにはヒューマニスト・サンセリフフォントを使用し、高い可読性を確保しています。 · モノスペースフォント（Space Grotesk）はコードスニペットや技術的な詳細に使用されます。 · 大文字テキストは、ラベルやナビゲーション要素に控えめに使用されます。 · 大文字テキストの字間は、可読性を高めるためにわずかに広めに設定されています。

04

余白

パディング、マージン、レイアウト間隔には、4pxのベースグリッドが一貫して使用されています。

05

サーフェス (角丸 / 影 / 罫線)

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

レイアウト

標準の12カラムグリッドシステムを使用し、最大幅は1280px、レスポンシブブレークポイントは768pxと1024pxです。

07

モーションとインタラクション

インタラクティブ要素のホバーステートに、微細なバネアニメーション（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

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko