厳選・オープン・無料

Contentful

エンタープライズ向けコンテンツ管理とパーソナライゼーションのプロフェッショナルSaaSプラットフォーム。

01

デザイン DNA

開発者やコンテンツチームのためのクリーンでプロフェッショナルなワークスペース。明瞭さと効率性を重視。

02

カラー

明瞭さと信頼性のために、ソフトなブルーアクセントパレットを備えたプロフェッショナルな抑制。

03

タイポグラフィ

humanist-sans · monospace

• display72px · 400
• heading56px · 400
• body-lg18px · 400
• body16px · 400
• small14px · 600

見出しにはインパクトのためにタイトな字間空き（ネガティブレタースペーシング）を使用。 · 本文は読みやすさのために十分な行間（ラインハイト）を維持。 · フォントウェイトは主にレギュラー（400）で、UI要素にはセミボールド（600）を使用。

04

余白

グリッドアイテムとセクション間に一貫した32pxのギャップ。

05

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

1px solid #E5E7EB

rgba(0, 0, 0, 0.25) 0px 0px 20px 0px

06

レイアウト

幅広のナビゲーションバーと余裕ある垂直パディングを持つ、中央揃えコンテンツ。

07

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

hover時の滑らかなカラーや背景色のトランジション。 · UI状態変化に向けたTransformと不透明度のトランジション。

テキストリンクの色変化とボタンの背景シフト。 · 繊細なTransformや不透明度の低下。

08

コンポーネント

• button ソリッドなダーク背景に白テキストのピル型プライマリボタン、またはアウトライン付きセカンダリボタン。
• card 繊細な境界線やソフトな背景を持つクリーンなコンテナ。機能やテスティモニアルに使用。
• chip 機能タグやナビゲーションに使用される、アイコン付きの小さなピル型要素。
• input 繊細な境界線と角丸を持つ、クリーンでミニマルな入力欄。
• hero ソフトな色の背景に、支援的なイラストまたは写真を添えた、大きくインパクトのある見出し。

09

文体と禁止事項

• トーン プロフェッショナルで自信に満ち、ややテクニカル。開発者やマーケターをエンパワーメントすることをめざす。
• 見出し 直接的でベネフィット志向。時折遊び心も含む（例：ヒーローの「whatever」）。
• CTA 「Explore」「Log in」「Contact sales」のようなアクション志向の動詞。

• セリフフォントを使用しない — スクリーンショットではクリーンなヒューマニストサンセリフが全体に使用されている。
• ネオン色や非常に彩度の高いアクセントカラーを使用しない — スクリーンショットでは落ち着いたプロフェッショナルなブルー（#3C80CF）がプライマリアクセントとして使用されている。
• 背景に複雑なグラデーションを使用しない — スクリーンショットでは主にソリッドな白、または非常にソフトでフラットな色のセクション（#F5F7F9、#E4EFF8）が使用されている。
• 到处に重厚でダークな境界線を使用しない — スクリーンショットではライトで繊細な境界線（#E5E7EB）やボーダーレスデザインが使用されている。
• 本文の行間を極端に詰めない — スクリーンショットでは快適で読みやすい行間（約1.55）が使用されている。
• ボタンやカードに鋭い90度の角を使用しない — スクリーンショットでは一貫して角丸（4pxから999px）が使用されている。
• 避ける: 過度にカジュアルなスラング
• 避ける: 受動態
• 避ける: データのない曖昧な約束

10

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

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

11

System Prompt

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