厳選・オープン・無料
Egstad
グラフィックデザイナーおよびウェブ開発者による、大胆で表現力豊かな個人ポートフォリオ。
PortfolioBold TypographyStudioCleanRestraint
01
デザイン DNA
グラフィックデザインウェブ開発表現力豊か持続的遊び心
大胆なタイポグラフィの主張と遊び心のあるインタラクティブ要素を持つ、グラフィックデザイナーの個人ポートフォリオ。
02
カラー
#252422Ink
#e2e0d9BG
#808080Muted
rgba(37, 36, 34, 1)Line
温かみのあるオフホワイトの背景を持つ、高コントラストのモノクローム。
03
タイポグラフィ
grotesque-sans · humanist-sans · monospace
- display
398px · 400 - body-lg
58px · 400 - body
16px · 400
主要ブランド名には極端なスケールを使用し、bold なビジュアルステートメントを創出。 · ナビゲーションテキストは大文字で、広い tracking を使用。 · 本文はクリーンで読みやすいサンセリフスタイルを維持。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
bold なタイポグラフィが息づくための豊かな余白。ナビゲーションおよびフッター要素内ではより詰まった間隔を採用。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 36px
lg · 1440px
pill · 999px
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
レイアウト
1440container
12columns
24pxgutter
768 / 1024breakpoints
単一カラムのヒーローセクションに続き、バイオグラフィとフッターにはマルチカラムグリッドを採用。
07
モーションとインタラクション
200msmicro
400mssmall
750msmedium
cubic-bezier(0.375, 0.39, 0, 1.175)easing
インタラクティブ要素に対する、ゆっくりと滑らかなフェードインと色の変化。 · フローティング要素に対する、遊び心のある transform ベースの hover エフェクト。
インタラクティブ要素に対する微妙な色の変化と transform ベースの動き。 · 背景およびボーダー色のスムーズなトランジション。
08
コンポーネント
- button ダークな背景に白いテキストを持つピル形状。hover トランジション付き。
- card 提供されたビューでは主要に使用されていない。
- chip 提供されたビューでは主要に使用されていない。
- input 提供されたビューでは主要に使用されていない。
- hero インタラクティブで、オーバーラップする 3D 風のフローティング要素を持つ、巨大なフルワイドタイポグラフィヒーロー。
09
文体と禁止事項
- トーン 自信に満ち、パーソナルで、少し遊び心がある。
- 見出し ビジュアルフィールドを支配する、極めて bold で大規模なタイポグラフィ。
- CTA 直接的でシンプル、ピル形状のボタンで提示。
- 小さく控えめな見出しを使わない — スクリーンショットでは、画面一杯の巨大なタイポグラフィステートメントが示されている。
- 複雑で鮮やかなカラーパレットを使わない — スクリーンショットでは、厳格に抑制されたモノクロームおよびオフホワイトの配色が示されている。
- インタラクティブ要素に鋭い四角の角を使わない — スクリーンショットでは、高い border-radius を持つ目立つピル形状のボタンが示されている。
- ディスプレイに汎用的なシステムフォントを使わない — スクリーンショットでは、カスタムで highly stylized な grotesque-sans-serif が示されている。
- 余白を避けない — スクリーンショットでは、すべてのコンテンツブロックの周りに豊かな margins と padding が示されている。
- 散らかって雑然としたレイアウトを使わない — スクリーンショットでは、クリーンでフォーカスされた単一カラムおよびマルチカラムのグリッド構造が示されている。
- 避ける: フォーマルな企業言語
- 避ける: 小さく控えめな見出し
- 避ける: 複雑なカラーパレット
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはグラフィックデザイナーおよびウェブ開発者の個人ポートフォリオです。極端なタイポグラフィのスケールと抑制されたカラーパレットが特徴です。主要な色は、温かみのあるオフホワイトの背景(#e2e0d9)と準黒のテキスト(#252422)です。プライマリフォントはカスタム grotesque-sans-serif で、セカンダリとして本文に humanist-sans-serif を使用。重要な注意点:小さく控えめな見出しを使わない — 画面一杯の巨大なタイプを使用。複雑なカラーパレットを使わない — 厳格なモノクロームに留める。ボタンに鋭い角を使わない — highly rounded なピル形状を使用。
en · zh-CN · zh-TW · ja · ko