厳選・オープン・無料

Fathom

シンプルでプライバシー優先のGoogle Analytics代替ツール。

01

デザイン DNA

複雑さよりもプライバシーを優先する、穏やかでミニマルなウェブ分析ダッシュボード。

02

カラー

中立的でコントラストの高いパレット。プライマリアクション用の鮮やかな紫を単一アクセントとして使用。

03

タイポグラフィ

humanist-sans · monospace

• display56px · 500
• heading40px · 500
• body18px · 400
• caption14px · 400

鮮明なテキストレンダリングのために、-webkit-font-smoothing: antialiasedを使用。 · 最適な可読性のために、行の長さを約680pxに制限。 · コードスニペットやデータテーブルには等幅フォントを使用。

04

余白

シンプルさを強調するためのたっぷりとした余白を持つ、4pxベースグリッド。

05

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

1px solid rgba(24, 27, 25, 0.1)

None: None

06

レイアウト

ヒーローの下に2カラムの機能グリッドを持つ、中央揃えのシングルカラムレイアウト。

07

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

ビューポートに入ったコンテンツの控えめなフェードイン。 · インタラクティブ要素のスムーズなカラーおよび背景トランジション。

ボタンやリンクの色の変化、または控えめな背景のシフト。 · アクティブ状態を示すための軽いスケールまたは色の変化。

08

コンポーネント

• button 高コントラストの角丸の塗りつぶしボタン。プライマリはアクセントカラー、セカンダリはダークな中立色を使用。
• card 最小限のボーダーや控えめなシャドウを用いた清潔なカード。機能ハイライトやデータテーブルに使用。
• chip ライトな背景とダークなテキストを持つ、小さな角丸タグ。「New」などのラベルに使用。
• input クリーンなボーダーと控えめなフォーカス状態を持つ、シンプルなテキスト入力。
• hero 左側に大きく太字のタイポグラフィ、右側にデータビジュアライゼーションまたはモックアップ。

09

文体と禁止事項

• トーン 明確で、率直で、安心感を与える。
• 見出し シンプルさとプライバシーを強調する、太字で利益を訴求するステートメント。
• CTA 「無料トライアルを始める」のような、アクション指向のフレーズに稲妻アイコンを併用。

• 複雑なグラデーションや重いテクスチャを使用しない — スクリーンショットは清潔でフラットな背景を示しています。
• 明るいマルチカラーパレットを使用しない — スクリーンショットは単一の紫アクセントを使用しています。
• 飾り付けの書体、スクリプト、または過度にスタイリッシュなフォントを使用しない — スクリーンショットはクリーンなサンセリフを使用しています。
• UIに要素を詰め込みすぎない — スクリーンショットは余白と明確さを優先しています。
• ダークモードをデフォルトとしない — スクリーンショットはライトテーマのインターフェースを示しています。
• すべての要素に角丸を使用しない — スクリーンショットは一部のUI要素にシャープな角を使用しています。
• 避ける: 技術的な専門用語や複雑なマーケティング用語。
• 避ける: アグレッシブまたは高圧的な営業言葉。
• 避ける: 曖昧またはあまりに抽象的な利益。

10

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

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

11

System Prompt

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