厳選・オープン・無料

tldraw

あなたのアイデアを邪魔しないように設計された、ミニマルで共同作業用のキャンバスツール。

01

デザイン DNA

隠れたクロームを備えたクリーンなデジタルホワイトボード

02

カラー

プライマリアクションに鮮やかなブルーを1つだけ使用した中立的なキャンバス

03

タイポグラフィ

humanist-sans

• body12px · 500
• caption16px · 500
• h124px · 700

UI要素には中立的なsans-serifを使用 · 標準UIテキストには一貫してウェイト500を維持 · ボールドウェイトは控えめに使用し、主に見出しに限定

04

余白

8pxベースグリッド

05

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

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

rgba(0, 0, 0, 0.16) 0px 0px 2px 0px · rgba(0, 0, 0, 0.24) 0px 2px 3px 0px

07

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

UIパネルの可視性に対する滑らかなトランジション

インタラクティブ要素上でカーソルがポインタに変化 · アクティブ状態は色の変化や微細なシャドウで示される

08

コンポーネント

• button プライマリボタンは白文字の塗りつぶしブルーで、ピル型の角丸。セカンダリボタンはグレーまたはアウトラインスタイル。
• card 従来のカードは不使用。UIはシャドウ付きの浮遊パネルとして表示。
• chip チップは未使用。
• input テキスト入力は見られず、インターフェースは主にアイコンベース。
• hero キャンバス全体がヒーロースペースとして機能。

09

文体と禁止事項

• トーン ミニマルで機能的、かつ控えめ
• 見出し 簡潔でアクションを促すラベル
• CTA 「サインインして共有」といった直接的で明確な表現

• ダーク背景を使用しない — スクリーンショットは明るいホワイトキャンバスを示している。
• 多様なフォントを使用しない — スクリーンショットは一貫したhumanist-sansを示している。
• 重いドロップシャドウを使用しない — スクリーンショットは微細でリアルなシャドウを示している。
• UIを雑然とさせない — スクリーンショットは最小限の浮遊ツールバーを示している。
• 複雑なカラーパレットを使用しない — スクリーンショットは中立ベースにブルーアクセント1つだけを示している。
• 過度に複雑なタイポグラフィを使用しない — スクリーンショットはシンプルでウェイトベースの階層を示している。
• 避ける: 不必要なUIでキャンバスを雑然とさせる
• 避ける: 装飾的なフォントを使用する
• 避ける: 多様なプライマリカラーを採用する

10

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

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

11

System Prompt

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