厳選・オープン・無料

Sprout Place

友達とバーチャルハングアウトスペースを作成するための、温かみのある遊び心あふれるプラットフォーム。

01

デザイン DNA

友達のための、遊び心あふれる親しみやすいデジタルハングアウトスペース。

02

カラー

マスタードイエローとダークバーガンディを基調とした、温かみのあるハイコントラストのアーストーン。

03

タイポグラフィ

didone-serif · humanist-sans

• display104px · 400
• headline24px · 400
• body16px · 400

ディスプレイ見出しには、狭めのトラッキングを持つハイコントラストなディドンセリフを使用。 · 本文にはクリーンなヒューマニストサンセリフを使用。 · ナビゲーションと補助テキストには、より小さいサンセリフのウェイトを使用。

04

余白

8pxベースグリッド。セクション間には豊かな垂直余白（96px）を確保。

05

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

1px solid rgba(62,8,8,1.0)

rgba(0, 0, 0, 0.2) 0px 4px 10px 0px

06

レイアウト

フル幅セクションにセンタリングされたコンテンツコンテナを配置し、垂直方向にゆったりとしたパディングを設定。

07

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

スクロール時の透明度遷移（0.75秒リニア）。 · インタラクティブ要素のスムーズなホバーステート（0.25秒リニア）。

インタラクティブ要素上でカーソルがポインタに変化。 · 控えめな透明度や色の変化。

08

コンポーネント

• button ダークバーガンディのピル-shapedボタン。ホワイトテキストとホバー遷移を実装。
• card インターフェースモックアップやユーザーアバターを表示する、角丸（15px）コンテナ。
• chip ユーザーネーム（例：'May-Li', 'Julius'）を表示する小さなピル-shapedタグ。
• input 控えめなボーダーと角丸を持つ、明るい背景の入力フィールド。
• hero ソリッド背景の上に配置された大きなセンタリングテキストと、フローティングするアバターエレメント。

09

文体と禁止事項

• トーン 親しみやすく、カジュアルで、遊び心がある。
• 見出し 太字で短く、 Evocativeな印象（例：'Your space, Your call'）。
• CTA 直接的で利益を重視（例：'Get Sprout for free'）。

• クールで無機質なカラーパレットは使用しない — スクリーンショットでは温かみのある支配的なマスタードイエロー（#F3D468）とダークバーガンディ（#3E0808）が示されています。
• ヘッドラインに純粋なジオメトリックサンセリフを使用しない — スクリーンショットではディスプレイテキストにハイコントラストなディドンセリフが使用されています。
• 狭く詰まったスペーシングは使用しない — スクリーンショットでは豊かなパディング（96px）とセクション間の明確な視覚的区切りが示されています。
• プライマリコンテナにシャープで角が0pxの角を使用しない — スクリーンショットでは一貫して角丸（15px以上）が使用されています。
• フラットでグレースケールのインターフェースは使用しない — スクリーンショットではカラフルなアクセントを持つ、鮮やかでハイコントラストな温色パレットが示されています。
• 密度が高く、段落が重くなったレイアウトは使用しない — スクリーンショットでは短く有力なヘッドラインと最小限の本文テキストが示されています。
• 避ける: フォーマルなコーポレート言語
• 避ける: 過度にテクニカルな専門用語
• 避ける: 密度の高いテキストブロック

10

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

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

11

System Prompt

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