メンズ ウィメンズ ユニセックス アラタメ

10 YEARS
CLOTHING

着る人も作る人も豊かにする。10年着られる服づくりを通じて、透明性のあるものづくりと持続可能なファッションを提案します。

SHOP NOW ABOUT 10YC

01 / Colors

Color Palette

Dark
Near Black
#141414
ヒーロー・見出し・CTA背景
Text Body
#121212
本文テキスト(一部)
Gray
Gray 500
#858585
セカンダリテキスト・価格・補足
Gray Disabled
rgba(18,18,18,0.55)
無効テキスト・プレースホルダー
Light
Surface Light
#f5f5f5
入力背景・セクション背景
White
#ffffff
ページ背景・CTA背景(outline)
Overlay & Semantic
Overlay
rgba(56,56,56,0.5)
モーダル背景
Error
#c0392b
エラー・在庫切れ(推奨補完値)

02 / Typography

Typography Hierarchy

10年着られる服 — Hero Title
Roboto / 44px / 900 / line-height: 1.09 / letter-spacing: 0.05emヒーロー
セクション見出し — H2 Section
Roboto / 16px / 500 / line-height: 1.25 / letter-spacing: 0.05emセクション
フッター見出し — H5 / Footer Head
Roboto / 15px / 900 / line-height: 1.4 / letter-spacing: 0.05emフッター
サブタイトル — Hero Subtitle / Description テキスト。ブランドの説明や補足情報に使用。
Roboto / 15px / 400 / line-height: 1.53 / letter-spacing: normalヒーロー
本文テキスト — Body。13px のベースサイズはファッション誌的な繊細さを演出する。一般的な日本語サイト(14-16px)より小さく、余白の広さと相まってエディトリアルな雰囲気を作る。ABCabc 123
Roboto / 13px / 400 / line-height: 1.31 / letter-spacing: normal / palt: なし本文
ナビゲーション — Nav Link
Roboto / 13px / 400 / line-height: 1.08 / letter-spacing: 0.05emナビ
コピーライト — Small / Copyright (10px)
Roboto / 10px / 400 / line-height: 1.6フッター

Article Sample

10年着続けるために、
私たちがこだわること

ファストファッションが主流の現代において、10YC は「本当に長く着られる服」を追求しています。素材の選定から縫製、仕上げに至るまで、すべての工程に透明性を持たせることで、着る人と作る人の双方が納得できるものづくりを実現します。

素材へのこだわり

10YC の T シャツには、厳選されたコットンを使用しています。糸の太さ、織りの密度、洗い加工のすべてが「10年後も着心地が変わらない」ことを基準に設計されています。価格の内訳を公開し、原材料費・加工費・輸送費がどのように配分されているかを明示します。

透明性という価値

服の原価を公開する。それは決して安売りの手法ではなく、「適正な価格で、適正なものを届ける」という姿勢の表明です。工場の名前、素材の産地、それぞれの工程にかかるコスト。知ることで、服との関係が変わります。


04 / Buttons

Button Variants

CART に追加する
Primary Filled (checkout)
SHOP を見る
Secondary Outline
戻る
Back / Link
SOLD OUT
Disabled
SMALL
Small
LARGE ACTION
Large
SHOP NOW
Inverted on Dark
LEARN MORE
Outline on Dark

Product Cards

PRODUCT IMAGE
MENS ヘビーウェイト T シャツ
¥8,800
PRODUCT IMAGE
UNISEX ロングスリーブ T シャツ
¥9,900
PRODUCT IMAGE
WOMENS クルーネックスウェット
¥14,300
PRODUCT IMAGE
UNISEX フルジップパーカー
¥16,500

06 / Forms

Form Elements

Default --- bg: #f5f5f5, border: #f5f5f5, radius: 0
Focus --- border: #141414
正しい電話番号を入力してください
Error --- border: #c0392b
Textarea --- 同一スタイル

07 / Elevation

Depth & Elevation (Flat Design)

Level 0: None
影なし。すべてのコンポーネント。box-shadow を一切使わないフラットデザイン
Level 1: Surface Shift
背景を #ffffff → #f5f5f5 に変更。入力欄・セクション背景
Level 2: Dark
背景を #141414 に変更。フッター・CTA背景・ダークセクション
Level 3: Overlay
rgba(56,56,56,0.5)。モーダル・カートオーバーレイ

08 / Layout

Layout & Spacing

Spacing Scale
8px
12px
16px
24px
32px
40px
64px
80px
4-Column Product Grid
Col 1
Col 2
Col 3
Col 4
Content Widths
Page Max Width 1200px
Content Area 960px
Article / Text 620px