厳選・オープン・無料

Aliciamoore

極度の抑制とフルブリード画像を用いて、没入型のギャラリー風ショッピング体験を生み出すプレミアムファッションブランドウェブサイト。

EditorialPremiumRestraintPhotographicConsumer
Aliciamoore のスクリーンショット
↓ デザインシステムをダウンロード (1 MB)OpenDesign で開く

オリジナル: https://aliciamoore.com

📦 パックの中身を見る →

01

デザイン DNA

ミニマリストハイエンドファッション雰囲気重視

静かで薄暗いラグジュアリーショールーム。プロダクトのみが焦点となる空間。

02

カラー

#F1F0ECInk
#000000BG
#222A37BG quiet
#999999Muted
rgba(241, 240, 236, 0.15)Line

高コントラストのモノクロームパレットに、状態表示用のサブカラーとして深いネイビーを採用。写真が温かみを担う。

03

タイポグラフィ

grotesque-sans

プライマリフォントにFounders Groteskを使用 · ナビゲーションリンクは軽量（300）で広い文字間隔を設定 · タイポグラフィ要素の周囲には十分なネガティブスペースを確保

04

余白

4px
8px
12px
16px
24px
32px
36px
48px
64px
96px
108px

エッジを囲む十分なパディング（36px）。ヒーローセクションには垂直方向に108pxの余白を設ける。

05

サーフェス (角丸 / 影 / 罫線)

sm · 0px
md · 0px
lg · 0px
pill · 0px

区切りとして控えめに使用する、インクカラーの1pxボーダー。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

主要なビジュアルを中央に配置した全面キャンバス。コーナーに整列したナビゲーションおよびブランド要素で固定。

07

モーションとインタラクション

220msmicro
400mssmall
800msmedium
cubic-bezier(0.32, 0.94, 0.6, 1)easing

UI要素のための滑らかな透明度フェード · テキストおよび画像のための段階的な出現アニメーション

インタラクティブなテキストリンクの控えめな透明度の低下。 · 次の状態への滑らかなトランジションを伴う、即座のビジュアルフィードバック。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

Aliciamoore — 桌面首屏（hero）
桌面首屏（hero）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Aliciamoore — 移动首屏
移动首屏

実ページから取得 · 実 computed styles

11

System Prompt

ギャラリー風の雰囲気を持つ、プレミアムでミニマリストなファッションEコマースインターフェースをデザイン。背景は深い黒（#000000）、テキストはオフホワイト（#F1F0EC）を使用し、最大限のコントラストを実現。タイポグラフィはクリーンなgrotesque-sansで、軽量および通常のウェイト、広い文字間隔を採用。主要なビジュアル要素として大型の高品質写真を優先し、UI要素は周縁部に配置。流れるような洗練された動きにはcubic-bezier(0.32, 0.94, 0.6, 1)を使用。シャドウ、角丸、鮮やかなカラーなどの装飾要素は一切使用せず、絶対的な抑制を維持。ナビゲーションは控えめでテキストのみとする。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

en · zh-CN · zh-TW · ja · ko