厳選・オープン・無料

Jun Works

グラフィックデザイン作品を紹介する、タイポグラフィ中心のミニマリストな個人ポートフォリオです。

01

デザイン DNA

クリーンなタイポグラフィと豊かな余白を備えた、ハイエンドの印刷ポートフォリオ本のようなものです。

02

カラー

タイポグラフィとコンテンツを強調するため、黒と白のみの厳密なモノクロです。

03

タイポグラフィ

grotesque-sans

• display54px · 400
• body13px · 400

テキストにはすべてNeue Haas Groteskまたは同様のgrotesque-sansを使用する · 大きなディスプレイテキストの文字間隔は-2pxを厳密に維持する · 全要素でfont-weightを400に統一する

04

余白

主要セクションの周囲に45pxの十分なパディングを設け、広々とした息のできるレイアウトを実現します。

05

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

インタラクティブな要素やボタンには4pxのblack solidボーダーを使用し、角はピルシェイプ（border-radius: 129.6px）とします。

06

レイアウト

中央揃えの単一カラムレイアウトで、大きなタイポグラフィ、十分なパディング、テキストは厳密に左揃えとします。

07

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

リンクやボタンのhover遷移には'all'プロパティを使用

インタラクティブな要素にカスタムカーソルの変更と控えめな遷移を適用します。 · 標準のポインタービヘイビアです。

08

コンポーネント

• button 4pxのblack solidボーダーを持つピルシェイプのボタンで、白背景に黒テキスト、十分な内部パディングを備えます。
• card カードは使用せず、コンテンツは連続テキストブロックまたはリストとして提示します。
• chip 細いblackボーダーを持つピルシェイプのタグ（例：#creative、#branding）です。
• input 表示される入力フィールドはなく、主に静的コンテンツです。
• hero 文字間隔の詰まった、大きく太字の導入テキストブロックで左揃え、ビューポートを支配的に占めます。

09

文体と禁止事項

• トーン プロフェッショナルで簡潔、かつ非常に精錬された調子です。
• 見出し 大きく、太字で、文字間隔の詰まったgrotesque-sansテキストです。
• CTA 細いblackボーダーとクリーンなテキストを持つピルシェイプのボタンです。

• 複数のカラーを使用しない — スクリーンショットは厳密なモノクロの黒白パレットを示しています。
• 装飾的なフォントを使用しない — スクリーンショットは全体を通してクリーンなgrotesque-sansタイポグラフィを示しています。
• ドロップシャドウを使用しない — スクリーンショットは完全にフラットなデザイン要素を示しています。
• ボタンに角丸四角形を使用しない — スクリーンショットはピルシェイプ（半径999px）のボタンを示しています。
• 太いフォントウェイトを使用しない — スクリーンショットはfont-weight 400を一貫して使用しています。
• 詰まった余白を使用しない — スクリーンショットはコンテンツセクションに十分なパディング（45px）を示しています。
• 避ける: 装飾的な要素を避ける
• 避ける: 不要なカラーを避ける
• 避ける: 複雑なレイアウトを避ける

10

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

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

11

System Prompt

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