厳選・オープン・無料

Umami

Umamiは、Google Analyticsに代わるシンプルでプライバシーを重視したオープンソースのウェブ分析ツールです。

01

デザイン DNA

ウェブ分析のためのクリーンでミニマルなダッシュボード。

02

カラー

中立的な白背景に、プライマリアクションに単一のブルーアクセントカラーを使用したクリーンでハイコントラストのパレット。

03

タイポグラフィ

humanist-sans · monospace

• display63px · 800
• heading42px · 700
• body14px · 400
• small11px · 400

ディスプレイ見出しは、字間を詰めた太字のhumanist-sansで設定。 · 本文テキストは、可読性を考慮し通常のウェイトのhumanist-sansを使用。 · ドキュメント内のコードスニペットには等幅フォントを使用。

04

余白

スペーシングスケールは、7pxの基本単位に基づいています。

05

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

1px solid rgba(0, 0, 0, 0.05)

rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.1) 0px 1px 2px -1px · rgba(0, 0, 0, 0.1) 0px 8px 10px -6px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px · rgba(0, 0, 0, 0.15) 0px 10px 40px 0px

06

レイアウト

ヒーロー部分は単一カラムレイアウトを採用し、機能およびコンテンツセクションではマルチカラムグリッドに移行。

07

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

hoverおよびfocus時の、colorおよびbackground-colorの滑らかなトランジション。 · チャートなどの動的コンテンツに対するopacityフェードイン。

ボタンやリンクなどのインタラクティブ要素に対する、hover時のcolorおよびbackground-colorの変化。 · クリック時の控えめなbackground-colorの変化。

08

コンポーネント

• button プライマリアクション用の、白文字を備えた青色の角丸長方形ボタン。
• card UIモックアップの表示に使用する、控えめなボーダーと薄いシャドウを持つ白いカード。
• chip 指標の変化率を表示するための、小型の角丸バッジ。
• input 控えめなボーダーを持つ標準的なテキスト入力。
• hero 太字の見出し、サブタイトル、プライマリCTAボタン、その後にUIモックアップを配置した、大型で中央揃えのヒーローセクション。

09

文体と禁止事項

• トーン シンプルさとプライバシーを強調し、直接的で自信に満ち、かつ親切なトーン。
• 見出し コアバリュー propositionを強調する、太字で大きく簡潔な表現。
• CTA 「無料で始める」などのフレーズを使用した、明確でアクション指向の表現。

• ダーク背景を使用しない — スクリーンショットは主に白（#ffffff）の背景を示しています。
• 複数のアクセントカラーを使用しない — スクリーンショットは単一のブルー（#3366FF）アクセントのみを示しています。
• 角丸半径が9.45pxを超える角丸を使用しない — スクリーンショットは控えめな角丸を示しています。
• すべての要素にドロップシャドウを使用しない — スクリーンショットはカードなどの特定のコンポーネントにのみシャドウを適用しています。
• 見出しにセリフフォントを使用しない — スクリーンショットはすべての見出しにhumanist-sansを使用しています。
• 狭く窮屈なレイアウトを使用しない — スクリーンショットは十分な余白とパディングを示しています。
• 情報過多で密集したヒーローセクションを使用しない — スクリーンショットは明確で焦点を絞った見出しと単一のCTAを示しています。
• ダークモードテーマを使用しない — スクリーンショットはライトテーマを示しています。
• 避ける: 複雑な専門用語や過度に技術的な言葉遣いの使用。
• 避ける: 過度にプロモーショナルな表現や誇大な言葉の使用。
• 避ける: 遊び心のある、または過度にカジュアルなトーンの使用。

10

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

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

11

System Prompt

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