厳選・オープン・無料

David Hckh

ウェブ開発者向けの遊び心あふれる3Dイラスト付き個人ポートフォリオ

01

デザイン DNA

親しみやすいイラスト付き開発者ワークスペースを実現したデザイン

02

カラー

暖かいクリーム色のベースに、コントラスト用の濃いインクとプライマリアクション用の鮮やかなオレンジを採用

03

タイポグラフィ

humanist-sans · monospace

• display72px · 800
• h248px · 800
• body16px · 400

ナビゲーションとバッジラベルには大文字を使用 · 大きなディスプレイテキストにはtightな字間隔を維持 · 見出しにはboldウェイトを使用し、視覚的階層を強調

04

余白

4pxのグリッドで一貫性を保ち、主要セクション周辺に十分な余白を配置

05

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

アウトラインには2px solidインクカラー、バッジには4px solidアクセントカラー

0 4px 24px rgba(45, 42, 36, 0.08) · 0 8px 32px rgba(45, 42, 36, 0.12)

06

レイアウト

フルワイドのヒーローに分割レイアウト、プロジェクト用2カラムグリッド

07

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

ホバー時のsmoothなbackground-colorとtransformトランジション · colorとopacity変更に対するease-in-outトランジション

インタラクティブ要素の微妙なbackground-colorとtransform変更 · マイクロトランジションによる即座のレスポンス

08

コンポーネント

• button ピル型、100px border-radius、オレンジ背景に白テキスト
• card 24px border-radiusで角丸、画像付き
• chip 4pxボーダーの傾斜バッジラベル、大文字テキスト
• input スクリーンショットには未表示
• hero 分割レイアウト、左側に太字の大見出し、右側に3Dイラスト

09

文体と禁止事項

• トーン 親しみやすく、アプローチしやすく、プロフェッショナル
• 見出し 大きく太字、lowercase寄りのhumanist sans-serifで個性を表現
• CTA 大文字ピル型ボタン、高コントラストのオレンジ

• thinなフォントウェイトを使用しない — スクリーンショットでは見出しにウェイト800を使用
• ダーク背景を使用しない — スクリーンショットでは暖かいクリーム#F5EFE6背景を使用
• 角丸を使用しない — スクリーンショットではピル用に最大100pxのborder-radiusを使用
• 青をアクセントとして使用しない — スクリーンショットではオレンジ#FF8400をプライマリアクセントに使用
• セリフタイポグラフィを使用しない — スクリーンショットではUrbanist humanist sans-serifのみを使用
• 最小限の余白を使用しない — スクリーンショットでは十分なパディングとセクション間のギャップを使用
• 避ける: セリフフォントを使用しない
• 避ける: クールまたはクリニカルな青をプライマリアクセントとして使用しない
• 避ける: 鋭い角を使用しない
• 避ける: 見出しにthinまたはlightなフォントウェイトを使用しない
• 避ける: ダークモードの背景を使用しない
• 避ける: セクション間の狭い間隔を使用しない

10

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

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

11

System Prompt

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