厳選・オープン・無料

Bastienallard

シニア・アートディレクターのためのミニマルな個人ポートフォリオ。モノクロームのパレットと強いタイポグラフィの存在感が特徴。

01

デザイン DNA

デジタルデザインの専門性を示すために設計された、クリーンで高コントラストのエディトリアル・レイアウト。

02

カラー

アクセントカラーを一切使わない極端な高コントラストのモノクローム。視覚的な階層構築にはタイポグラフィと写真に依存。

03

タイポグラフィ

geometric-sans · monospace

• display56px · 540
• body16px · 540

すべてのUIテキストにDiatype Variableを使用 · 見出しはタイトな字間を維持 · システムフォントはフォールバックのみに使用

04

余白

厳格な4pxのベースライン・グリッドに基づく、豊かなホワイトスペース。

05

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

区切りにはrgba(0,0,0,0.8)の控えめな1pxボーダーを使用。

06

レイアウト

ワイドで広々としたメインコンテンツエリアを持つ、クリーンな3カラムフッターレイアウト。

07

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

すべてのインタラクティブ要素へのスムーズなトランジション · hover時の控えめなカーソル変化

リンクへの控えめな透明度の変化やカラーリバーサル。 · 重いアニメーションなしの即座のフィードバック。

08

コンポーネント

• button 背景塗りのない、ミニマルなテキストベースのボタン。
• card 画像を多用し、控えめなタイポグラフィをオーバーレイしたプロジェクトカード。
• chip 分類用のシンプルなテキストタグ。
• input クリーンでボーダーレスなテキスト入力。
• hero エディトリアルな写真と組み合わせた、-largeでインパクトのあるタイポグラフィ。

09

文体と禁止事項

• トーン プロフェッショナルで、自信に満ち、控えめ。
• 見出し 太字で直接的、非常に読みやすい。
• CTA 叫ぶのではなく導く、控えめなテキストリンク。

• ダークモードを使用しない — スクリーンショットは純白の背景を示している。
• 明るいアクセントカラーを追加しない — パレットは厳格にモノクローム。
• 装飾的なセリフフォントを使用しない — スクリーンショットはジオメトリックなサンセリフを全編にわたり使用。
• 重いドロップシャドウを追加しない — サーフェスはフラットで、奥行きにはボーダーやタイポグラフィに依存。
• 多くのカラーでUIを雑踏させない — 厳格なブラック、ホワイト、グレーのパレットを使用。
• すべてに角丸を使用しない — デザインはシャープでアーキテクチャラル。
• 避ける: 過度な装飾
• 避ける: 派手なカラー
• 避ける: 複雑なアニメーション

10

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

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

11

System Prompt

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