厳選・オープン・無料
Ino Jewelry
造形的でマキシマリストな写真とスタイリッシュなハイコントラストのレイアウトを用い、プロダクトをアート・オブジェクトとして位置づける、プレミアムなジュエリーブランドです。
PremiumProductGalleryPhotographicStudio
01
デザイン DNA
アヴァンギャルド造形的ラグジュアリーマキシマリストエディトリアル
ジュエリーを従来のアクセサリーではなくコンテンポラリー・アートの作品として扱う、ウェアラブル・スカルプチャーを展示するアートギャラリーのようです。
02
カラー
#212123Ink
#000000BG
#FFFFFFBG soft
#A6A6A7Muted
rgba(21,21,23,1)Line
ハイコントラストの厳格なモノクローム。黒地に白のタイポグラフィ、または白地に黒のテキストを用いることで、スタイリッシュでエディトリアルな印象を生み出します。
03
タイポグラフィ
geometric-sans
- display
24px · 400 - body
16px · 400 - caption
11px · 400
すべてのテキストはワイドなジオメトリック・サンセリフで設定 · ヘッドラインやラベルには頻繁に大文字を使用 · コンパクトなテキストブロックには非常にタイトな行間を標準化
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
テキストや画像の周りにタイトで意図的なスペーシングを用いた、グリッドベースのリズム
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
ナビゲーション区切りには細い1pxの黒線を用い、それ以外はボーダーを設けず、画像のコントラストに依存します。
06
レイアウト
1440container
12columns
24pxgutter
768 / 1024breakpoints
フルブリードのヒーロー画像に続き、スタイリッシュな2カラムの非対称プロダクト・グリッド
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.12, 0.67, 0.53, 1)easing
フェードイン · 透過度のトランジション
クリック可能な要素のシンプルな透過度トランジション · 標準的なカーソルからポインタへの変更
08
コンポーネント
- button シンプルな大文字のテキストリンクで、hover時に単一のアンダーライン
- card 画像のみのカードで、テキストラベルは画像コンテナの外に配置
- hero フルスクリーン、フルブリードの写真背景に、センタリングされた白のタイポグラフィとグラフィックなロゴ要素
09
文体と禁止事項
- トーン ミニマルで自信に満ち、アヴァンギャルド
- 見出し 「MORE IS MORE」のような、短くパワフルな大文字のステートメント
- CTA 直接的で大文字、hover時にアンダーライン
- 暖色を使用しない — スクリーンショットでは厳格にモノクロ（黒、白、グレー）の背景とテキストが示されている
- ナビゲーションやヘッドラインに小文字を使用しない — スクリーンショットでは「SHOP」「ABOUT」「MORE IS MORE」がすべて大文字で示されている
- ドロップシャドウや複雑なUIスタイリングを追加しない — スクリーンショットではフラットなタイポグラフィとシンプルな1pxボーダーが示されている
- カードやボタンに角丸を使用しない — スクリーンショットではシャープなエッジと、特定のアイコンにのみ標準的なピルシェイプが示されている
- 装飾的またはスクリプトフォントを使用しない — スクリーンショットではワイドなジオメトリック・サンセリフのみが使用されている
- レイアウトを複数の要素で雑然とさせない — スクリーンショットでは巨大なホワイトスペースと単一の大きな画像への焦点が示されている
- 避ける: 過度に記述的または華やかなコピーを避ける
- 避ける: 暖色や遊び心のある要素を避ける
- 避ける: 複雑な文章構造を避ける
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはプレミアムでアヴァンギャルドなジュエリーEコマースサイトです。設計DNAは、スタイリッシュなハイコントラスト写真、厳格なモノクローム・カラーパレット、および太字でエディトリアルな印象を生み出すために大文字で使用されるワイドなジオメトリック・サンセリフ・タイプフェースで定義されています。レイアウトにはフルブリードのヒーロー画像とクリーンな非対称グリッドが特徴です。主要な色は深い黒（#000000）、純白（#FFFFFF）、および近黒インク（#212123）です。暖色、装飾フォント、UI要素の小文字テキスト、複雑なシャドウ、カードの角丸、雑然としたレイアウトは避けてください。ブランドの強い造形的アイデンティティを維持するため、タイポグラフィは常にワイドでジオメトリック、ヘッドラインには大文字である必要があります。
en · zh-CN · zh-TW · ja · ko