厳選・オープン・無料

SSENSE

エディトリアルなストーリーテリングと、端的でタイポグラフィ駆動のミニマルな美学を融合させた、プレミアムファッションeコマースプラットフォーム。

01

デザイン DNA

服も販売するハイファッション誌。写真が物語を推進し、タイポグラフィは静かなインフラとして機能する。

02

カラー

ブラックとグレーの様々なウェイトを使用した厳格なモノクロパレットで、写真に焦点を当てたクリーンなギャラリーのような雰囲気を維持。

03

タイポグラフィ

transitional-serif

• display66px · 400
• heading20px · 400
• body15px · 400
• caption11px · 400

ナビゲーションとユーティリティリンクには幾何学的サンセリフを使用。大文字でトラッキングを設定。 · すべてのエディトリアル見出しと本文には JHA Times Now（トランジショナルセリフ）を使用。 · 大きなディスプレイテキストには極めて tightened リーディングを維持。 · ディスプレイおよび見出しタイポグラフィには、繊細なネガティブ文字間隔を使用。

04

余白

コンテンツブロックを囲む十分なパディングで、スペースのある、息の通りの良いエディトリアルな雰囲気を維持。よく80pxの垂直マージンを使用。

05

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

セクションを区切り、記事カードの境界を定義するために使用する、繊細な1pxの水平線。

06

レイアウト

大きなヒーロー画像に続き、広い画像、積み重ねられたテキストブロック、水平リストを組み合わせた混合レイアウトを含む、非対称なエディトリアルグリッド。

07

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

インタラクティブ要素のスムーズなhover遷移 · 画像hover時の繊細なスケーリングまたはパンニング · シームレスなページ遷移

テキストリンクの繊細なアンダーラインの表示、または色の反転 · 重いアニメーションなしの即時ナビゲーション

08

コンポーネント

• button テキストベースのリンク。ユーティリティナビゲーションには大文字サンセリフを使用することが多く、塗りつぶしの背景ではなく、hoverステートに依存。
• card タイポグラフィを下に配置したボーダーレスの写真カード、または上または下に1pxのボーダーを持つ分割カード。
• chip なし
• input 視覚的に存在せず
• hero タイトなトラッキングを備えた巨大なカスタムタイポグラフィを基軸とする、全幅写真レイアウト。

09

文体と禁止事項

• トーン 客観的でクール、エディトリアル的に距離を置いた雰囲気。
• 見出し インパクトのための、タイトにトラッキングされた、サンセリフまたは強力なトランジショナルセリフの全角大文字。
• CTA 十分な間隔を設けた、控えめな大文字テキストリンク。

• ドロップシャドウを使用しない — サイトはフラットな画像と繊細なボーダーで奥行きを表現している。
• 明るいアクセントカラーを導入しない — サイトは黒、白、グレーの厳格なモノクロパレットを適用している。
• 過度に丸みのある角を使用しない — サイトはすべてのレイアウト要素と画像に鋭く四角いエッジを維持している。
• 過度に太く-boldなタイポグラフィを使用しない — サイトは洗練された美学のために繊細なフォントウェイト（100-400）を使用している。
• インターフェースを雑然とさせない — サイトは広大な量の余白を使用して、プレミアムでギャラリーのような体験を生み出している。
• 装飾的または遊び心のあるアイコンを使用しない — インターフェースはクリーンなタイポグラフィと高品質な写真のみに依存している。
• 避ける: 過度に熱狂的なマーケティング言語
• 避ける: 明るく高彩度のカラー
• 避ける: 丸みのあるUI要素やソフトシャドウ

10

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

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

11

System Prompt

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