厳選・オープン・無料

Jonaspelzer

15年以上のデジタルプロダクト制作実績を紹介する、洗練されたデザインポートフォリオ。

01

デザイン DNA

生きたケーススタディカタログとして機能する、洗練されたデジタルポートフォリオ。

02

カラー

高コントラストな黒と白を基調に、1つの高彩度の紫のアクセントを加える。

03

タイポグラフィ

geometric-sans · transitional-serif

• display56px · 400

同じ見出しブロック内で幾何学的なサンセリフとトランジショナルなセリフを混ぜ、リズム感のあるコントラストを生む。 · 洗練された可読性のために、十分な行間と字間を使用する。 · メインナビゲーションとカテゴリラベルには、大文字の使用を推奨する。

04

余白

縦方向のパディングと余白を豊かに取り、タイポグラフィとプロジェクトに呼吸を与える。

05

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

鋭い境界には 1px solid #000000。繊細な区切りには 1px solid rgb(212, 214, 221)。

0px 1px 4px 2px rgba(53, 2, 255, 0.1)

06

レイアウト

中央配置のヒーローセクションの後に、プロジェクトカードの3カラムグリッドが続く。

07

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

ページ間の滑らかなトランジションと、プロジェクトカードのホバーステート。 · プロジェクトサムネイルの繊細なスケーリングまたはトランスレーション。

プロジェクトカードとナビゲーションアイテムに、繊細なスケールまたはシャドウの変化を加える。 · インタラクティブ要素に即座に視覚フィードバックを提供する。

08

コンポーネント

• button 丸型のナビゲーションバー。アクティブステートにはソリッドな紫の背景色。
• card 角丸（12px）と繊細なシャドウまたはボーダーを持つプロジェクトサムネイル。
• hero 十分な余白を上方に配置し、サンセリフとセリフをミックスした、大きなタイポグラフィックロックアップ。

09

文体と禁止事項

• トーン プロフェッショナルで、自信に満ち、熟練した雰囲気。
• 見出し 直接的で断定的、かつタイポグラフィ的に表現力豊かなスタイル。
• CTA 明確で行動を促すスタイル。ナビゲーション内では大文字で提示されることが多い。

• メインナビゲーションにセリフ体フォントを使用しない — スクリーンショットでは大文字のサンセリフラベルが示されている。
• 明るい或多色のカラーパレットを使用しない — スクリーンショットでは黒、白、紫の厳格な配色が示されている。
• すべてのコンテンツを中央揃えにしない — スクリーンショットではヒーローテキストが左揃えで、グリッドが構造化されている。
• 重いドロップシャドウを使用しない — スクリーンショットでは1つの繊細な紫のボックスシャドウしか示されていない。
• 複雑または装飾的なUIコンポーネントを使用しない — スクリーンショットではミニマルでテキスト主導のインターフェースが示されている。
• ダークモードインターフェースを使用しない — スクリーンショットでは明るい背景のデザインが示されている。
• 避ける: 過度にカジュアルまたは遊び心のある言葉遣いは避ける。
• 避ける: 明確な階層のない、密なテキストブロックは避ける。
• 避ける: 一般的な企業用語は避ける。

10

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

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

11

System Prompt

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