厳選・オープン・無料

Ueno

ミニマルでハイエンドな戦略的デザインおよびイノベーションスタジオ。

01

デザイン DNA

高級建築事務所のウェブサイト。

02

カラー

戦略的な写真を用いたハイコントラストのモノクローム。

03

タイポグラフィ

transitional-serif · humanist-sans

• display54px · 700
• body20px · 700
• caption16px · 700

見出しには、トラッキングを詰めたトランジショナルセリフを使用。 · 本文およびUIテキストには、太字のヒューマニストサンセリフを使用。

04

余白

セクション間の、寛大な垂直パディングとスペーシング。

05

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

最小限。通常は区切り線として1pxのsolid blackまたはgray。

なし

06

レイアウト

明確なタイポグラフィ階層を持つ、広々とした寛大なホワイトスペース。

07

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

コンテンツ読み込み時の不透明度フェード。 · エンターアニメーション用のトランスフォームスライド。

インタラクティブ要素への繊細な不透明度の変化。 · 標準のポインタインタラクション。

08

コンポーネント

• button 装飾を最小限に抑えたシンプルなテキストリンク。
• card ミニマルなカード。大型のビジュアルに依存することが多い。
• chip 存在しません。
• input ビュー内には存在しません。
• hero フルブリード画像の上に配置された、左揃えの大型セリフ見出し。

09

文体と禁止事項

• トーン プロフェッショナルで、自信があり、率直。
• 見出し 会話的でありながら権威のあるセリフ見出し。
• CTA 控えめなテキストリンク。

• 明るいプライマリカラーを使用しない — スクリーンショットは厳格なモノクロームパレットを示しています。
• 角丸を使用しない — スクリーンショットは鋭角で長方形の要素を示しています。
• 装飾的なスクリプトを使用しない — スクリーンショットは表示用のクリーンなトランジショナルセリフを示しています。
• 全テキストを中央揃えにしない — スクリーンショットは強い左揃えを示しています。
• 重いドロップシャドウを使用しない — スクリーンショットはフラットなサーフェスレベルデザインを示しています。
• 低コントラストのテキストを使用しない — スクリーンショットは白地に黒のハイコントラストを示しています。
• 避ける: トリック
• 避ける: 過度な装飾
• 避ける: 派手なカラーアクセント

10

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

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

11

System Prompt

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