厳選・オープン・無料
Ingmarcoenen
巨大なカスタムタイポグラフィとクリーンなミニマリズムに基づく、大胆なモノクロームポートフォリオサイト。
PortfolioStudioCleanTypographyPhotographic
01
デザイン DNA
大胆ミニマリスト実験的クリエイティブデジタル
極端なタイポグラフィースケールを持つハイコントラストなエディトリアルポートフォリオ
02
カラー
#000000Ink
#3a4042Ink soft
#ffffffBG
#f2f2f2BG soft
#919191Muted
rgba(0,0,0,1.0)Line
写真を適宜用いるハイコントラストのモノクローム
03
タイポグラフィ
display-sans · neo-grotesque-sans · serif
- display
295px · 400 - body
13px · 400 - heading
36px · 400
04
余白
4px
8px
12px
16px
20px
24px
32px
48px
80px
120px
豊かな余白を用いた非対称
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 12px
lg · 12px
pill · 100px
アクティブ状態には1px solid black、それ以外はボーダーレス
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
巨大な上揃えヒーローとオフセットされたコンテンツブロックを持つ非対称グリッド
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
フェードトランジション
ボタンおよびリンクの背景色シフト · 微細なスケールまたはカラーチェンジ
08
コンポーネント
- button ピル形状または角丸の長方形。微細な背景色付き
- card 角丸のフルブリード画像カード
- chip アクティブ状態を示す小さな角丸ピルインジケーター
- input ライトな背景色の全幅角丸インプットフィールド
- hero ビューポートを支配する極端なオーバーサイズタイポグラフィー
09
文体と禁止事項
- トーン プロフェッショナルで、率直かつパーソナル
- 見出し 巨大で、太字かつ抽象的
- CTA 最小限の強調を施した微細な角丸ボタン
- マルチカラーパレットを使用しない — スクリーンショットは厳格にモノクロームの要素のみを示している
- 小さなディスプレイタイポグラフィを使用しない — スクリーンショットは巨大でビューポートを埋め尽くすヒーローテキストを示している
- 重いドロップシャドウを使用しない — スクリーンショットは完全にフラットなサーフェスを示している
- rigidなグリッドアライメントを使用しない — スクリーンショットはオフセットされた非対称レイアウトを示している
- 複雑なアイコンセットを使用しない — スクリーンショットは最小限の、テキストベースのカスタムブランディングを示している
- 本文に標準的なセリフフォントを使用しない — スクリーンショットはメインの導入パラグラフにのみコンデンスセリフを用いている
- 避ける: 過度に装飾的な要素
- 避ける: 雑然としたレイアウト
- 避ける: 派手なカラーパレット
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはデジタルデザインディレクターのためのハイコントラストでモノクロームのポートフォリオサイトです。デザインDNAは、カスタムディスプレイフォントを用いた極端なタイポグラフィースケールと、UI要素に用いられるネオグロテスクサンセリフによって定義されます。主要カラーは、純粋な黒（#000000）を白（#ffffff）またはライトグレー（#f2f2f2）の背景上に配置。レイアウトは非対称で余白が豊かであり、UIコンポーネントには12pxおよび4pxのボーダーラディウスを使用。重要となる禁止事項には、マルチカラーパレットの不使用、小さなディスプレイタイポグラフィの不使用、重いシャドウの不使用が含まれます。トーンはプロフェッショナルで率直かつパーソナルであり、派手なビジュアル効果よりも作品そのものに焦点を当てています。
en · zh-CN · zh-TW · ja · ko