厳選・オープン・無料

Excalidraw

スピードとシンプルさのためにデザインされた、シグネチャーな手描きアエステティックを特徴とするコラボレーションホワイトボードツール。

01

デザイン DNA

鉛筆を持った空白のキャンバス。迅速なアイデア発想の準備完了

02

カラー

柔らかいニュートラルキャンバス背景の上に、ハイコントラストの手描きライン。

03

タイポグラフィ

hand-drawn · humanist-sans · monospace

• display32px · 700
• body16px · 400
• caption14px · 400

プライマリロゴとキャンバス上の要素には手描きスタイルのフォントを使用。 · UI要素、メニュー、システムメッセージにはクリーンなhumanist-sansを使用。 · キャンバスUIには標準の16pxベースサイズを維持し、高い可読性を確保。

04

余白

厳格なグリッドではなく、キャンバス要素によって支配される柔軟でオーガニックなリズム。

05

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

UIコンテナにはニュートラルグレーの微細な1pxボーダー。

0px 0px 0px 1px rgba(255, 255, 255, 1) · 0px 0px 1px 0px rgba(0, 0, 0, 0.17) · 0px 7px 14px 0px rgba(0, 0, 0, 0.05)

06

レイアウト

ユーザー作成要素の絶対位置指定を持つ無限キャンバス。

07

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

ツール選択とUI状態変化のための滑らかなトランジション。 · インタラクティブ要素のための微細なトランスフォームアニメーション。

インタラクティブ要素の微細なシャドウ変化とカラーシフト。 · ツール選択時の即時視覚フィードバック。

08

コンポーネント

• button UIコントロール用の微細なシャドウ付き角丸長方形。
• card 設定やツールチップ用のシンプルなボーダー付きコンテナ。
• chip ボーダー付き角丸長方形で表示されるキーボードショートカットインジケーター。
• input クリーンなボーダーとミニマルなスタイリングのテキスト入力フィールド。
• hero 中央に配置されたブランドロゴとプライマリCTAリンク。

09

文体と禁止事項

• トーン フレンドリーで直接的、ややカジュアル。
• 見出し 手描きで表現豊か、視覚的に際立っている。
• CTA 明確でアクション指向、キーボードショートカットと組み合わせることが多い。

• ダークテーマを使用しない — スクリーンショットでは明るい、明るいキャンバス背景が示されている。
• UI要素に鋭い90度の角を使用しない — スクリーンショットでは4pxから12pxのボーダーラディウスが好まれている。
• 純粋に幾何学的で無機質なフォントを使用しない — スクリーンショットではブランドに手描きフォントが顕著に使用されている。
• キーボードショートカットを隠さない — スクリーンショットではUIアクションの横に明確にラベル付けされている。
• 太く暗いボーダーを使用しない — スクリーンショットでは明るく微細な1pxボーダーと柔らかいシャドウが使用されている。
• 複雑なマルチカラムレイアウトを使用しない — スクリーンショットではミニマルでキャンバス中心のインターフェースが示されている。
• 避ける: 過度に企業的または無機質な言語を避ける。
• 避ける: 複雑または混乱を招く指示テキストを避ける。
• 避ける: 探す必要がある隠れたUI要素を避ける。

10

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

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

11

System Prompt

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