厳選・オープン・無料

Oudolf

ランドスケープアーキテクト、ピート・ウードルフのためのミニマルなポートフォリオサイト。庭園の画像で満たされたタイポグラフィックリンクを特徴とする。

01

デザイン DNA

ランドスケープアーキテクチャプロジェクトのキュレーションされたポートフォリオ。

02

カラー

写真をフィルとしたモノクロのグレースケール

03

タイポグラフィ

geometric-sans · humanist-sans

• display60px · 300
• body15px · 400
• caption12px · 400

04

余白

4pxを基本単位とした、ゆとりある垂直リズム

05

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

インタラクティブ要素には、なし、または控えめなボトムボーダー

06

レイアウト

幅広のパディングを備えたシングルカラムレイアウト

07

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

スクロール時のフェードイン · 滑らかな不透明度のトランジション

テキスト内部に画像背景が表示される · プロジェクトページへナビゲート

08

コンポーネント

• button ボトムボーダーのあるミニマルなテキストリンク
• card 背景画像を備えたタイポグラフィックリストアイテム
• input 隠された検索フィールド
• hero 写真をフィルとしたプロジェクトのタイポグラフィックリスト

09

文体と禁止事項

• トーン 静謐で、洗練され、プロフェッショナル
• 見出し ミニマルな、小文字のナビゲーション
• CTA 控えめな、テキストベースの

• 明るいアクセントカラーを使用しない — スクリーンショットはモノクロのグレーパレットを示している
• 重いボーダーまたはシャドウを使用しない — スクリーンショットはフラットでボーダレスなサーフェスを示している
• 装飾的なアイコンを使用しない — スクリーンショットはシンプルな矢印と検索アイコンのみを示している
• 複雑なレイアウトを使用しない — スクリーンショットはゆとりあるシングルカラムレイアウトを示している
• 太字のタイポグラフィを使用しない — スクリーンショットは全体的に軽量のフォントを示している
• グラデーション背景を使用しない — スクリーンショットは白一色の背景を示している
• 避ける: 派手な色
• 避ける: 装飾的要素
• 避ける: 複雑なアニメーション

10

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

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

11

System Prompt

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