厳選・オープン・無料

Hugoferradas

ブランドデザイナー兼クリエイティブ・ディレクターのための、洗練された個人ポートフォリオ。大胆なタイポグラフィと抑制されたカラーパレットを用いたバイリンガルレイアウトを特徴としています。

01

デザイン DNA

クリエイティブ・ディレクターのための、落ち着いたタイポグラフィギャラリー

02

カラー

純黒背景に極めて対照的な白テキストを用いたモノクロームデザイン。淡い黄色のロゴなど、微細なアクセントが時折見られます。

03

タイポグラフィ

transitional-serif · grotesque-sans

• display36px · 700

見出しには、エレガンスと権威感を出すためのクラシックなセリフフォント（フォールバック: Times New Roman）を使用します。 · 本文には、暗い背景でも最大限の可読性を確保するためのクリーンなサンセリフ（Roboto）を使用します。 · タイポグラフィは左揃えとし、余裕のある行間を設定して、クリーンで息のできるレイアウトを維持します。

04

余白

主要セクションの上下に十分なpaddingを設け、テキストブロック間には一定のmarginを確保することで、垂直リズムを構築します。

05

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

視覚的なボーダーは使用しません。深みはタイポグラフィとカラーのコントラストのみで表現します。

06

レイアウト

幅全体の黒いキャンバスに、中央に配置された左揃えのコンテンツブロック。端から端へのテキスト配置は避けます。

07

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

すべての要素にtransitionプロパティが設定されており、hoverやインタラクション時の滑らかな状態変化が示唆されています。

グローバルなtransitionプロパティにより、微細なカーソルインタラクションが示唆されます。 · 専門家としての所属（R/GA、Stink Studios）に対する、標準的なリンク動作です。

08

コンポーネント

• button 伝統的なボタンは使用せず、ナビゲーションはテキストリンクと最小限のトグルアイコンで実現します。
• card 「ST·S·2·OS」要素は、微細な背景色の変化と大きなカスタムタイポグラフィを持つグラフィックカードとして機能します。
• hero 大きなセリフ見出しと簡潔な専門要約を備えた、ミニマルなテキストベースのヒーローセクションです。

09

文体と禁止事項

• トーン プロフェッショナル、簡潔、そして自信に満ちたもの
• 見出し 権威を確立するための、クラシックなセリフフォントを用いた、直接的で個人的なスタイル。
• CTA 明示的ではありません。専門家としての所属は、下線付きテキストリンクとして提示されます。

• 明るい色やカラフルな背景を使用しない — スクリーンショットは、代わりに真っ黒（#000000）のキャンバスを示しています。
• 見出しにサンセリフフォントを使用しない — スクリーンショットは、代わりにセミセリフ（Times New Roman）を示しています。
• ドロップシャドウや複雑なボーダーを使用しない — スクリーンショットは、代わりにフラットでボーダレスなデザインを示しています。
• 目立つ高彩度のアクセントカラーを使用しない — スクリーンショットは、代わりにニュートラルなモノクロームパレットを示しています。
• 小さく密なテキストを使用しない — スクリーンショットは、可読性のために十分な行間と大きなフォントサイズを示しています。
• すべてのテキストを中央揃えにしない — スクリーンショットは、代わりに左揃えの段落と見出しを示しています。
• 避ける: 過度にカジュアルな言葉遣いを避ける
• 避ける: 複雑なナビゲーションメニューを避ける
• 避ける: ごちゃごちゃしたレイアウトを避ける
• 避ける: 複数の競合するアクセントカラーの使用を避ける
• 避ける: 本文に装飾的なフォントの使用を避ける

10

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

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

11

System Prompt

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