厳選・オープン・無料

Aristide Benoist

極端なタイポグラフィースケールと写真グリッドを持つ、暗色でモーション重視の開発者ポートフォリオ。

01

デザイン DNA

暗いギャラリーに映画のフィルムリールが流れるように、ビジュアルな技術を紹介しています。

02

カラー

ライトセージインクをプライマリに使用した、深みのあるモノクロ暗色モードと、時折のゴールデンなアクセント。

03

タイポグラフィ

slab-serif · grotesque-sans · monospaced

• display337px · 400
• h1257px · 400
• body16px · 400
• caption10px · 400

04

余白

4px incrementsの明確なリズムで、ナビゲーションとコンタクトエリアには適切なpaddingを確保しています。

05

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

全体的にハードエッジのボーダーと鋭い角が使用され、'ABOUT'リンクには目立つ1pxのボトムボーダーが配置されています。

06

レイアウト

中央揃えの垂直画像の水平カルーセルと固定されたナビゲーション要素を備えた、フルスクリーンの暗色キャンバス。

07

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

インタラクティブな要素における滑らかな色と背景のトランジション

0.5秒のcubic-bezierトランジションによる、繊細な色の変化。 · 視覚的なアクティブ状態なしで、即座にナビゲーションします。

08

コンポーネント

• button 鋭く大文字のスタイルとオプションの矢印インジケーターを持つ、テキストベースのリンク。
• card 水平スクロールコンテナに配置された、垂直の写真カード。
• hero 水平スクロールの白黒写真グリッドを特徴とする、没入感のあるフルスクリーン暗色エリア。

09

文体と禁止事項

• トーン ミニマルで、洗練され、プロフェッショナル。
• 見出し Tight negative trackingを備えた、大文字で巨大な、高インパクトのディスプレイタイポグラフィ。
• CTA 控えめな大文字のテキストリンクで、多くの場合シンプルな下線または矢印を伴います。

• ソフトなドロップシャドウを使用しない — スクリーンショットは完全にフラットでハードエッジのデザインを示しています。
• 角丸を使用しない — スクリーンショットはすべての要素に鋭い0pxの角を示しています。
• 多様な色を使用しない — スクリーンショットは暗色背景とセージインクという制限されたパレットを示しています。
• 小さく控えめなディスプレイテキストを使用しない — スクリーンショットはビューポートを支配する巨大なタイポグラフィを示しています。
• 雑然とした背景パターンを使用しない — スクリーンショットは固体の暗色塗りつぶしと写真コンテンツを示しています。
• 過度に複雑なナビゲーションを使用しない — スクリーンショットはシンプルな下線を持つ最小限の'ABOUT'リンクを示しています。
• 避ける: 装飾的なアイコンを避ける
• 避ける: 不要なボーダーを避ける
• 避ける: 複数の背景色を避ける

10

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

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

11

System Prompt

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