YOUR FREEDOM 自分を新しくする自由を。

もっとファッションを自由に楽しもう。GU ならトレンドアイテムがこの価格で。

¥990
¥1,490
5月12日まで期間限定価格

01 / Colors

カラーパレット

Brand
Brand Red
#ee0000
価格・SALE テキスト専用
Dark Teal
#274558
セカンダリブランドカラー
Semantic
Danger / Sale
#ee0000
エラー・セール価格
Success / Eco
#468254
サステナビリティ・エコ
Cookie Toggle
#3860be
Cookie UI トグル
Text
Text Primary
#000000
本文テキスト(純黒)
Text Dark
#1b1b1b
一部の本文テキスト
Text Secondary
#696969
補助テキスト
Surface & Border
Background Primary
#ffffff
ページ背景
Background Secondary
#f4f4f4
セクション背景(185箇所使用)
CTA Surface
#000000
Primary CTA 背景
Border
#dadada
区切り線・ボタン枠

02 / Typography

タイポグラフィ階層

YOUR FREEDOM 自分を新しくする自由を。
GUNextLight (Inter 300) / 32px / 300 / lh: 1.4 / ls: 0.015emHero Title
春の新作コレクション
GUNextLight (Inter 300) / 24px / 300 / lh: 1.4 / ls: 0.015emSection H3
トレンドを気軽に楽しめるファッションブランド。毎日のコーディネートをもっと自由に。GU ならではの価格とデザインで、あなたらしいスタイルを見つけてください。
GUNextLight (Inter 300) / 17px / 300 / lh: 1.5 / ls: 0.015emBody
Cookie 設定の見出し
Hiragino Pro (Noto Sans JP 700) / 16px / 700 / lh: 1.5Cookie H2
5月12日まで期間限定価格
GUNextLight (Inter 300) / 13px / 300 / lh: 1.5 / color: #ee0000Sale Term
¥1,990
GUNextRegular (Inter 700) / 30px / 700 / lh: 1.2 / ls: 0.015em / color: #ee0000Price
¥990
GUNextRegular (Inter 700) / 36px / 700 / lh: 1.2 / Hero PricePrice (Large)
補助テキスト — メタ情報やキャプション
GUNextLight (Inter 300) / 14px / 300 / lh: 1.5 / color: #696969Sub Text

03 / Product

商品カード

¥990
5月12日まで期間限定価格
税込

04 / Buttons

ボタンバリエーション

GU は border-radius: 2px(ほぼ直角)が基本。Pill 型は App Download 等の特殊用途のみ。UNIQLO(radius: 0)よりわずかに角丸。

直角コーナー(radius: 2px)

Primary CTA
bg #000 / color #fff / radius 2px / 14px 700
商品を見る Secondary
border #000 / radius 2px / 14px 300
エコ商品を見る Eco
bg #468254 / radius 2px
特集を見る Dark Teal
bg #274558 / radius 2px

Pill 型(radius: 999px)

App をダウンロード App Download Pill
bg rgba(255,255,255,0.9) / border #dadada / radius 999px

Cookie Toggle

ON (#3860be)
OFF (#dadada)
Cookie Toggle / radius 17px

05 / Cards

カードコンポーネント

リネンブレンドコレクション

天然素材の風合いを活かした、夏に映えるリネンブレンドアイテム。涼しげな着心地とこなれたシルエットが魅力。

¥1,990
商品を見る

マシュマロパンプス

累計販売数1000万足突破の大人気シリーズ。ふわふわのクッションで、長時間歩いても疲れにくい。

¥1,490
商品を見る

GU ACTIVE

動きやすさとデザインを両立したスポーツライン。ジムでもタウンユースでも使えるアクティブウェア。

¥990
商品を見る

06 / Forms

フォーム要素

Default --- border: #dadada / radius: 2px
Focus --- border: #000000 / box-shadow: 0 0 0 1px #000
半角数字でご入力ください
Error --- border: #ee0000 / box-shadow: 0 0 0 1px #ee0000

07 / Elevation

奥行き表現

GU はフラットデザインを基調。影の使用は極めて控えめで、商品カード・ボタンは影なし。

Level 0: Flat
shadow: none
ほぼすべての要素
Level 1
0 2px 4px rgba(0,0,0,0.1)
ヘッダー固定時
Level 2
0 4px 12px rgba(0,0,0,0.15)
モーダル・ドロワー

08 / Layout

レイアウト原則

HEADER: Sticky / 高さ 64px / ロゴ + カテゴリタブ + アイコン群
HERO: 中央寄せ / bg #f4f4f4 / Light 見出し (300) + 赤価格 (700)
PRODUCT GRID: minmax(200px, 1fr) / モバイル 2列 / デスクトップ 4列
MAX WIDTH: 1440px / padding 16px (mobile) / 24px (desktop)
GUTTER: 8px - 16px
SECTIONS: #ffffff と #f4f4f4 の交互配置

Spacing Scale

4px
XS
8px
S
16px
M
24px
L
32px
XL
48px
XXL

Font Note

フォントの注記

GU は独自の GUNextLight(weight 300)と GUNextRegular(weight 700)の2種類の Web フォントを配信しています。このプレビューでは Inter(Google Fonts, weight 300/700)を代替として使用しています。和文は Noto Sans JP(weight 300/700)で代替しています。

最大の特徴は font-weight 300 が支配的であること。見出し・本文・説明文のすべてが weight 300 で統一され、太字は価格表示(GUNextRegular, 700)と Cookie UI(700)のみに限定されています。この「空気感のある軽やかなタイポグラフィ」が GU のブランドアイデンティティです。

もうひとつの特徴は letter-spacing: 0.015em(0.48px)の全要素グローバル適用。UNIQLO が letter-spacing: normal を基本とするのに対し、GU はすべてのテキスト要素にこの微小なトラッキングを適用しています。この均一な字間が「空気感」を生む鍵になっています。

和文フォールバックは Hiragino Kaku Gothic Pro(ProN ではなく Pro)が最優先。BIZ UDGothic / BIZ UDPGothic が含まれるのは UNIQLO にはない特徴で、UD(ユニバーサルデザイン)フォントへのフォールバックを確保しています。palt / kern は一切使用せず、ベタ組(等幅送り)で統一されています。