一瞬で紫外線カット、着るUVカット。エアリズムUVカットメッシュフルジップパーカ。
※ ウィメンズ エアリズムUVカットメッシュフルジップパーカは期間限定価格です。実際の価格・取り扱いは販売店舗・販売チャネルにより異なります。
| Default | Hover | Pressed | |
|---|---|---|---|
| Primary | #000 | #2A2A2A | #3E3E3E |
| Secondary | #6A6A6A | #767676 | #ABABAB |
| Tertiary | #F4F4F4 | #FAFAFA | #FAFAFA |
| Accent (Blue) | #005DB5 | #006ED7 | #007AFF |
| Attention (Red) | #EE0000 | #EF5555 | #FF728D |
| Positive (Green) | #00AB0F | #34BC3F | #55C75E |
UNIQLO の最大の特徴: CJK と Latin で別々の type-scale。日本語は同一 px でも欧文より字面が大きく見えるため、CJK は Latin より少し小さい基準値(0.9375rem = 15px)に設定されている。
| Step | CJK (rem / px) | Latin (rem / px) | CJK Sample | Latin Sample |
|---|---|---|---|---|
| −2 | 0.6875rem (11px) | 0.75rem (12px) | 価格表示 | UNIQLO |
| −1 | 0.8125rem (13px) | 0.875rem (14px) | 価格表示 | UNIQLO |
| base | 0.9375rem (15px) | 1rem (16px) | 価格表示 | UNIQLO |
| +1 | 1.0625rem (17px) | 1.125rem (18px) | 価格表示 | UNIQLO |
| +2 | 1.1875rem (19px) | 1.25rem (20px) | 価格表示 | UNIQLO |
| +3 | 1.375rem (22px) | 1.5rem (24px) | 価格表示 | UNIQLO |
| +4 | 1.625rem (26px) | 1.75rem (28px) | 価格表示 | UNIQLO |
| +5 | 1.875rem (30px) | 2rem (32px) | 価格表示 | UNIQLO |
| +6 | 2.25rem (36px) | 2.25rem (36px) | 価格表示 | UNIQLO |
| +7 | 2.5rem (40px) | 2.625rem (42px) | 価格表示 | UNIQLO |
UNIQLO のデザインシステムは border-radius: 0(直角) が基本ルール。検索バー・大型 CTA のみ border-radius: 999px(pill) を別カテゴリとして運用。
UNIQLO は独自の UniqloPro ファミリ(Light / Regular / Bold)を Web フォントで配信し、価格表示や英字数字に使っています。このプレビューでは Inter(Google Fonts)を代替として使用しています。
和文は 「ヒラギノ角ゴ Pro」(ProN ではなく Pro)を最優先で指定する Apple Japan 系の思想を踏襲しています。フォント stack の最先頭には Twemoji Country Flags を置き、国旗絵文字を全プラットフォームで一貫表示させています。
最大の特徴は CJK と Latin で別々の type-scale を持つこと。同じ "Step +3" でも CJK は 1.375rem (22px)、Latin は 1.5rem (24px) と異なる値になっています。日本語が同一 px でも欧文より字面が大きく見える視覚特性に対応した本格的な多言語デザインシステム設計です。
見出しは font-weight: 300(Light) という珍しい設計で、繊細でモードな印象を出しています。一般的な太字見出しに慣れていると違和感がありますが、これが UNIQLO の voice です。