厳選・オープン・無料

Knickey

インクルーシブなアンダーウェア向けの、写真を重視した洗練されたeコマースインターフェースです。

01

デザイン DNA

商品写真を存分に活かす、静かで厳選されたカタログのような印象です。

02

カラー

自然色系のニュートラルカラーと柔らかいグリーンが、落ち着いたオーガニックなパレットを構成します。

03

タイポグラフィ

didone-serif · humanist-sans

• display64px · 400
• headline32px · 400
• body17px · 400
• caption14px · 400

ヒーロー番号や大きな強調箇所には、ディドーンセリフを使用します。 · すべてのインタラクティブ要素と本文テキストには、ヒューマニストサンスを使用します。 · サンセリフ要素では、一貫して幅広な文字間隔を維持します。

04

余白

4と8のパディングの倍数による一貫したリズムが、息の通ったレイアウトを生み出します。

05

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

チェックボックス入力以外に、目に見えるボーダーはありません。モーダルは余白と背景のコントラストに依存します。

06

レイアウト

分割レイアウト。中央のテキストカラムの両側に、フルブリードの写真が配置されます。

07

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

モーダルオーバーレイのフェードとスケールによる出現エフェクト。 · インタラクティブ要素に対する繊細なトランスフォームトランジション。

ボタンの背景色に対する、繊細なトランジション。 · 右上の小さな「X」アイコンによるモーダルの閉じる操作。

08

コンポーネント

• button ボーダーラジウスのない、角張ったダーク色の塗りつぶしボタン。白の大文字テキスト。
• card コンテナではなく写真に依存する、画像主体のボーダーレスカード。
• chip 目立つものはありません。
• input 角が丸みを帯び、ソフトなグレーボーダーを持つカスタムチェックボックス。
• hero 写真と中央揃えのテキストを分割構成した、フルスクリーンまたは大きなモーダルオーバーレイ。

09

文体と禁止事項

• トーン 自信に満ち、落ち着いており、歓迎するような調子。
• 見出し 簡潔で直接的、価値に焦点を当てたスタイル（例：「15% OFFになります」）。
• CTA 明確で大文字、アクション导向（例：「15% OFFを受取る」）。

• 重いドロップシャドウを使用しないこと。スクリーンショットではフラットでボーダーレスなサーフェスが示されています。
• 明るく彩度の高いアクセントを使用しないこと。スクリーンショットでは、落ち着いたグリーンとダークなティールが示されています。
• ディスプレイ用に遊び心のある丸みのあるサンセリフフォントを使用しないこと。スクリーンショットでは鋭いディドーンセリフが示されています。
• 長い段落を中央揃えにしないこと。スクリーンショットでは、短いコピーのみを中央に配置した狭いテキストカラムが維持されています。
• コンテンツカードに不要なボーダーを追加しないこと。スクリーンショットではボーダーレスのイメージが示されています。
• ダークモードやハイコントラストのテーマを使用しないこと。スクリーンショットでは、明るくクリーム色のオフホワイト背景が示されています。
• 避ける: 強引または緊急性を煽る言葉遣い
• 避ける: 過度にカジュアルまたはスラングを交えた表現
• 避ける: 視覚的な雑踏や騒々しい背景

10

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

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

11

System Prompt

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