厳選・オープン・無料

Balsa

ソフトウェア構築のためのドキュメントとプロジェクト追跡ツール。

01

デザイン DNA

製品チームの目標やタスクを一致させるための、クリーンで焦点の絞られたワークスペース。

02

カラー

ハイコントラストな黒と白をベースに、重要なUIカードやコールアウトを強調するための高彩度の黄色アクセントを単色で使用します。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

• display48px · 700
• heading24px · 700
• body16px · 400
• caption12px · 400

UIラベルやステータスインジケーターには大文字を使用します。 · 見出しには太いウェイトと詰まった文字間隔を使用します。

04

余白

4pxグリッドをベースに一定の間隔を取り、ヒーローセクションには広い余白を設けます。

05

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

繊細な区切りをつけるための、薄く低不透明度の黒いボーダー（rgba(0,0,0,0.09）を使用します。

rgba(0,0,0,0.05) 0px 1px 0px 0px · rgba(0,0,0,0.15) 0px 0.7px 0.7px -0.625px, rgba(0,0,0,0.145) 0px 1.8px 1.8px -1.25px, rgba(0,0,0,0.05) 0px 30px 30px -3.75px

06

レイアウト

マーケティングサイトには単一カラムの中央揃えレイアウト、製品UIスクリーンショットには複雑なマルチカラムグリッドを採用します。

07

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

hoverやfocus状態でのスムーズな遷移。

インタラクティブ要素上の微妙な色の変化や影の移動。 · 状態の変化による即座のビジュアルフィードバック。

08

コンポーネント

• button プライマリアクションには実黒のピル型ボタン、セカンダリアクションにはボーダー付きピル型ボタンを使用します。
• card 柔らかい影のある白いカード（例：メインの製品UIスクリーンショット）と、機能を強調するための黄色アクセントカード。
• chip 角丸と背景色を持つステータスインジケーター。
• input クリーンでボーダー付き、微妙な影のある入力フィールド。
• hero 中心に配置され、テキストを多用したヒーローセクションで、大きな見出し、サブテキスト、その下に目立つ製品UIスクリーンショットを配置します。

09

文体と禁止事項

• トーン 直接的で、プロフェッショナル、チームの効率性に焦点を当てた語り口。
• 見出し 全角、太字、ハイコントラスト。
• CTA 明確でアクション指向、ピル型ボタンに収められることが多い。

• 複雑な背景は使用しない — スクリーンショットではクリーンな純白（#FFFFFF）背景が示されています。
• 低コントラストのアクセントカラーは使用しない — スクリーンショットでは強調に高彩度の黄色（#FFB700）が使われています。
• 明るいまたは灰色のプライマリテキストカラーは使用しない — スクリーンショットではメイン見出しに純黒（#000000）が使われています。
• 鋭角の角は使用しない — スクリーンショットではプライマリカードやコンテナに角丸（12px）が使われています。
• ダークモードインターフェースは使用しない — スクリーンショットでは主に白/ライトテーマが示されています。
• 装飾的、手書き、または過度にスタイリッシュなフォントは使用しない — スクリーンショットではクリーンで機能的なサンセリフとモノスペースのカテゴリが使われています。
• 避ける: カジュアルな言葉遣い
• 避ける: 複雑な専門用語
• 避ける: 過度に密度の高いテキストブロック

10

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

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

11

System Prompt

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