厳選・オープン・無料
Perkybros
温かみのあるニュートラルな背景を備えた、クリーンでタイポグラフィ主導のエージェンシーポートフォリオ。
AgencyPortfolioCleanTypographyPremium
01
デザイン DNA
ブランディングデザイン職人技野心的慣例
明瞭さと大胆なタイポグラフィを重視した、モダンで職人技重視のデザインスタジオのポートフォリオ。
02
カラー
#1E1F20Ink
#F5F1E7BG
#9E9A91Muted
rgba(30,31,32,0.2)Line
温かみのあるオフホワイトの背景を採用した、高コントラストのモノクロームコア。
03
タイポグラフィ
geometric-sans · transitional-serif
- display
48px · 500 - headline
40px · 400 - body
18px · 400
見出しには幾何学サンセリフ体を大文字で使用。 · 本文には移行期セリフ体を使用。 · 小さなラベルには幾何学サンセリフ体を大文字で使用。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
緊密で意図的な空間関係を実現する、一貫したベース4スケーリング。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
インタラクティブな要素と区切り線に、微細な1pxのボトムボーダー。
06
レイアウト
1440container
12columns
24pxgutter
768 / 1024breakpoints
大きな、構造化されていない画像領域を持つフレキシブルグリッド。
07
モーションとインタラクション
220msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover時の微細な色や背景のトランジション。 · スムーズなボーダーカラーのトランジション。
リンクやボタンに対する標準的な色/背景のトランジション。 · 目立ったカスタムクリックアニメーションなし。
08
コンポーネント
- button 大文字スタイルと微細なhoverトランジションを備えた、テキストベースのナビゲーション。
- card 大きな画像にテキストラベルが続くシンプルなレイアウト。
- chip 例:「03 of 06」のような、ミニマリストなテキストのみのインジケーター。
- input 目立ったものはなし。
- hero オーバーレイのナビゲーションを備えた、フルワイドの写真プレゼンテーション。
09
文体と禁止事項
- トーン プロフェッショナルで、自信に満ち、職人志向。
- 見出し 直接的で大文字。
- CTA ミニマリストなテキストのみ。
- ドロップシャドウを使用しない — スクリーンショットは完全にフラットなデザインを示しています。
- 角丸を使用しない — スクリーンショットはすべてのエッジが鋭角であることを示しています。
- 複雑なグラデーションを使用しない — スクリーンショットはソリッドでフラットなカラーフィルを示しています。
- 詰まったテキストブロックを使用しない — スクリーンショットは広いマージンと大きなタイポグラフィを示しています。
- 鮮やかなネオンカラーを使用しない — スクリーンショットは控えめなアーストーンと高コントラストのモノクロームを示しています。
- 一般的なサンセリフ体の本文を使用しない — スクリーンショットは説明文に移行期セリフ体を使用しています。
- 避ける: 装飾的なパターン
- 避ける: 角丸
- 避ける: ドロップシャドウ
- 避ける: グラデーション
- 避ける: 鮮やかなネオンカラー
- 避ける: 詰まったテキストブロック
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
Perky Brosはブランディングおよびデザインエージェンシーのポートフォリオです。温かみのあるオフホワイト背景（#F5F1E7）と高コントラストの濃いインク（#1E1F20）を採用し、クリーンで洗練された印象を実現しています。タイポグラフィは、大文字の見出しとナビゲーションに幾何学サンセリフ体、本文には移行期セリフ体を組み合わせています。レイアウトは広々としたグリッドベースで、大きな写真コンテンツを特徴としています。重要な禁止事項: 1) 角丸を使用しないこと。デザインは鋭角で半径0のエッジを使用しています。 2) ドロップシャドウを使用しないこと。表面は完全にフラットです。 3) 複雑なグラデーションを使用しないこと。ソリッドカラーフィルにとどめること。 4) 詰まったテキストレイアウトを使用しないこと。十分なパディングとマージンを維持すること。
en · zh-CN · zh-TW · ja · ko