厳選・オープン・無料
Atlason
家具やプロダクトの仕事を紹介する、ハイエンドなデザインスタジオのポートフォリオ。
StudioPortfolioPremiumPhotographicCuration
01
デザイン DNA
デザインスタジオ家具ポートフォリオミニマリスト
作品に語らせる、高級なデザインギャラリー。
02
カラー
#000000Ink
#FFFFFFBG
#B0B0B0Muted
rgba(0,0,0,1.0)Line
ハイコントラストの写真に色彩を依存した、厳格なモノクローム基盤。
03
タイポグラフィ
grotesque-sans
- display
230px · 400 - heading
106px · 500 - body
16px · 400
大きなディスプレイ見出しには、 tighterな字間隔を使用する · すべてのテキストブロックは、厳格に左揃えを維持する · テキストにドロップシャドウや装飾的な処理を施さない
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
非対称で、主要セクション間には大きな隙間を設け、コンテンツブロック内ではより密接にまとめる。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
主要なインターフェース要素には目立つボーダーを設定しない。区切りにはホワイトスペースに依存する。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
デスクトップでは非対称のマルチカラムグリッド、モバイルでは単一カラムにスタックする。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
スクロール時の画像や要素への、滑らかなフェードイン/アウト · hover時の控えめなscaleとtranslateの変形
インタラクティブな要素に対する、控えめなopacityの減少またはわずかなscaleの増加。 · 即座のナビゲーションまたはトランジション。
08
コンポーネント
- button hover時に控えめなopacityの遷移を伴う、テキストのみのリンク。
- card 最小限の、またはボーダーのない画像グリッド。キャプションとの近接性に依存する。
- hero 巨大なタイポグラフィと、フルブリードまたは分割画面の大きな画像を組み合わせる。
09
文体と禁止事項
- トーン 自信に満ち、控えめでプロフェッショナル。
- 見出し 巨大なタイポグラフィによる、太字の宣言的な文。
- CTA ミニマルなテキストリンクで、しばしばシンプルな矢印アイコンが伴う。
- 明るいアクセントカラーを使用しない — スクリーンショットは厳格なモノクロームパレットを示している
- 画像にドロップシャドウを追加しない — スクリーンショットはクリーンでフラットなプレゼンテーションを示している
- テキストの中央揃えを使用しない — スクリーンショットは強力な左揃えのタイポグラフィを示している
- コンテナに角丸を使用しない — スクリーンショットはシャープで長方形のエッジを示している
- 見出しにセリフフォントを使用しない — スクリーンショットは太字でモダンなゴシック体サンセリフを示している
- アイコンでUIを雑踏させない — スクリーンショットはナビゲーションにテキストとイメージに依存している
- 避ける: 過度な形容詞やマーケティング的な表現
- 避ける: 明るく、不協和なカラーパレット
- 避ける: シャドウや角丸などの装飾的なUI要素
- 避ける: 密集した本文ブロック
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
このデザインは、プレミアムでミニマルなデザインスタジオのポートフォリオを表現している。純粋な黒(#000000)と白(#FFFFFF)からなる厳格なモノクロームパレットを用い、ハイコントラストと集中力を生み出している。タイポグラフィは、インパクトを得るために巨大なスケールで使用される、太字でモダンなゴシック体サンセリフである。レイアウトは、高品質な大型フォトグラフィを優先する非対称グリッド。重要な制約:明るいアクセントカラーをすべて避け、角丸やドロップシャドウは使用せず、すべてのテキストは厳格に左揃えを維持すること。インタラクションモデルは控えめで、hover状態には滑らかな300msのトランジションに依存する。
en · zh-CN · zh-TW · ja · ko