厳選・オープン・無料

10Xdesigners

デザイナーがリソースを共有・発見するための、コントラストが高く、タイポグラフィ主導のハブです。

01

デザイン DNA

デザイナー向けのツールやアセットを扱う、ハイエンドでミニマルなギャラリーです。

02

カラー

厳格な白黒をベースに、高彩度の赤をアクセントとして一つだけ使用し、鮮明でコントラストの高いミニマリズムを追求しています。

03

タイポグラフィ

grotesque-sans

• display300px · 400
• heading32px · 400
• body18px · 400
• small13px · 400

巨大なディスプレイテキストには、視覚的な一体感を保つため、極めて詰めた文字間隔（-12px）を使用します。 · デザインをクリーンかつ均一に保つため、すべての要素で統一された通常のフォントウェイト（400）を維持します。

04

余白

厳格な4pxのベースライングリッドを採用し、要素間には意図的なゆとりのある余白を設けています。

05

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

1px solid rgba(148, 148, 148, 0.3)を、区切り線や入力フィールドの状態表示に控えめに使用します。

なし

06

レイアウト

巨大なタイポグラフィを持つフルワイドのヒーローから始まり、その先に構造化されたグリッドベースのコンテンツエリアが続きます。

07

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

UIの状態変化に対する、スムーズでリニアな表示遷移。 · インタラクティブ要素に対する繊細なhover効果。

インタラクティブ性を示すための、繊細な色の変化や透明度の変更。 · 複雑なアニメーションを用いず、即座に反応するフィードバック。

08

コンポーネント

• button 高コントラストな色とクリーンなタイポグラフィを持つ、ピル型のプライマリアクションボタンです。
• card 明確なタイポグラフィと繊細なボーダーで、コンテンツに焦点を当てたミニマルなカードです。
• chip 明確なアクティブ／インアクティブ状態を持つ、ラジオ型の選択チップです。
• input 角丸のボーダーとスムーズなfocus遷移を持つ、クリーンなテキスト入力フィールドです。
• hero 巨大なタイポグラフィのステートメントで支配的な、フルスクリーンの没入型ヒーローセクションです。

09

文体と禁止事項

• トーン 直接的で、自信に満ちたプロフェッショナルな口調。デザインに精通したオーディエンスを対象としています。
• 見出し 大胆で巨大、かつタイポグラフィ表現が豊か。頻繁に詰め込まれた文字間隔を使用します。
• CTA 明確でアクションを促す、視覚的にも際立つスタイル。ユーザーを次のステップへと導きます。

• フォントウェイトを幅広く使い分けてはいけません — スクリーンショットではウェイト400のみが使用されています。
• アクセントカラーを複数使用してはいけません — スクリーンショットでは赤（#FF1841）のみがアクセントとして使用されています。
• 柔らかく、くすんだ背景色を使用してはいけません — スクリーンショットでは鮮明な純黒の背景が使用されています。
• 詰まった、密集した余白を使用してはいけません — スクリーンショットではゆとりのある余白と大きなタイポグラフィスケールが使用されています。
• 複雑で装飾的なUI要素を使用してはいけません — スクリーンショットではクリーンでミニマルなコンポーネントが使用されています。
• 重いドロップシャドウや3D効果を使用してはいけません — スクリーンショットではフラットで高コントラストなサーフェスが使用されています。
• 避ける: 装飾過多なフォントや、色使いが多すぎるパレットは避けてください。
• 避ける: 密集した段落は避け、ゆとりのある余白と明確な階層構造を使用してください。
• 避ける: コアコンテンツから注意をそらす複雑なアニメーションは避けてください。

10

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

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

11

System Prompt

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