厳選・オープン・無料

Directus

非技術チームがコンテンツを管理し、開発者が開発に集中できるオープンソースのヘッドレスCMSおよびバックエンド-as-a-サービスです。

01

デザイン DNA

データベースインフラ全体を制御するユニバーサルリモコン。

02

カラー

やわらかいグレーによる微細なエレベーションを備えた、高コントラストのモノクローム。

03

タイポグラフィ

transitional-serif · humanist-sans · geometric-mono

• display56px · 400
• h148px · 400
• body16px · 400

主要な見出しにはセリフ調の書体を使用し、エディタリアルな重みを加えます。 · すべてのUI要素と本文にはサンセリフを使用します。 · コードスニペットおよび技術的なUI要素には等幅書体を割り当てます。

04

余白

8pxのベースライングリッドが、大きなセクション全体にわたって一貫した縦のリズムを生み出します。

05

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

1px solid rgba(255, 255, 255, 0.08)

0 4px 12px rgba(0, 0, 0, 0.3) · 0 8px 24px rgba(0, 0, 0, 0.4)

06

レイアウト

ワイド幅のダークキャンバスに、スティッキーヘッダーとセンタードコンテンツカラムを配置します。

07

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

インタラクティブ要素上のやわらかなカラートランジション。 · コンテンツ表示時の滑らかなフェードイン。

ボタンとリンクが、不透明度や背景の明るさをやわらかく変化させます。 · 軽微なスケーリングやカラー変化による即座のビジュアルフィードバック。

08

コンポーネント

• button プライマリボタンは、ホワイト背景にブラックテキスト、大きく丸みのある角丸を採用。セカンダリボタンは透過背景にホワイトテキストとします。
• card 1pxの細いボーダーと12〜20pxの角丸を持つダークグレーのカードで、機能説明をグループ化します。
• chip 透過背景に細いボーダーを持つ、ピル型のナビゲーション要素。アクティブ状態をハイライトします。
• input ダークグレーの入力フィールドに細いボーダーを設定し、コードエントリには等幅書体のタイポグラフィを採用します。
• hero 大きなセリフ調の見出し、サンセリフのサブテキスト、コードスニペット、2つのCTAを配置した、クラシックな左揃えのヒーローセクションです。

09

文体と禁止事項

• トーン 自信に満ち、プロフェッショナルでありながら、過度にカジュアルにならない開発者フレンドリーなトーンです。
• 見出し 直接的でインパクトがあり、メリットを強調。権威付けのためにセリフ調の書体を使用することが多いです。
• CTA 明確で行動を促すもの。例：「無料で始める」「スタジオを見る」など。

• 明るいネオンアクセントは使用しない — スクリーンショットでは严格なモノクロームパレットが示されています。
• 角丸の四角形カードは使用しない — スクリーンショットでは12pxからピル型の角丸を持つ要素が示されています。
• 重厚なサンセリフの見出しは使用しない — スクリーンショットではディスプレイ用のトランジション・セリフが示されています。
• 密集した、小さなテキストのレイアウトは使用しない — スクリーンショットではゆったりとした間隔と大きく読みやすいタイポが示されています。
• 雑然とした背景やテクスチャは使用しない — スクリーンショットではソリッドでニアブラック (#090909) の背景が示されています。
• 遊び心のある、ふわふわしたアイコンは使用しない — スクリーンショットではクリーンでミニマルなUI要素とテクニカルなアイコンが示されています。
• 避ける: 過度にマーケティング寄り、またはバズワードの多いコピーは避けます。
• 避ける: 遊び心のある、あるいは気まぐれなイラストは避けます。
• 避ける: 過度に複雑、あるいはごちゃごちゃしたレイアウトは避けます。

10

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

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

11

System Prompt

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