厳選・オープン・無料

Def Studio

ダークで雰囲気のある製品写真の上に、大規模なタイポグラフィを配置したデザインスタジオのポートフォリオ。

01

デザイン DNA

大胆なタイポグラフィと高コントラストビジュアルでクリエイティブワークを紹介する、ミニマルなデジタルポートフォリオ。

02

カラー

純黒背景と白/薄グレー文字による、最大限の可読性を実現する厳格な高コントラストモノクロームパレット。

03

タイポグラフィ

humanist-sans

• display96px · 300
• heading25px · 300
• body16px · 400

ディスプレイおよびナビゲーションテキストには、エレガンスを保つためのライトウェイト (300) を使用。 · テキスト階層は、ウェイトの変化よりも極端なサイズ差によって確立される。 · ナビゲーションアイテムは、セクション見出しと同じタイポグラフィを、より小さなスケールで使用。

04

余白

100px 30px 60px 30px のような特定の padding 値で駆動する、豊かで非対称な間隔。

05

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

最小限のボーダー使用。主にナビゲーション要素のテキストボーダー。

06

レイアウト

フル幅のダーク背景に、大きな左揃えのタイポグラフィオーバーレイ。

07

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

top と opacity プロパティに広く適用される0.5秒の遷移。 · エレメントの可視性変化に使用されるフェードイン/アウト。

ポインターカーソルがインタラクティブ要素を示し、おそらく微細な opacity やカラーの変化を伴う。 · ポートフォリオセクションまたは外部リンクへの直接ナビゲーション。

08

コンポーネント

• button 背景フィルなし、カーソル pointer のテキストのみのボタン。
• card 下にテキストラベルを備えた、画像ベースのポートフォリオカード。ボーダーや背景コンテナなし。
• hero 大規模な左揃えテキストナビゲーションを備えた、フルスクリーンダークな雰囲気の画像。

09

文体と禁止事項

• トーン 自信に満ち、ミニマルでプロフェッショナル。
• 見出し 小文字、巨大なスケール、ライトウェイト、サンセリフ。
• CTA ナビゲーションまたはインラインテキストに統合された、シンプルなテキストベースリンク。

• 角丸を使用しない — スクリーンショットではすべてのカードとエレメントが鋭いエッジを示している
• ドロップシャドウを追加しない — スクリーンショットでは完全にフラットでボーダレスなサーフェスを示している
• マルチカラムテキストレイアウトを使用しない — スクリーンショットでは左揃えの広いタイポグラフィを示している
• 重いフォントウェイトを適用しない — スクリーンショットでは主にライト (300) とレギュラー (400) のウェイトを示している
• 装飾パターンを使用しない — スクリーンショットではソリッドカラーと写真の背景を示している
• センタリングされたテキスト配置を使用しない — スクリーンショットではナビゲーションと見出しへの強力な左揃えを示している
• 避ける: 過度な装飾要素
• 避ける: 高彩度のアクセントカラー
• 避ける: 密集したテキストブロック

10

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

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

11

System Prompt

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