厳選・オープン・無料

Metabase

AIで質問に答えるオープンソースアナリティクスプラットフォーム。

01

デザイン DNA

クリーンでデータ駆動型のダッシュボード

02

カラー

白い背景に強いプライマリブルーのアクセントを持つ、クリーンでデータ焦点の配色。

03

タイポグラフィ

humanist-sans · monospace

• display48px · 700
• h140px · 700
• h228px · 700
• body16px · 400
• small14px · 400

04

余白

4pxのマイクロスペーシングを持つ、一貫した8pxの基本単位。

05

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

1px solid rgba(90, 96, 114, 0.15)

0 1px 2px rgba(16, 24, 40, 0.05) · 0 16px 28px -6px rgba(24, 39, 75, 0.12) · 0 32px 88px -4px rgba(24, 39, 75, 0.14)

06

レイアウト

明確なセクション区切りを持つ、標準的なセンタリングコンテナ。

07

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

スクロール時のフェードイン · ボタンのホバートランジション

インタラクティブ要素上的、繊細な背景色の変化やシャドウの高まり。 · 即座のビジュアルフィードバック。

08

コンポーネント

• button プライマリボタンは角丸（8px）のアクセントブルーを使用。セカンダリボタンはアウトライン。
• card 繊細なボーダーと柔らかいシャドウを持つ、クリーンな白いカード。
• chip 明確には見られませんが、同様のUI要素は柔らかなピル型の外観を持ちます。
• input ボーダーのあるクリーンなテキスト入力。
• hero 2つの主要なCTAボタンを持つ、大きなヘッドラインとサブヘッド。

09

文体と禁止事項

• トーン プロフェッショナルで、明確で、有益。
• 見出し 直接的、メリット重視で、大胆。
• CTA '試す'や'デプロイ'のような行動を促す動詞。

• ダークモードテーマを使用しない — スクリーンショットは明るいライトテーマのインターフェースを示しています。
• 高コントラストのネオン色を使用しない — パレットは柔らかなブルーとニュートラルが中心です。
• カードやボタンに鋭い90度の角を使用しない — スクリーンショットは角丸を示しています。
• プライマリ本文に細くエレガントなセリフフォントを使用しない — フォントはクリーンなヒューマンサンスです。
• 十分なホワイトスペースなく、大きく密集したテキストブロックを使用しない — レイアウトは開放的で風通しが良いです。
• 複雑なグラデーションをプライマリ背景として使用しない — 背景はほぼ単色の白か、非常に繊細なライトブルーです。
• 遊び心のある或いは風変わりなイラストスタイルを使用しない — ビジュアルはクリーン、機能的で、プロフェッショナルです。
• 避ける: メインコピーの過度な技術用語
• 避ける: アグレッシブなセールス言葉

10

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

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

11

System Prompt

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