厳選・オープン・無料

Grafana

オープンソースの伝統とAI駆動のクラウド機能を融合したフルスタックの可観測性プラットフォーム。

01

デザイン DNA

モダンインフラのための精密な工学機器

02

カラー

ハイコントラストの中立的なベースに、アクション用の明るいプライマリーブルーを配置。深みを加えるために、控えめなウォームからクールへのグラデーションを使用。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display56px · 500
• h240px · 500
• body16px · 400
• small14px · 400

ブランドアイデンティティを確立するために、目立つディスプレイテキストにはPoppinsを使用。 · 最適な可読性のために、本文コピーおよびUI要素にはInterを使用。 · 本文テキストはベースサイズ16px、行間1.5を維持。 · 大きな見出しにはネガティブな文字間隔を使用し、よりタイトでモダンな印象を演出。

04

余白

一貫した4pxベースグリッドに十分なホワイトスペースを設け、クリーンで air なレイアウトを維持。

05

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

1px solid #AEAEBC

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

06

レイアウト

ヒーロー部分はセンタルなシングルカラムレイアウト、機能カード部分はマルチカラムグリッドに移行。

07

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

インタラクティブ要素の滑らかなカラーおよび背景トランジション。 · hover状態のための控えめな不透明度変化。 · ヒーローバックグラデーションのためのCSSベースのグラデーションアニメーション。

リンクのカラーシフトと、ボタンの控えめな背景変化。 · 背景カラーの変化やスケールによる即座のビジュアルフィードバック。

08

コンポーネント

• button メインCTAにはソリッドなプライマリーブルー（#1B55F5）、セカンダリアクションにはアウトライン／ゴーストスタイル。角は丸みを帯びる。
• card ホワイト背景に控えめなボーダーと8pxのborder-radius。最小限のシャドウを使用。
• chip 丸みを帯びた形態の要素に控えめなボーダー。通常、テキストラベルを含む。
• input クリーンなボーダー付きフィールド。focus時に控えめな背景トランジション。
• hero マルチカラーグラデーション背景の上に配置された大きなセンタル見出し。AI検索入力バーを特徴とする。

09

文体と禁止事項

• トーン プロフェッショナルで、率直かつ技術的に権威がある。
• 見出し 簡潔で、メリットを強調し、大胆。能動態の動詞をよく使用。
• CTA 明確で、行動を促す。使いやすさを強調（例：'Get started free'）。

• 過度なドロップシャドウを使用しない — スクリーンショットは非常に控えめで、ほぼ存在しないシャドウを示している。
• 装飾的なまたは筆記体フォントを使用しない — スクリーンショットは幾何学的およびヒューマニストサンセリフに厳密に依存。
• 重い背景テクスチャを使用しない — スクリーンショットはクリーンなソリッドカラーと滑らかなグラデーションを使用。
• ごちゃごちゃしたレイアウトを使用しない — スクリーンショットは十分なホワイトスペースと明確なビジュアル階層を示している。
• アグレッシブでパルスするアニメーションを使用しない — スクリーンショットは滑らかで標準的なCSSトランジションに依存。
• 低コントラストのテキストを使用しない — スクリーンショットは白地に黒または青地に白で高い可読性を維持。
• 避ける: 専門用語を多用した文
• 避ける: 過度な感嘆符
• 避ける: 曖昧なマーケティング表現

10

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

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

11

System Prompt

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