厳選・オープン・無料

Markaware Jp

ギャラリースタイルのフォトグラフィーと抑制されたタイポグラフィによる、洗練された日本のファッションEコマース体験。

01

デザイン DNA

静かなプレミアムテキスタイルのギャラリー

02

カラー

プロダクトフォトグラフィーがすべてのカラーとテクスチャーを提供する、ニュートラルなハイキーパレット。

03

タイポグラフィ

geometric-sans

• display48px · 400
• headline32px · 400
• body14px · 400

すべてのテキストはweight 400の幾何学サンセリフ（ABCDiatype）を一貫して使用。 · ブランドロゴは広い字間隔の大文字で設定。 · 本文コピーは読みやすさを高めるため、やや広い字間隔（0.4px）を使用。

04

余白

垂直リズムは、ヒーロー画像とコンテンツセクションの間の手厚いパディング（398pxから70px）によって維持される。

05

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

すべてのインタラクティブ要素とコンテナ境界に1pxのblack實線を使用し、鋭い構造的定義を創出。

rgba(0,0,0,0.2) 0px 0px 18px 0px · rgba(0,0,0,0.3) 0px 12px 60px 0px · rgba(0,0,0,0.05) 0px 0px 2px 1px

06

レイアウト

フルブリードのヒーロー画像と、均一な20pxガターを維持する4カラムのプロダクトグリッドの組み合わせ。

07

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

「Stay in Touch」モーダルなどのオーバーレイに対する、滑らかなopacityとvisibilityのトランジション（0.5秒）。 · UI要素の表示に対する、標準のcubic-bezierを使用したwidthとmax-widthのトランジション（0.4秒）。

サイト全体の抑制を保ちながらの、微細なカラーシフトやopacityの変化。 · ページトランジションやモーダル表示による、即座のフィードバック。

08

コンポーネント

• button 黒のテキストと透明な背景を持つ、ピルシェイプのアウトラインボタン。100pxのborder-radiusを使用。
• card 大きなプロダクト画像と、その下に左寄せの小さなタイトルを持つミニマルなカード。軽いボーダーで区切られる。
• chip プロダクトのバリアント選択に使用される、小さなカラースウォッチ（black、beige、charcoal、white）。
• input 最小限のボーダーを持つクリーンなテキスト入力フィールド。多くの場合、blackのアンダーラインまたはボーダーを伴う。
• hero デスクトップでは幅の約60%を画像が占めるスプリットスクリーンヒーロー、モバイルではフルワイドに切り替わる。

09

文体と禁止事項

• トーン 素材の品質と技術への焦点を反映する、静かで洗練され、情報的なトーン。
• 見出し 明確で記述的、多くの場合テクニカル（例：「Organic Wool 2/80 Tropical」）。
• CTA 直接的で機能的（例：「Shop」、「Join Mailing List」、「Read More」）。

• ハイクロマのアクセントカラーを使用しない — パレットは厳格にモノクロームかつニュートラル。
• 太いフォントウェイトを使用しない — 表示されるすべてのタイポグラフィはウェイト400。
• 複雑な装飾的背景を使用しない — デザインはクリーンなフォトグラフィーとホワイトスペースに依存。
• プライマリUI要素に角丸を使用しない — サイトはほとんどのコンテナに鋭いエッジを使用し、ピルシェイプはボタンに限定。
• インターフェースを雑踏させない — レイアウトはすべての要素間に意図的な、手厚いスペーシングを維持。
• 雑多またはマルチカラーのパレットを使用しない — プロダクトカラーとフォトグラフィーが唯一のクロマティックな変化の源泉。
• 避ける: 大げなマーケティング用語
• 避ける: アグレッシブな販売言語
• 避ける: 感嘆符の過度の使用
• 避ける: 素材の仕様から注意をそらす曖昧で華やかな記述

10

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

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

11

System Prompt

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