厳選・オープン・無料
Parker Studio
ハイコントラストな画像とエレガントなタイポグラフィ、そして遊び心のあるアクセントを両立させた、洗練されたデザインスタジオのポートフォリオ。
PortfolioStudioCleanEditorialCuration
01
デザイン DNA
デザインスタジオキュレーション建築的遊び心ポートフォリオ
多様なクリエイティブプロジェクトを、それぞれ異なるビジュアルアイデンティティで展示する現代的なギャラリースペース。
02
カラー
#000000Ink
#A5A5A5Ink soft
#B7E3B6BG
#FFFFFFBG soft
rgba(0,0,0,1)Line
ソフトミントと純白の背景を持つハイコントラストパレット。最大限の可読性のためにブラックインクを使用。
03
タイポグラフィ
transitional-serif · grotesque-sans
- display
43px · 400 - body
16px · 400
プロジェクト見出しにはトランジショナルセリフを、ナビゲーションにはクリーンなグロテスクサンズを混在させる。 · 大型ディスプレイテキストにはタイトな行間を維持する。 · 一貫したナビゲーションスタイルのために、大文字変換を使用する。
04
余白
4px
8px
16px
20px
24px
32px
48px
64px
96px
余裕のある垂直方向のスペーシングが開放感を生み出し、ビジュアルワークを強調します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(0,0,0,1)
0px 4px 4px rgba(0, 0, 0, 0.25)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
大型の没入感のある画像と余裕のあるホワイトスペースを持つ、非対称でエディトリアルなレイアウト。
07
モーションとインタラクション
220msmicro
400mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
ホバーステートにおける滑らかな不透明度とトランスフォームのトランジション。
主にテキストリンクにおける、繊細な色や位置の変化。 · 直接的なナビゲーションまたはモーダルトリガー。
08
コンポーネント
- button シンプルなトランジションを持つ、ミニマルでテキストベースのナビゲーション。
- card しばしフルワイドにまたがる、大型の没入感のあるプロジェクトカード。
- hero 各プロジェクトに独自のビジュアルトーンを設定する、フルブリードで画像主導のヒーローセクション。
09
文体と禁止事項
- トーン 自信に満ち、プロフェッショナルであり、やや遊び心がある。
- 見出し しばし大型のセリフ体で設定される、短く力強いプロジェクトタイトル。
- CTA 控えめで機能的なナビゲーション用テキストリンク。
- 複数の競合する背景色を使用しない — スクリーンショットでは、セクションごとにソフトミント、白、または黒を清潔かつ焦点を絞って使用している。
- すべての要素に重いドロップシャドウを適用しない — スクリーンショットでは控えめに使用され、主に特定のオブジェクトの奥行きを出すためだけに使われている。
- すべてのテキストコンテンツを中央揃えにしない — スクリーンショットでは、明確なビジュアルヒエラルキーを形成するために、左揃えのナビゲーションと見出しが使われている。
- すべての見出しにサンズセリフを使用しない — スクリーンショットでは、「Architecture」などのプロジェクトタイトルに明確にトランジショナルセリフが使用されている。
- ナビゲーションに低コントラストのテキストを使用しない — スクリーンショットでは、背景に対してハイコントラストの黒または白のテキストが使われている。
- 丸角を普遍的に使用しない — スクリーンショットでは、主に画像とレイアウトコンテナに鋭いエッジが使われている。
- 避ける: ワークから注意をそらす過度に装飾的な要素。
- 避ける: 雑然としたレイアウトや過度なUIコンポーネント。
- 避ける: 派手なマルチカラーグラデーション。
- 避ける: フラット要素への重いドロップシャドウ。
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
Parker Studioは、多様で高品質なプロジェクトを紹介する洗練されたデザインエージェncyのポートフォリオです。デザインは、ソフトミント、純白、ソリッドブラックのクリーンなパレットに依存し、ハイコントラストと可読性を生み出しています。タイポグラフィは、表現力のある見出しにトランジショナルセリフを、ナビゲーションやUI要素にはクリーンなグロテスクサンズを混在させています。主要なHEX値には#B7E3B6、#FFFFFF、#000000が含まれます。重要なデザイン原則には、余裕のあるホワイトスペース、ハイコントラストテキスト、そして没入感のある画像主導のレイアウトが含まれます。重要な制約として、複数の競合する背景色を使用せず、重いドロップシャドウを普遍的に適用せず、すべてのテキストコンテンツを中央揃えにしないでください。全体的な印象は建築的でありながら遊び心があり、紹介される作品の品質を強調しています。
en · zh-CN · zh-TW · ja · ko