厳選・オープン・無料

Dropmark

クリエイティブチームのための、清潔で親しみやすいビジュアル組織化ツール。

01

デザイン DNA

チームのワークフローのためのデジタル・ピンボード

02

カラー

明るいホワイトキャンバスを基調とし、柔らかなウォームグレーと鮮やかなシアンのアクセントを配置。

03

タイポグラフィ

humanist-sans

• display56px · 600

プライマリはカスタムヒューマニスト・サンセリフ（DropmarkRealHead/Text）を使用 · 見出しは親しみやすさのある存在感を示すため、セミボールド（600）ウェイトを採用 · 本文は標準的な可読性を保つため400ウェイトを維持

04

余白

豊かな縦方向の余白により、息のつくエアリーなレイアウトを実現。

05

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

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

0px 4px 7px 0px rgba(0,0,0,0.1) · inset 0px 0px 0px 2px rgb(220,220,210)

06

レイアウト

明確な単一カラムのヒーローフローを持つ、中央揃えのコンテンツ構成。

07

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

インタラクティブ要素に対する標準的なopacityおよびfilterのトランジション · ホバーステートに対する滑らかなbackground-colorのトランジション

ボタンやインタラクティブな要素に対する繊細な色の変化。 · 最小限のプレスフィードバックを持つ、標準的なポインターアクション。

08

コンポーネント

• button プライマリは鮮やかなシアンに白文字を配置、セカンダリは薄いグレーのボーダーを持つ透明スタイル。
• card 最小限のシャドウと角丸を持つ、シンプルなホワイトコンテナ。
• chip 提供されたスクリーンショットでは目立って使用されていません。
• input 標準的なパディングを持つ、クリーンで最小限のテキストフィールド。
• hero 鮮やかなカラフルな抽象イラストを背景とした、中央揃えでエアリーな見出しセクション。

09

文体と禁止事項

• トーン フレンドリーで、プロフェッショナル、かつ歓迎的。
• 見出し 組織化とワークフローに関する、直接的でベネフィット指向のメッセージ。
• CTA 行動を促し、前向きにする表現（例：「無料で登録」「方法を確認」）。

• ダーク背景を使用しない — スクリーンショットは明るいホワイト（#FFFFFF）をメインキャンバスに採用。
• ハイコントラストのレッドやグリーンのアクセントを使用しない — スクリーンショットは明るいシアン（#00AFFA）をプライマリアクションカラーに採用。
• プライマリボタンに鋭い角を使用しない — スクリーンショットは角丸（半径3-5px）を採用。
• 重厚で幾何学的なサンセリフフォントを使用しない — スクリーンショットはより柔らかいヒューマニスト・サンセリフスタイルを採用。
• 要素を詰め込みすぎない — スクリーンショットは豊かなホワイトスペースと明確な縦方向のリズムを採用。
• 純黒のテキストを使用しない — スクリーンショットはプライマリテキストに柔らかいダークグレー（#404040）を採用。
• 避ける: 過度な専門用語
• 避ける: 攻撃的なマーケティング言語
• 避ける: 複雑または威圧的な指示

10

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

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

11

System Prompt

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