厳選・オープン・無料

Egstad

グラフィックデザイナーおよびウェブ開発者による、大胆で表現力豊かな個人ポートフォリオ。

01

デザイン DNA

大胆なタイポグラフィの主張と遊び心のあるインタラクティブ要素を持つ、グラフィックデザイナーの個人ポートフォリオ。

02

カラー

温かみのあるオフホワイトの背景を持つ、高コントラストのモノクローム。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

• display398px · 400
• body-lg58px · 400
• body16px · 400

主要ブランド名には極端なスケールを使用し、bold なビジュアルステートメントを創出。 · ナビゲーションテキストは大文字で、広い tracking を使用。 · 本文はクリーンで読みやすいサンセリフスタイルを維持。

04

余白

bold なタイポグラフィが息づくための豊かな余白。ナビゲーションおよびフッター要素内ではより詰まった間隔を採用。

05

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

1px solid rgba(37, 36, 34, 1)

rgba(0, 0, 0, 0.063) 0px 1.3px 5.3px 0px · rgba(0, 0, 0, 0.09) 0px 4.5px 17.9px 0px · rgba(0, 0, 0, 0.15) 0px 20px 80px 0px

06

レイアウト

単一カラムのヒーローセクションに続き、バイオグラフィとフッターにはマルチカラムグリッドを採用。

07

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

インタラクティブ要素に対する、ゆっくりと滑らかなフェードインと色の変化。 · フローティング要素に対する、遊び心のある transform ベースの hover エフェクト。

インタラクティブ要素に対する微妙な色の変化と transform ベースの動き。 · 背景およびボーダー色のスムーズなトランジション。

08

コンポーネント

• button ダークな背景に白いテキストを持つピル形状。hover トランジション付き。
• card 提供されたビューでは主要に使用されていない。
• chip 提供されたビューでは主要に使用されていない。
• input 提供されたビューでは主要に使用されていない。
• hero インタラクティブで、オーバーラップする 3D 風のフローティング要素を持つ、巨大なフルワイドタイポグラフィヒーロー。

09

文体と禁止事項

• トーン 自信に満ち、パーソナルで、少し遊び心がある。
• 見出し ビジュアルフィールドを支配する、極めて bold で大規模なタイポグラフィ。
• CTA 直接的でシンプル、ピル形状のボタンで提示。

• 小さく控えめな見出しを使わない — スクリーンショットでは、画面一杯の巨大なタイポグラフィステートメントが示されている。
• 複雑で鮮やかなカラーパレットを使わない — スクリーンショットでは、厳格に抑制されたモノクロームおよびオフホワイトの配色が示されている。
• インタラクティブ要素に鋭い四角の角を使わない — スクリーンショットでは、高い border-radius を持つ目立つピル形状のボタンが示されている。
• ディスプレイに汎用的なシステムフォントを使わない — スクリーンショットでは、カスタムで highly stylized な grotesque-sans-serif が示されている。
• 余白を避けない — スクリーンショットでは、すべてのコンテンツブロックの周りに豊かな margins と padding が示されている。
• 散らかって雑然としたレイアウトを使わない — スクリーンショットでは、クリーンでフォーカスされた単一カラムおよびマルチカラムのグリッド構造が示されている。
• 避ける: フォーマルな企業言語
• 避ける: 小さく控えめな見出し
• 避ける: 複雑なカラーパレット

10

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

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

11

System Prompt

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