厳選・オープン・無料

Robin Noguier

大胆なタイポグラフィとダイナミックな画像レイアウトで、クリエイティブプロジェクトを洗練して見せるポートフォリオ。

01

デザイン DNA

クリエイティブワークのキュレーションされたギャラリー

02

カラー

洗練された落ち着いた青のパレットが、高コントラストの白いテキストと鮮やかな写真コンテンツの落ち着いた背景を提供します。

03

タイポグラフィ

didone-serif · geometric-sans

• display135px · 400
• body16px · 400
• label14px · 700

ナビゲーションとアクションラベルには、大文字と広い字間を使用する · 高コントラストのディスプレイセリフと、クリーンなジオメトリックサンセリフを組み合わせる · 本文テキストは、暗い背景に対して軽く、読みやすく保つ

04

余白

一貫した 4px の基本単位が縦横のリズムを駆動し、コンテンツの周囲にゆとりのあるパディングが確保されています。

05

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

画像要素に細い白いボーダー

0 4px 24px rgba(0, 0, 0, 0.15)

06

レイアウト

片側に大きなタイポグラフィ、もう片側にダイナミックな画像を配置した非対称分割レイアウト。モバイルでは積み重ね型レイアウトに変化。

07

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

パララックス効果のための、スクロールベースのスムーズな変換 · インタラクティブ要素の控えめなホバートランジション

インタラクティブ要素における、控えめなカーソルの変化と潜在的な不透明度の変動 · ケーススタディの詳細への直接ナビゲーション

08

コンポーネント

• button ゆとりのある水平パディングと右向き矢印アイコンを持つ、大文字のテキストボタン
• card わずかに回転した白いボーダー付きのダイナミックな画像カード
• hero 大胆なタイポグラフィによる導入と、ダイナミックに回転した画像の組み合わせ

09

文体と禁止事項

• トーン 自信に満ち、ミニマルでプロフェッショナル
• 見出し インパクトに焦点を当てた、大きくエレガントなセリフ字体
• CTA 明確で、大文字の、行動を促すスタイル

• メインコンテナに角丸を使用しない — スクリーンショットでは四角い画像フレームが示されている
• 多くのガターを持つ複雑なグリッドを使用しない — スクリーンショットではクリーンでフレキシブルなレイアウトが示されている
• 明るく彩度の高いアクセントカラーを使用しない — スクリーンショットは白と落ち着いた青に依存している
• ナビゲーションに小文字を使用しない — スクリーンショットでは「ABOUT」が大文字で示されている
• すべての要素に重いドロップシャドウを使用しない — スクリーンショットでは最小限の柔らかいシャドウが示されている
• 遊び心のある角丸サンセリフを使用しない — スクリーンショットでは構造化されたジオメトリックサンセリフが使用されている
• 避ける: ごちゃごちゃしたレイアウト
• 避ける: 過度に複雑なカラースキーム
• 避ける: 密集したテキストブロック

10

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

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

11

System Prompt

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