厳選・オープン・無料
Matteroffact Fr
巨大なタイポグラフィのスケールと鮮やかな黒白のコントラストに完全依存する、ミニマルなフランスのクリエイティブ・スタジオのポートフォリオ。
StudioEditorialPhotographicBold TypographyClean
01
デザイン DNA
クリエイティブ・エージェシーミニマリズムタイポグラフィ駆動アーティスティックダイレクト
スリム化されたギャラリー。大規模なタイポグラフィが主要な展示物であり、インタラクションは必須のボックス型トリガーに還元されている。
02
カラー
#000000Ink
#a0a0a0Ink soft
#ffffffBG
#c0c0c0Muted
rgba(0,0,0,1.0)Line
純白の背景に黒のテキストとボーダーを用いる厳格なモノクローム。視覚的階層構築にグレースケールを使用。
03
タイポグラフィ
grotesque-sans
- display
160px · 400 - h1
36px · 400 - body
22px · 400
すべてのUIおよびタイポグラフィ要素にFreeSansファミリーを使用 · すべてのテキストのfont-weightを400に維持 · 本文および小見出しのline-heightを1.2に緊密に設定
04
余白
4px
8px
16px
18px
24px
32px
48px
64px
4pxグリッドに基づく緩いリズム。ボックス型要素に18pxおよび45pxのpaddingを重点的に使用。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
ボタンやナビゲーション・リンクなどのボックス型UI要素にのみ、3pxのsolid黒ボーダーを使用。
06
レイアウト
1920container
12columns
18pxgutter
768 / 1024breakpoints
非対称、エッジ揃えのレイアウト。巨大なタイポグラフィ・ブロックが境界に押しかけ、コーナー配置のボックス型ナビゲーションを構成。
07
モーションとインタラクション
200msmicro
250mssmall
1000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
全プロパティのtransitions · opacity fading · color changes
クリック可能なボックス型要素でトリガー。テキストcolorまたはボーダー colorが変化する。 · インタラクティブ要素に標準のポインターカーソル。
08
コンポーネント
- button 基本的なHTMLフォーム要素を模倣した、3pxのsolid黒ボーダーと内部paddingを持つ、bareで長方形のボックス。
- hero オーバーサイズの流れるようなタイポグラフィでビューポートを支配し、同時にナビゲーション要素として機能。
09
文体と禁止事項
- トーン 直接的、フィルタリングなし、やや対抗的。
- 見出し 韻を踏む、または繰り返しの単語(Fact, Fake, Tab, Hack)を用いた遊び心のある巨大なタイポグラフィ。
- CTA bareで、機能的、視覚的装飾が皆無。
- rounded cornersを使用しない — スクリーンショットでは、すべてのボタンと要素に鋭い0pxの長方形コーナーが確認できる
- drop shadowsを適用しない — スクリーンショットでは、levation(立体感)のない完全にフラットでボーダーレスのUIが確認できる
- 色付きの背景を使用しない — スクリーンショットでは、厳格な純白#ffffffの背景が確認できる
- 特徴的な装飾的sans-serifを使用しない — スクリーンショットでは、均一で中立的なgrotesque-sansが確認できる
- すべてのテキストをセンタリングしない — スクリーンショットでは、積極的に左揃えおよび右揃えのタイポグラフィが確認できる
- boldなfont-weightを使用しない — スクリーンショットでは、すべてのテキストがfont-weight 400のregularに厳密に設定されている
- 避ける: Gradients
- 避ける: Soft shadows
- 避ける: Rounded corners
- 避ける: 明るいアクセントカラー
- 避ける: 装飾的なアイコン
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Matter of Factは、従来のUIの洗練よりも生のタイポグラフィのスケールを優先する、ミニマルなフランスのクリエイティブ・スタジオのポートフォリオ。デザインは#000000インクを#ffffff背景に使用した厳格な黒白パレットに基づき、中立的なFreeSans書体が常にfont-weight 400で維持される。ナビゲーションおよびインタラクティブ要素は、すべての現代的な装飾を拒絶し、鮮やかな3px solid黒ボーダーのボックスに還元されている。重要な禁止事項:rounded cornersは絶対に使用しない(UIは完全にシャープエッジ)、shadowsやgradientsを絶対に適用しない(美学は完全にフラット)、boldなfont-weightを絶対に使用しない(すべてのテキストはregularのまま)。レイアウトは、非対称で巨大なタイポグラフィに依存してユーザーの視線を誘導し、生の感覚と高度にキュレーションされた感覚の両方を感じさせる、表現力豊かで意図的に未完成な印象を創出する。
en · zh-CN · zh-TW · ja · ko