厳選・オープン・無料

Supabase

白いキャンバスに明るいアクセントグリーンと幾何学的なsans-serifタイポグラフィを使用した、ハイコントラストでクリーンな開発者向けプラットフォームサイト。

01

デザイン DNA

明瞭さと機能的美学を重視した、開発者に焦点を当てたクリーンなスイスデザイン。

02

カラー

明るい白をキャンバスとし、ハイコントラストなテキストと、プライマリアクション用の単一の鮮やかなアクセントグリーンを採用。

03

タイポグラフィ

geometric-sans · monospace

• display64px · 500
• h236px · 500
• body16px · 400
• small14px · 400

テキストにはCircularまたは同様の幾何学的なsans-serifを使用。 · 見出しにはインパクトを出すため、 Tightな行高（1.0-1.1）を設定。 · 本文テキストは可読性を確保するため、1.5の行高を維持。

04

余白

コンポーネント間隔には一貫した8pxグリッドを、主要セクション間には十分な垂直パディング（96px）を採用。

05

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

1px solid #dfdfdf

0 1px 3px rgba(0, 0, 0, 0.1)

06

レイアウト

ヒーローには単一カラムのセンタードレイアウトを、コンテンツセクションにはより広いコンテナへと展開。

07

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

ホバー時の微細な色と背景の遷移。 · UIフィードバックのための滑らかな透明度の変化。

微細な背景色の変化またはボーダーのハイライト。 · 状態変化による即座のビジュアルフィードバック。

08

コンポーネント

• button プライマリアクションには塗りつぶしのグリーン、セカンダリアクションにはボーダー付きの透過背景を使用した、角の丸いピル型。
• card 軽い1pxボーダーと角丸を持つクリーンな白いカード。
• chip 細いボーダーを持つ角丸のピル型タグまたはタブ。
• input 角丸と軽いボーダーを持つ標準的な入力フィールド。
• hero 強力な見出しの階層と明確なCTAボタンを持つ、巨大なセンタードテキスト。

09

文体と禁止事項

• トーン 直接的で、開発者フレンドリー、かつ自信に満ちたトーン。
• 見出し 短く、力強く、便益を直接伝える文章。
• CTA 「プロジェクトを始める」のような、行動を促す明確な表現。

• セリフフォントを使用しない — スクリーンショットではクリーンな幾何学的なsans-serifが全体に使用されている。
• 暗い背景を主要テーマとして使用しない — スクリーンショットでは主に白（#ffffff）のキャンバスが使用されている。
• 複数の競合するアクセントカラーを使用しない — スクリーンショットでは単一の鮮やかなアクセントグリーン（#00bb68）に依存している。
• 鋭い角を使用しない — スクリーンショットではすべてのコンポーネントに角丸（4pxから16px）が使用されている。
• 重いドロップシャドウを使用しない — スクリーンショットでは最小限またはシャドウなしで、深度を表現するために軽いボーダーに依存している。
• 密集したレイアウトを使用しない — スクリーンショットでは十分なホワイトスペースと明確なセクションの区切りが示されている。
• 避ける: マーケティング表現
• 避ける: 過度に複雑な専門用語
• 避ける: 曖昧な約束

10

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

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

11

System Prompt

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