厳選・オープン・無料

Studiofew

モノクロの写真と洗練されたUIで、フォントスペシメンを紹介するミニマリストなプレミアムフォントファウンドリーサイト。

01

デザイン DNA

ハイエンドなフォントファウンドリーのスペシメンブックをデジタル形式で提示

02

カラー

黒と白の強いコントラストを基調とし、中立的なグレーをヒエラルキーとUI要素に用いる厳格なモノクロパレット。

03

タイポグラフィ

humanist-serif · humanist-sans · geometric-sans

• display158px · 400
• sub-display115px · 400
• body14px · 400
• caption12px · 400

ラベルとナビゲーションはすべて大文字 · 大きなディスプレイタイプには字間を詰める · スモールキャップのUIには字間を広めにとる

04

余白

厳格な4pxグリッドを採用し、スペシメンセクションの周囲には余裕のあるpaddingを設定

05

サーフェス (角丸 / 影 / 罫線)

1pxの黒の実線、セクション区切りには点線

06

レイアウト

フルワイドのスペシメンカードを点線で区切り、stickyナビゲーションを採用

07

モーションとインタラクション

hover状態の標準的なopacityトランジション · フォントプロパティの滑らかなスライダー調整

繊細なopacityの低下またはカーソル変化 · 複雑なフィードバックのない標準的なボタン押下

08

コンポーネント

• button 角が鋭いミニマルな長方形ボタン。塗りつぶし黒またはアウトライン、テキストは大文字
• card 個々のフォントスペシメンに特化したフルワイドセクション
• chip カート数表示などに用いる小さな円形アイコンおよびバッジ
• input ミニマリストなドットインジケーターを備えたスライダーコントロール
• hero 大々的なスペシメンタイポグラフィを重ねた、写真または3Dレンダリングのイメージ

09

文体と禁止事項

• トーン 権威ある、ミニマルな、デザイン重視のトーン
• 見出し 大々的で字間の詰まった大文字、または大きなスペシメンディスプレイ
• CTA 直接的で大文字、高コントラストのボタン（例：「Trial」や「View」）

• 鮮やかなカラーパレットは使用しない — スクリーンショットは黒、白、グレーのStrictlyなモノクロパレットを示しています
• プライマリボタンに角丸を使用しない — スクリーンショットは鋭い角の長方形ボタンを示しています
• 大きなディスプレイテキストに広い字間を使用しない — スクリーンショットはスペシメン見出しの詰まった字間を示しています
• 遊び心のある言葉遣いで曖昧にしない — スクリーンショットは「SIZE」や「WEIGHT」のような直接的で機能的なUIラベルを示しています
• 重い影や奥行きを使用しない — スクリーンショットはフラットでクリーンな表面を示しています
• すべてを中央揃えにしない — スクリーンショットは左揃えの強いタイポグラフィとUI要素を示しています
• 避ける: 装飾的な要素
• 避ける: 鮮やかな色彩
• 避ける: 遊び心のある言葉遣い
• 避ける: プライマリボタンの角丸

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko