厳選・オープン・無料

Article

モダンな家具とホームデコレーションのための、クリーンで写真を活用したeコマースプラットフォーム。

01

デザイン DNA

モダンな暮らしのためのキュレーションされたカタログ

02

カラー

写真のカラーと鮮やかなコーラルのアクセントを持つ、ハイコントラストなニュートラルベース。

03

タイポグラフィ

geometric-sans

• display48px · 700
• h132px · 700
• body16px · 400
• small14px · 400

ボタンとナビゲーションリンクには大文字を使用 · 見出しにはタイトなトレッキングと太字ウェイトを使用 · 本文には快適な行高でレギュラーウェイトを使用

04

余白

一貫した4pxグリッドと、セクション間に十分な余白。

05

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

1px solid #2E2E2E

rgba(0, 0, 0, 0.08) 0px 4px 8px 0px · rgba(0, 0, 0, 0.04) 0px 16px 16px 0px · rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

06

レイアウト

フルワイドのヒーロー画像に続き、製品用の構造化されたグリッド。

07

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

hover時のスムーズなbackground-colorトランジション · UIの状態変化に対する繊細なopacityフェード

繊細な色の変化やアンダーラインの表示 · 色のシフトなどによる即座の視覚的フィードバック

08

コンポーネント

• button ソリッドな白背景と黒ボーダーを持つピル型、テキストは大文字。
• card 下に最小限のテキストを持つクリーンな画像カード。水平スクロールやグリッドで配置されることが多い。
• chip シンプルなテキストベースのカテゴリリンク。
• input プレースホルダーテキストと虫眼鏡アイコンを持つミニマルな検索バー。
• hero 中央にテキストオーバーレイを持つ、フルブリードのライフスタイル写真。

09

文体と禁止事項

• トーン 親しみやすく、理想的で、率直
• 見出し パンチがあり、メリット重視
• CTA 明確で命令形、大文字

• 角丸長方形を使用しない — スクリーンショットではピル型のボタンが使用されている。
• 明るく、馴染まないアクセントカラーパレットを使用しない — スクリーンショットでは、控えめなニュートラルベースにコーラルのアクセントが1つだけ使用されている。
• カードに複雑なシャドウを使用しない — スクリーンショットでは、最小限でフラットな写真が使用されている。
• セリフフォントを使用しない — スクリーンショットでは、サンセリフ書体のみが使用されている。
• 詰め込んだテキストブロックを使用しない — スクリーンショットでは、十分な余白と短いコピーが使用されている。
• メインレイアウトに暗い背景を使用しない — スクリーンショットでは、主に白とオフホワイトの背景が使用されている。
• 避ける: 過度に技術的な専門用語
• 避ける: 攻撃的な営業言語
• 避ける: 不必要ないい加減な言葉

10

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

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

11

System Prompt

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