厳選・オープン・無料
Tparkes
ブランドとウェブサイトの仕事を紹介するパーソナルデジタルデザインリードのポートフォリオ。
PortfolioStudioCleanBold TypographyRestraint
01
デザイン DNA
デジタルデザインリードポートフォリオTom Parkesロンドン
大胆で表現力豊かなタイポグラフィを備えた、クリーンでプロフェッショナルなデジタルポートフォリオ。
02
カラー
#333333Ink
#FFFFFFBG
#A7A7A7Muted
rgba(51, 51, 51, 1)Line
カラーアクセントではなく、タイポグラフィのスケールに依存する高コントラストのモノクロームパレット。
03
タイポグラフィ
sans-serif
04
余白
4px
8px
16px
20px
24px
32px
48px
120px
豊かなホワイトスペースとパディングが、大スケールのタイポグラフィを強調。
05
サーフェス (角丸 / 影 / 罫線)
sm · 8px
md · 12px
lg · 16px
pill · 999px
プライマリテキストカラーを使用した微細なボーダー。カードやUI要素によく使用。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
左揃えテキストとトップナビゲーションバーを備えたフル幅ヒーローセクション。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
プロジェクトカードのスクロールトリガードリビール
インタラクティブ要素上の微細な透明度変化またはカーソルポインター変化。 · 直接ナビゲーションまたはプロジェクトセクションへの滑らかなスクロール。
08
コンポーネント
- button 最小限のテキストリンクまたはアイコンベースのボタン（例：ハンバーガーメニュー、「Explore my work」）。
- card 角丸の大型フル幅画像/動画カード。
- hero インライングラフィックアイコンと大型モノクローム画像を伴う、支配的なタイポグラフィステートメント。
09
文体と禁止事項
- トーン プロフェッショナルで自信に満ち、直接的。
- 見出し ミュートグレーとブラックアイコンを使用した、大型の太字サンセリフステートメント。
- CTA 「Explore my work」のようなシンプルで控えめなテキストリンク。
- カラフルなグラデーションを使用しない — スクリーンショットは厳格なモノクロームパレットを示しています。
- セリフフォントを使用しない — タイポグラフィは厳密にサンセリフです。
- ナビゲーションを隠さない — ハンバーガーメニューはモバイルで顕著です。
- 小さく詰まったテキストを使用しない — ヒーロータイプは巨大（86px）です。
- 賑やかな背景を使用しない — 背景はクリーンな白です。
- 重いシャドウを使用しない — サーフェスはフラットでクリーンです。
- 避ける: 派手なカラーの回避
- 避ける: 過度な装飾
- 避ける: 複雑すぎるナビゲーション
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはクリーンでモノクロームの美学を持つパーソナルデジタルデザインポートフォリオです。大胆なステートメントには大型のサンセリフディスプレイフォント（86px）を使用し、小さくコントラストの高いブラックアイコンでアクセントを加えています。プライマリカラーは、背景の白（#FFFFFF）、インクのダークグレー（#333333）、ミュート要素のライトグレー（#A7A7A7）です。主要な16進数カラーには#333333、#A7A7A7、#FFFFFFが含まれます。重要な制約：カラフルなアクセント、セリフフォント、複雑なUIパターンは絶対に使用しない。レイアウトはゆとりがあり、豊かなホワイトスペースと単一カラムコンテナに依存。ナビゲーションは最小限で、作品ショーケースに焦点を当てる。
en · zh-CN · zh-TW · ja · ko