厳選・オープン・無料

Xn Smon Vpa

大胆なタイポグラフィと柔らかいカラーアクセントを通じて、コンピュテーショナルデザインを紹介するミニマリストなスタジオポートフォリオ。

01

デザイン DNA

無垢の白いギャラリーウォールに並べられた、デジタルアーティファクトのキュレーションされた展示会。

02

カラー

白地の高コントラストな黒を基調とし、柔らかいパステル色と控えめなウォームカラーのアクセントを配置。

03

タイポグラフィ

humanist-sans

• display172px · 400
• heading66px · 400
• body31px · 400

すべてのプライマリディスプレイおよび本文テキストにTex Gyre Herosを使用します。 · セリフ体はブランドマークにのみ使用します。 · 大きなディスプレイサイズでは、タイトなネガティブレタースペーシングを維持します。

04

余白

一貫した4pxのベーススケールと、セクション間の広めのホワイトスペース。

05

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

リスト項目を区切る最小限の2px上ボーダーのみを適用。

06

レイアウト

ポートフォリオリストの行を区切る明確な上ボーダーを持つ、フル幅セクション。

07

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

インタラクティブ要素上の滑らかな0.2秒のカラー遷移 · クリック時の微細な0.1秒のトランスフォームシフト · コンテンツ展開時の0.5秒の高さアニメーション

テキスト要素上の0.2秒のカラー遷移。 · 微細な0.1秒のトランスフォームスケール効果。

08

コンポーネント

• button 完全な丸み付きコーナー（999px radius）を持つ、大きなピル型インタラクティブエリア。プライマリカテゴリートグルとして機能します。
• card インデックス、タイトル、年を列に含む、シンプルな上ボーダー付きリスト項目。
• hero 非常に大きなテキストを含む積層されたピル型要素をフィーチャーする、巨大なタイポグラフィのヒーローセクション。

09

文体と禁止事項

• トーン 洗練され、ミニマリストで、プロフェッショナル。
• 見出し 太字、タイトなトラッキング、小文字またはタイトルケース、極めて大きなスケール。
• CTA テキストは最小限に。従来のボタンスタイルではなく、大きなインタラクティブ面積に依存します。

• 強いボーダーを使用しない — スクリーンショットでは最小限の2px上ボーダーのみを確認できます。
• ドロップシャドウを使用しない — スクリーンショットでは完全にフラットな面を確認できます。
• 小さなボタンサイズを使用しない — スクリーンショットでは巨大なフル幅ピル形状を確認できます。
• センタリングされたナビゲーションを使用しない — スクリーンショットではサイト名が左揃え、リンクが右揃えであることを確認できます。
• 複雑なグリッドを使用しない — スクリーンショットでは厳格なシングルカラムのリニアリストを確認できます。
• 太字ウェイトを使用しない — スクリーンショットでは一様な400ウェイトのタイポグラフィを確認できます。
• 避ける: 雑然としたレイアウト
• 避ける: 重いシャドウ
• 避ける: 鮮やかなネオンカラー
• 避ける: 装飾的なアイコン

10

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

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

11

System Prompt

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