厳選・オープン・無料

Raindrop

クリエイティブ向けに設計され、コーダーのために構築されたオールインワンブックマークマネージャー

01

デザイン DNA

モダンウェブのためのデジタルファイルキャビネット

02

カラー

プライマリブルーアクセントと穏やかなダークテキストを持つクリーンな白色サーフェス

03

タイポグラフィ

system-ui · monospace

• display50px · 500
• h236px · 600
• body18px · 400
• small16px · 400

system-ui または Segoe UI を使用し、ネイティブでクリーンな外観を実現 · 見出しはタイトでクリーン、やや太字 · 白背景に対して高コントラストを維持し、可読性を確保

04

余白

ヒーローセクションにはゆったりとした垂直パディング（50px）、一貫した30pxの水平パディング

05

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

コンテナと入力欄には1px solid rgba(0,0,0,0.1)

0px 12px 24px rgba(0, 0, 0, 0.1) · 0px 2px 4px rgba(0, 0, 0, 0.1) · 0px 0px 0px 0.5px rgba(0, 0, 0, 0.15)

06

レイアウト

左側にコピー、右側に重なる製品スクリーンショットを持つ分割ヒーローレイアウト。視覚的な趣味のために有機的な背景 blobs を使用

07

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

ホバー状態のための滑らかな不透明度とトランスフォームトランジション · インタラクティブ要素の微細な背景色シフト

微細な背景色の変化や不透明度のシフト · 最小限のフィジカルフィードバック。状態変化に依存

08

コンポーネント

• button プライマリボタンは鮮やかな青で塗りつぶされ、小さな radius で角丸に。セカンダリボタンは透明なテキストリンク
• card コンテナとフィーチャーカードには柔らかなシャドウと軽いボーダー
• chip 柔らかな背景を持つ丸薬形タグ（例：「New: AI Assistant」のピル）
• input 微細なボーダーと4px radiusを持つクリーンで最小限の入力欄
• hero 左側に大きく太字のディスプレイテキスト、右側に多層的な製品スクリーンショット。白背景にカラフルな抽象的な有機シェイプを設定

09

文体と禁止事項

• トーン プロフェッショナルで、親切、かつ率直
• 見出し 短く、断定的、ベネフィット重視
• CTA 直接的でアクション重視（サインアップ、アプリをダウンロード）

• ダークモードをプライマリ背景として使用しない — スクリーンショットは主に白背景
• 刺激的なネオンアクセントを使用しない — スクリーンショットはクリーンで鮮やかな青（#0B7ED0）を使用
• 重厚で飾り気のあるセリフフォントを使用しない — スクリーンショットはクリーンでネイティブのシステムフォントを使用
• レイアウトを硬いボックス状にしない — スクリーンショットは有機的で柔らかい背景 blobs を採用
• ボーダーでインタフェースを clutter しない — スクリーンショットはホワイトスペースと微細なシャドウを使用
• ダークなプライマリテキスト色を使用しない — スクリーンショットはより柔らかく、やや刺激の弱いダークグレー（#1A1A1A）を使用
• 避ける: 過度にカジュアルなスラング
• 避ける: アグレッシブまたは誇張されたマーケティング言語
• 避ける: 文脈のない複雑な技術用語

10

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

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

11

System Prompt

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