厳選・オープン・無料

Benlongdendesign

鮮烈なタイポグラフィと没入感のある写真作品のバランスをとる、クリエイティブディレクターのための洗練されたエディトリアルポートフォリオ。

01

デザイン DNA

ハイエンドな作品を紹介する、限定的なギャラリーやキュレーションされた雑誌の特集ページ

02

カラー

写真作品を際立たせるために、黒、白、グレーに依存した、鮮烈でハイコントラストのミニマリズム。

03

タイポグラフィ

grotesque-sans · monospace

• display16px · 700

すべてのUIと本文テキストに grotesque-sans を使用 · セクション見出しに大文字と狭い文字間隔を適用 · 装飾的な要素を排除した厳格なタイポグラフィ階層を維持

04

余白

セクション間を適度に確保した余白と、リスト項目間の tight な 8px ギャップ

05

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

hover時の微細な1pxボーダーまたは背景オーバーレイ

06

レイアウト

大規模な写真イメージがビューポートを支配し、構造化された複数カラムのテキストリストと対比する、フルワイドで没入感のあるグリッド。

07

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

インタラクティブ要素のhover時の微細な不透明度と色の遷移

微細なテキストの色の変化と不透明度の変更 · 即座のナビゲーションまたは状態の変更

08

コンポーネント

• button フォーム付きボタン形状ではなく、微細なhover遷移を持つテキストベースリンク
• card プロジェクトを表す、フルブリードまたは大規模な写真ブロック
• chip カテゴリ用の最小限の大文字テキストラベル
• input N/A
• hero プロジェクションタイトルとクレジットがオーバーレイされた、没入感のある写真背景

09

文体と禁止事項

• トーン プロフェッショナル、控えめ、自信に満ちた
• 見出し 直截的で大文字の、クリエイティブな役割を描写する
• CTA 連絡先とナビゲーションのためのシンプルなテキストリンク

• 装飾的なスクリプトフォントを使用しない — スクリーンショットはクリーンな grotesque-sans システムフォントを示している
• コンテナにドロップシャドウを追加しない — スクリーンショットはフラットな表面と写真オーバーレイを示している
• 明るく彩度の高いアクセントカラーを使用しない — スクリーンショットは完全にモノクロームパレットに依存している
• 密集したグリッドでレイアウトを散らかさない — スクリーンショットは適度な余白と大きなイメージを使用している
• プロジェクトプレビューに角丸カードを使用しない — スクリーンショットはシャープでフルブリードのエッジを示している
• UI要素に太い border-radius を使用しない — スクリーンショットはアイコンにのみ最小限の 50% radius を使用している
• 避ける: 明るく彩度の高い色やネオンアクセントを避ける
• 避ける: 複雑なアニメーションや散らつきのある動きを避ける
• 避ける: 装飾的なタイポグラフィやスクリプトフォントを避ける

10

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

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

11

System Prompt

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