厳選・オープン・無料

Giganticcandy

キャンディブランドのための、アーバンインスパイアで大胆なEコマースサイト。オーバーサイズのディスプレイタイポグラフィとハイコントラストレイアウトを採用。

01

デザイン DNA

スケートパークのステッカーアエティックと、プレミアムキャンディブランディングの融合。

02

カラー

ハイコントラスト、ほぼモノクロで、1つの高彩度アクセント（トマトレッド）、および純白と黒の戦略的使用。

03

タイポグラフィ

geometric-sans · humanist-sans

• display96px · 700
• heading48px · 700
• body16px · 400

ディスプレイフォントと見出しは大文字変換を使用。 · 本文は可読性のために1.8という十分なline-heightで設定。 · 大きなディスプレイテキストにはtightなトランキングを適用。

04

余白

垂直リズムは4pxグリッドに基づき、大きなセクションには十分なpaddingを配置。

05

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

プライマリインクカラーを使用した1pxの実線ボーダー。

06

レイアウト

コンテンツのための単一カラム中央揃えレイアウト、およびフルブリードヒーローイメージ。

07

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

hover状態の滑らかなトランジション · ヒーロー要素のパララックスまたはゆっくりしたフェードイン

ボタンの控えめなopacity変化またはカラー反転。 · 標準的なカーソル変化に依存した、最小限のフィードバック。

08

コンポーネント

• button 白の大文字テキストを持つ黒の実線背景、またはインクカラーのアウトライン。
• card クリーンな白い背景に商品画像を配置した商品カード。
• hero 雰囲気のある大きな写真背景と、大胆で中央揃えのタイポグラフィを持つ、フルビューポートセクション。

09

文体と禁止事項

• トーン 遊び心があり、大胆で、少しふざけている。
• 見出し 短く、インパクトがあり、常に大文字。
• CTA 直接的でアクション志向。「Shop」や「Scroll」をよく使用。

• 小さく繊細なタイポグラフィを使用しない — スクリーンショットでは代わりに大きく太字のディスプレイテキストが使用されている。
• くすんだパステルカラーパレットを使用しない — スクリーンショットでは代わりにハイコントラストの黒、白、レッドオレンジのパレットが使用されている。
• 複雑なマルチカラムレイアウトを使用しない — スクリーンショットでは代わりにクリーンな単一カラム中央揃えレイアウトが使用されている。
• 丸みのある、ふわふわした形状を使用しない — スクリーンショットでは代わりにシャープでほぼ長方形の要素が使用されている。
• 控えめで隠れたナビゲーションを使用しない — スクリーンショットでは代わりに明確な固定ヘッダーと明白なリンクが使用されている。
• 見出しにセリフフォントを使用しない — スクリーンショットでは代わりにジオメトリックおよびグロテスクサンセリフフォントが使用されている。
• 避ける: フォーマルまたは企業的な言葉遣い
• 避ける: 控えめまたは控えめな主張
• 避ける: 小さく、控えめなタイポグラフィ

10

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

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

11

System Prompt

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