厳選・オープン・無料

Threads

テキストベースの会話に焦点を当て、クリーンなモノクロームインターフェースを持つミニマリスト・ソーシャルプラットフォーム。

01

デザイン DNA

ビジュアルノイズよりテキスト会話を優先する、クリーンで簡素化されたソーシャルフィード。

02

カラー

深度を出すための微妙なグレー、プライマリ要素にはブラック、カードやモーダルにはホワイトを使用するモノクロームパレット。

03

タイポグラフィ

system-ui

• display32px · 700
• body15px · 400
• caption13px · 400

プラットフォーム間で一貫したレンダリングのためにシステムフォントスタックを使用 · コンパクトなテキストブロックのためにタイトな行の高さを維持 · ユーザー名と強調にはウェイト600を使用

04

余白

4pxをベースグリッドとし、一貫したpaddingの倍数を維持

05

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

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

0px 0px 12px rgba(0,0,0,0.04)

06

レイアウト

左にナビゲーション、中央にフィード、右にサイドバーを配置した3カラムレイアウト

07

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

モーダル表示のための速いフェードトランジション · インタラクティブ要素のためのスムーズなカラートランジション

微妙なopacityまたはカラー変化 · マイクロトランジションによる即時レスポンス

08

コンポーネント

• button 黒背景に白テキストのピル型ボタン、または角丸のゴーストボタン
• card 18pxのボーダー-radiusと微妙なシャドウを持つ、モーダルやログインプロンプト用の白いカード
• chip ユーザー名とタグ用のピル型バッジ
• input 微妙なボーダーを持つミニマルな入力欄
• hero モーダルオーバーレイの中央に配置され、説明的なサブテキストを伴う太字の大きなテキスト

09

文体と禁止事項

• トーン フレンドリーで親しみやすい、会話調
• 見出し 直接的で行動を促す、太字ウェイトの使用
• CTA 強いコントラストを持つ明確な行動喚起

• 明るいアクセントカラーを使用しない — スクリーンショットはブラック、ホワイト、グレーのみのモノクロームパレットを示している
• 装飾的なフォントを使用しない — スクリーンショットはsystem-uiスタック全体を使用している
• 重いシャドウを使用しない — スクリーンショットは非常に微妙またはないボックスシャドウを示している
• 複雑なグラデーションを使用しない — スクリーンショットはフラットで単色の塗りつぶしを示している
• プライマリ要素に鋭い角を使用しない — スクリーンショットはカードに18px、ボタンに999pxの半径を示している
• 小さなタッチターゲットを使用しない — スクリーンショットはインタラクティブ要素に十分なpaddingを示している
• 避ける: 企業用語
• 避ける: 密度の高い段落
• 避ける: 装飾的な言葉

10

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

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

11

System Prompt

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