厳選・オープン・無料
Simonfosters Website
抑制された美学でプレミアムなケーススタディを紹介する、シニアプロダクトデザイナーのポートフォリオ
PortfolioCleanPremiumTypographyAgency
01
デザイン DNA
ポートフォリオシニアプロダクトデザイナーケーススタディクリーンプロフェッショナル
静かな自信と精確なタイポグラフィで提示される、厳選されたデザインワークのギャラリー
02
カラー
#393737Ink
#F6F7F6BG
rgba(57,55,55,0.5)Muted
rgb(57,55,55)Line
繊細なノイズテクスチャを持つニュートラルなウォームグレー。プロジェクトのイメージがすべてのカラーを担います。
03
タイポグラフィ
grotesque-sans · monospace
- display
61px · 400 - heading
55px · 400 - subhead
24px · 400 - body
16px · 400 - small
14px · 400
すべてのテキストで統一的にウェイト 400 を使用 · 大文字はラベルやタグに限定的に使用 · ディスプレイサイズではインパクトのためにタイトな行間を設定
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
セクション間に豊かな竖方向のスペーシング。一貫した 32px と 96px のギャップが呼吸するスペースを生み出します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 48px
ダークグレー（#393737）の 1px solid ボーダー。ボタンやタグには豊かなピル型の角丸を採用。
06
レイアウト
1280container
12columns
32pxgutter
768 / 1024breakpoints
豊かなパディングと中央揃えコンテンツを備えた、シングルカラムのポートフォリオレイアウト。
07
モーションとインタラクション
200msmicro
200mssmall
800msmedium
cubic-bezier(0.645, 0.045, 0.355, 1)easing
すべてのインタラクティブ要素に滑らかな 0.2s トランジション · すべてのトランジションで一貫した cubic-bezier イージングを採用
カスタム cubic-bezier イージングを用いた、0.2s 以内の繊細な不透明度またはカラーのトランジション。 · 23のインタラクティブ要素でポインターカーソルを表示する、標準的なクリック動作。
08
コンポーネント
- button 豊かなパディング（16px 32px）と 48px のボーダーラディウスを持つピル型アウトラインボタン。透明背景にダークなテキスト。
- card ノイズテクスチャ付きグラデーション背景と埋め込みブラウザスクリーンショットを備えた、フルワイズのプロジェクトショーケース。
- chip 分類用の、1px solid ボーダーとタイトなパディングを持つ、小さな大文字ラベルタグ。
- hero フルワイズのプロジェクトプレビューイメージの上に、年範囲、タグラベル、記述的なサブタイトルを備えた、大型タイポグラフィのプロジェクトタイトル。
09
文体と禁止事項
- トーン プロフェッショナルで控えめ、かつ派手さのない自信感。
- 見出し 年範囲を伴う、大型でクリーンな grotesque-sans タイトル。抑制されたエレガンスで提示。
- CTA ピル型アウトラインボタン内の、シンプルな大文字テキストラベル。
- 複数のフォントウェイトを使用しない — スクリーンショットでは全編にわたってウェイト 400 が統一されていること
- 装飾的なグラフィックやイラストを追加しない — スクリーンショットではタイポグラフィとプロジェクトイメージのみが使用されていること
- UIに明るいアクセントカラーを使用しない — スクリーンショットではニュートラルグレーが使われ、カラーはプロジェクトコンテンツのみから来ていること
- 複雑なマルチカラムレイアウトを作成しない — スクリーンショットではクリーンなシングルカラム中央揃えレイアウトであること
- カードや要素にドロップシャドウを追加しない — スクリーンショットでは完全にフラットで影のないサーフェスであること
- どこでもセリフフォントを使用しない — スクリーンショットではクリーンなラインを持つ grotesque-sans タイポグラフィのみが使用されていること
- ボタンに背景色を追加しない — スクリーンショットではアウトラインスタイルのピルボタンのみが使用されていること
- 避ける: 派手なカラー
- 避ける: 装飾的な要素
- 避ける: 複雑なアニメーション
- 避ける: 雑然としたレイアウト
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（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
これは、クリーンで控えめな美学を持つシニアプロダクトデザイナーのポートフォリオサイトです。デザインでは、ニュートラルなウォームグレー（#F6F7F6）背景に繊細なノイズテクスチャとダークチャコール（#393737）のタイポグラフィを使用しています。すべてのテキストは Neue Montreal（grotesque-sans カテゴリ）のウェイト 400 で統一され、一貫性と洗練された外観を生み出しています。プロジェクトタイトルは大型（55-61px）でタイトな行間を備えて表示されます。レイアウトはセクション間に豊かな 96px のスペーシングを持つシングルカラムです。ボタンはピル型で、48px のボーダーラディウスと 1px solid ボーダーを持ちます。アクセントカラーはUI自体には存在しません。カラーはプロジェクトのショーケースイメージのみから来ます。重要な禁止事項：複数のフォントウェイトは絶対に使用しない、シャドウを絶対に追加しない、装飾的なグラフィックを絶対に使用しない、パレットはニュートラルグレーに厳密に限定する。このサイトは、ビジュアルの複雑さよりもコンテンツの明瞭性と呼吸するスペースを優先します。
en · zh-CN · zh-TW · ja · ko