厳選・オープン・無料
Danielsun
大胆で特大のタイポグラフィと鮮やかな黄色のグラデーションを用いた、表現力豊かなデザインポートフォリオ。
PortfolioBold TypographyExpressiveStudioWeb3
01
デザイン DNA
大胆表現的親しみやすいモダンハイコントラスト
巨大なタイポグラフィと鮮やかな黄色のグラデーションを用いて、力強くエネルギッシュなプレゼンスを生み出す、大胆でハイコントラストな個人ポートフォリオ。
02
カラー
#000000Ink
#808080Ink soft
#FFFFFFBG
#F5F5F5BG soft
#A6A6A6Muted
rgba(0,0,0,0.12)Line
鮮やかな黒と白を基調とした高コントラストなパレットに、鮮烈な黄色のグラデーションを加えています。
03
タイポグラフィ
grotesque-sans · humanist-sans
- display
88px · 900 - body
18px · 400 - subtitle
28px · 400
大きなディスプレイテキストには、極太(900)のウェイトを使用してください。 · 大きなディスプレイサイズには、tightな文字間隔(ネガティブ)を適用してください。 · 全て大文字は、巨大なディスプレイテキストに限定してください。
04
余白
4px
8px
10px
16px
20px
24px
32px
40px
64px
96px
セクションに十分なパディング(32px、40px)を設定した、4pxベースのグリッド。
05
サーフェス (角丸 / 影 / 罫線)
sm · 14px
md · 24px
lg · 80px
pill · 999px
目立つボーダーなし
0px 19px 8px 0px rgba(0, 0, 0, 0.3) · 0px 64px 128px 0px rgba(0, 0, 0, 0.25) · inset 0px 6px 6px 0px rgb(184, 184, 184)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えのタイポグラフィと十分な垂直方向の余白を持つ、フル幅のセクション構成。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
すべてのインタラクティブ要素に適用される滑らかなトランジション(全592要素にtransitionプロパティあり)。
インタラクティブな要素に対して、明るさやスケールの微細な変化。 · 即座の視覚フィードバック。
08
コンポーネント
- button ダークな背景に明るい黄色のテキストを持つ、ピル形状のボタン。
- card クライアントロゴ用の、光沢のある3Dスタイルの円形またはピル形状のカード。
- hero 鮮やかな黄色の斜めグラデーションを背景に、巨大で太字のタイポグラフィを配置した、フルスクリーンのヒーローセクション。
09
文体と禁止事項
- トーン フレンドリーでカジュアル、かつ非常に自信に満ちたトーン。
- 見出し 巨大で太字の、全て大文字のステートメント。
- CTA 明るい黄色のハイライトを用いた、直接的でアクション重視のスタイル。
- 小さく軽いタイポグラフィは使用しない — スクリーンショットにはinstead、巨大で太字(ウェイト900)のディスプレイテキストが表示されています。
- 渋い、モノクロのパレットは使用しない — スクリーンショットにはinstead、ヒーローを支配する鮮やかな黄色のグラデーションが表示されています。
- 標準的な矩形ボタンは使用しない — スクリーンショットにはinstead、丸みのあるピル形状のボタンが表示されています。
- フラットな2Dアイコンは使用しない — スクリーンショットにはinstead、光沢のある3Dスタイルのクライアントロゴが表示されています。
- ヒーローに複雑な複数カラムグリッドは使用しない — スクリーンショットにはinstead、中央揃えのフル幅タイポグラフィが表示されています。
- 繊細で薄いボーダーは使用しない — スクリーンショットにはinstead、強いシャドウと大胆なカラーブロックが表示されています。
- 避ける: フォーマルな企業言語
- 避ける: 小さく繊細なタイポグラフィ
- 避ける: 渋い色調のパレット
- 避ける: 表現的な要素のない、堅苦しくグリッド重視のレイアウト
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは、SaaSおよびWeb3デザインパートナー向けの、大胆で表現力豊かなデザインポートフォリオです。デザインのDNAは、グロテスク・サンス系の巨大で超太字(ウェイト900)のタイポグラフィ、純黒(#000000)と白(#FFFFFF)という鮮明なハイコントラストパレット、そして鮮やかな黄色のグラデーションが特徴です。レイアウトはゆとりのあるパディングと中央揃えのセクションで構成されています。重要な注意点:小さく軽いタイポグラフィは決して使用しないこと;渋い、企業的なカラーパレットは決して使用しないこと;クライアントの作品にフラットな2Dアイコンは決して使用せず、常に光沢のある3Dスタイルの要素を使用すること。堅苦しいフォーマルなレイアウトは避け、巨大なテキストを用いた表現力豊かなフル幅セクションを優先すること。
en · zh-CN · zh-TW · ja · ko