厳選・オープン・無料
Albacondos
広大な写真、豊かなホワイトスペース、エレガントで抑制されたタイポグラフィーによって定義されたプレミアムレジデンシャル不動産サイト。
PremiumPhotographicEditorialCalmRefined
01
デザイン DNA
ラグジュアリーアーキテクチャアーバン洗練されたモダンリビング
プレミアムなアーバンリビングスペースを紹介するハイエンド不動産開発者。
02
カラー
#000000Ink
#F5F4F3BG
#737373Muted
rgb(115, 115, 115)Line
深い暖色のニュアンスを持つモノクロニックパレットで、ビジュアルインテレストには完全に大規模な写真に依存します。
03
タイポグラフィ
geometric-sans · humanist-sans
- display
95px · 500 - headline
40px · 300 - body
16px · 300
プライマリタイポグラフィは、300の主要ウェイトを持つジオメトリックサンセリフ（モンセラットファミリー）です。 · ブランディング要素には、セカンダリディスプレイサンセリフがアクセントとして使用されます。 · ナビゲーションとフィチャータグには、大文字変換が広く適用されます。 · 広々とした印象のために、大きな数値表示には豊かなトラッキングが適用されます。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
垂直リズムは、115pxの極めて豊かなパディングブロックによって確立され、落ち着きがあり息ができないレイアウトを生み出します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 22px
pill · 999px
ピルシェイプボタンや小さなタグコンポーネントには、1pxのソリッドボーダーが使用されます。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準的なカラム配置を崩し、編集的で雑誌のようなフローを作成する、非対称なメーソンリースタイルのグリッドです。
07
モーションとインタラクション
400msmicro
600mssmall
1000msmedium
cubic-bezier(0.76, 0, 0.24, 1)easing
画像上のドラマチックなシネマティック露出効果のために、クリップパストランジションが多用されます。 · 0.4秒から1.5秒の範囲の持続時間を持つ、滑らかなページトランジションのためのフェードインとフェードアウトパターン。
滑らかな0.4s ease-outトランジションによる、オパシティと背景色の変化。 · 遅延したトランスフォームトランジションを伴う、即座のカーソルポインターレスポンス。
08
コンポーネント
- button 大文字テキストと豊かな水平パディングを持つ、ピルシェイプのアウトラインボタン。
- card 太いボーダーや影ではなく、主に大型の高解像度フォトグラフィックコンテンツによって定義されるミニマリストカード。
- chip カテゴリラベル用の、細い1pxボーダーと大文字テキストを持つ小さなピルシェイプタグ。
- input 明るい背景にシームレスに溶け込むミニマリストフォームフィールド。
- hero 絶対位置指定のタイポグラフィーを伴う、プライマリな焦点として機能するフルビューポートのシネマティックな画像。
09
文体と禁止事項
- トーン 洗練された、自信に満ちた、そして静謐な。
- 見出し ミニマリストで、従来のテキストヘッダーの代わりに、大きな数字表示（タイムスタンプ）を多用します。
- CTA 大文字トラッキングを持つ控えめなピルシェイプボタン。
- 明るく飽和したアクセントカラーを使用しない — スクリーンショットは写真に支配された厳格なモノクロニックパレットを示しています。
- カードに重いドロップシャドウを使用しない — スクリーンショットは画像のみで定義されたフラットでボーダーレスの要素を示しています。
- 密集した雑然としたレイアウトを使用しない — スクリーンショットは巨大なホワイトスペース（115px垂直パディング）と息ができない間隔を示しています。
- ディスプレイ用に重いスタイリッシュ、または装飾的なセリフフォントを使用しない — スクリーンショットはすべてのタイポグラフィーに厳格なジオメトリックサンセリフを使用しています。
- UIコンポーネントに複雑で複数ステップのボーダーラジウスを使用しない — スクリーンショットは厳格なピルシェイプ（完全に丸みを帯びた）ボタンを示しています。
- 賑やかで複雑な背景を使用しない — スクリーンショットはすべてのテキストを多く含むセクションに、ソリッドのオフホワイト背景（#F5F4F3）を使用しています。
- 避ける: 明るく飽和したカラー、または目障りなグラデーションを使用しない。
- 避ける: 重いドロップシャドウ、または複雑なドロップシャドウボーダーに依存しない。
- 避ける: 複数の小さな要素を含む雑然としたグリッドを使用しない；大型のフォトグラフィック領域を優先する。
- 避ける: 装飾的、または重いスタイリッシュなセリフフォントを使用しない。
- 避ける: 密集した小さなテキストを使用しない；全要素間に豊かなホワイトスペースを維持する。
- 避ける: 小さな角丸の角丸四角形を使用しない；厳格なピルシェイプまたはシャープな角にこだわる。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
あなたは「ALBA」という名のプレミアムアーバンレジデンシャル開発者向けにデザインしています。ビジュアル言語は、広大なシネマティックな写真と豊かなホワイトスペース、厳格なモノクロニックパレットによって定義されています。プライマリ背景は、温みのあるオフホワイト（#F5F4F3）で、テキストはソリッドブラック（#000000）です。タイポグラフィーは、洗練された軽やかな印象のために、ライトウェイト（300）のジオメトリックサンセリフに大きく依存しています。UI要素、特にボタンやタグは、厳格にピルシェイプで、薄い1pxのアウトラインと大文字トラッキングを持ちます。画像露出には複雑なクリップパスアニメーションが使用されます。主要な制約：明るいアクセントカラー、ドロップシャドウ、雑然とした複数カラムグリッドは回避してください。常に、ラグジュアリーと落ち着きの感覚を維持するために、大型のフォトグラフィック領域と極端な垂直方向の間隔（115pxパディング）を優先してください。決して装飾的、または重いディスプレイフォントを使用しないでください。
en · zh-CN · zh-TW · ja · ko