Futsuno UI Design System

ふつうのショップ（futsuno.shop）のD2Cブランド向けデザインシステム。

概要

このデザインシステムは、LP（ランディングページ）およびSNS広告バナーの構築に対応するReactコンポーネントライブラリです。Figma Makeとの連携を想定して設計されており、Atomic Design方法論に基づいて構成されています。

インストール

npm install @super_studio/futsuno-ui
# or
pnpm add @super_studio/futsuno-ui
# or
yarn add @super_studio/futsuno-ui

使用方法

スタイルのインポート

import '@super_studio/futsuno-ui/styles.css';

デザイントークン

import { colors, typography, spacing } from '@super_studio/futsuno-ui/tokens';

// バナー専用トークン
import { bannerSizes, bannerTypography, bannerCtaHeight } from '@super_studio/futsuno-ui/tokens';

LP用コンポーネント

import { 
  // Atoms
  Button, AnchorButton, Text, Image, Icon, ProductImage, TextLink,
  Label, SpeechBubble, CircleBadge, MediaLogo,
  // Molecules
  FaqParts, UserVoice, AnchorNavItem, CarouselItem,
  RankingBadge, DiscountBadge, CheckListItem,
  // Organisms
  CountdownTimer, FloatingButton,
  Section, SectionBlock, NumberedSection, Feature, ColumnArticle, Carousel,
  KeyVisual, AnchorNav, Review, Ranking, Media, Product,
  Faq, Cta, CtaDiscount, Column, Header, Footer,
  // Templates
  LpTemplate, ProductLpTemplate,
  // Pages
  SampleLpPage,
  // Layouts
  Container, Grid, Stack, Spacer, Blank,
} from '@super_studio/futsuno-ui/lp';

バナー用コンポーネント

import {
  // Atoms
  BannerText, VerticalText, BannerImage, ProductCutout, MaskedImage,
  ArrowIcon, DiscountTag, SeasonLabel, SupervisionBadge, ProductLogo,
  // Molecules
  CatchCopy, CtaStrip, DiscountPanel, DiscountStrip,
  PhotoGrid, ProductGroup, ProductDiscountStrip, ProductInfoStrip,
  // Organisms
  BannerCanvas, BannerContent,
  // Templates
  CollageTemplate, GiftTemplate, ProductSingleTemplate,
  ProductLineupTemplate, FramedProductTemplate,
  ProductPromotionTemplate, ProductShowcaseTemplate,
} from '@super_studio/futsuno-ui/banner';

商品LP（シンプル構成）

import { ProductLpTemplate } from '@super_studio/futsuno-ui/lp';

function LandingPage() {
  return (
    <ProductLpTemplate
      keyVisual={{
        copyLines: ['食卓を特別な時間に', '600年の歴史を持つ調味料'],
        badges: [
          { title: '累計販売数', text: '150,000食\n突破' },
          { title: '満足度', text: '96.5%' },
          { title: 'リピート率', text: '89%' },
        ],
        footnotes: ['※1 2023年調べ', '※2 当社調べ', '※3 定期購入者'],
      }}
      product={{
        sectionTitle: '商品情報',
        productName: '（ふつうの）煎り酒',
        description: 'こだわりの調味料です...',
        specs: [
          { label: '内容量', value: '150ml' },
          { label: '原材料', value: '日本酒、梅干し、かつお節' },
        ],
      }}
      cta={{
        background: 'gold',
        productName: '（ふつうの）煎り酒',
        productPrice: '¥1,980',
        productQuantity: '150ml',
        promotionLabel: '本ページ限定!',
        promotionTitle: ['初回限定', '50%OFF'],
        buttonText: '購入する',
        buttonVariant: 'red',
      }}
      faqItems={[
        { question: '賞味期限は？', answer: '製造日より1年間です。' },
        { question: '保存方法は？', answer: '開封後は冷蔵庫で保存してください。' },
      ]}
      footerProps={{
        copyright: '© 2026 Company',
        companyName: '株式会社サンプル',
      }}
    />
  );
}

SNS広告バナー

import { CollageTemplate, ProductPromotionTemplate } from '@super_studio/futsuno-ui/banner';

// レシピ写真コラージュバナー
function RecipeBanner() {
  return (
    <CollageTemplate
      size="landscape"
      headline="『一つ星シェフ』がこだわり抜いた"
      subHeadline="どんな料理も別格になるクラフト調味料"
      images={[
        { src: "/recipe1.jpg", alt: "レシピ1" },
        { src: "/recipe2.jpg", alt: "レシピ2" },
        { src: "/recipe3.jpg", alt: "レシピ3" },
        { src: "/recipe4.jpg", alt: "レシピ4" },
      ]}
      ctaText="まずは1瓶からお試し"
    />
  );
}

// 商品プロモーションバナー
function PromoBanner() {
  return (
    <ProductPromotionTemplate
      size="portrait"
      variant="gold"
      headline="一流の(ふつう)を"
      subHeadline="いつもの食卓に"
      supervisionTitle="有名日本料亭"
      supervisionName="乃木坂しん"
      products={[
        { src: "/ponzu.png", height: "300px" },
        { src: "/irizake.png", height: "280px" },
      ]}
      discountLabel="このページ限定"
      discountText="約15%OFF"
    />
  );
}

ディレクトリ構成

src/
├── tokens/                 # デザイントークン（共通）
│   ├── colors.ts           # カラートークン
│   ├── typography.ts       # タイポグラフィトークン
│   ├── spacing.ts          # スペーシングトークン
│   └── banner.ts           # バナー専用トークン（サイズ・タイポグラフィ）
│
├── assets/                 # 共通アセット
│   ├── logos/              # 商品ロゴSVG（1行/2行バリエーション）
│   └── products/           # 商品画像PNG（切り抜き）
│
├── utils/                  # ユーティリティ
│   └── cn.ts               # clsx + tailwind-merge
│
├── lp/                     # LP用コンポーネント（Atomic Design）
│   ├── atoms/              # 原子 - Button, Text, Image, Icon, TextLink, Label, SpeechBubble, CircleBadge, MediaLogo
│   ├── molecules/          # 分子 - FaqParts, UserVoice, AnchorNavItem, CarouselItem, RankingBadge, DiscountBadge, CheckListItem
│   ├── organisms/          # 有機体 - KeyVisual, Section, Cta, CtaDiscount, Header, Footer, CountdownTimer, FloatingButton 等
│   ├── templates/          # テンプレート - LpTemplate, ProductLpTemplate
│   ├── pages/              # ページ - SampleLpPage
│   ├── layouts/            # レイアウト - Container, Grid, Stack, Spacer, Blank
│   └── assets/             # LP専用アセット（ロゴ, アイコンSVG）
│
├── banner/                 # バナー用コンポーネント（Atomic Design）
│   ├── atoms/              # 原子 - BannerText, BannerImage, DiscountTag, SupervisionBadge 等
│   ├── molecules/          # 分子 - CatchCopy, CtaStrip, DiscountStrip, PhotoGrid, ProductGroup 等
│   ├── organisms/          # 有機体 - BannerCanvas, BannerContent
│   └── templates/          # テンプレート - Collage, Gift, ProductSingle, ProductLineup,
│                           #               FramedProduct, ProductPromotion, ProductShowcase
│
├── theme/                  # テーマ用コンポーネント（将来実装）
│
├── index.ts                # メインエントリポイント
└── styles.css              # グローバルスタイル

guidelines/                 # Figma Make向けガイドライン
├── lp/
│   ├── Guidelines.md       # LP生成ガイドライン
│   └── DesignReview.md     # LPデザインレビュー評価指標
└── banner/
    ├── Guidelines.md       # バナー生成ガイドライン
    └── DesignReview.md     # バナーデザインレビュー評価指標

デザイントークン

Colors

| カテゴリ | トークン | HEX | 用途 | |---------|---------|-----|------| | 基本 | black | #040404 | プライマリテキスト | | 基本 | white | #FFFFFF | 背景、反転テキスト | | 背景 | background.gray | #F2F3F1 | セクション背景 | | 背景 | background.gold | #978E5F | 強調セクション | | テキスト | text.700 | #464646 | セカンダリテキスト | | アクセント | accent.gold | #978E5F | バッジ、プレミアム | | アクセント | accent.red | #CC5E58 | CTA、購入ボタン | | ボタン | button.red | #CC5E58 | プライマリCTA | | ボタン | button.black | #464646 | セカンダリ |

詳細なカラートークン一覧は guidelines/lp/Guidelines.md を参照してください。

Typography

フォント: Noto Sans JP (Regular 400 / Medium 500 / Bold 700)

| バリアント | サイズ | line-height | letter-spacing | |-----------|-------|-------------|----------------| | h1–h2 | 22–24px | 1.55 | 0.16em | | h3–h4 | 18–20px | 1.35–1.45 | 0.16em | | body-lg–sm | 13–16px | 1.85–1.95 | 0.08em | | caption-lg–xs | 8–12px | 1.45 | 0.08em |

Spacing

4px / 8px / 12px / 16px / 24px / 32px / 40px / 48px

コンポーネント一覧

LP コンポーネント

Atoms（原子）

| コンポーネント | 説明 | |--------------|------| | Button | 購入ボタン（variant: black/red/gold/white, size: lg/md） | | AnchorButton | ページ内リンクボタン | | Text | タイポグラフィ（variant: h1〜caption-xs, color: 6種） | | Image | 画像（aspectRatio: 1:1/4:3/16:9/auto） | | ProductImage | 商品画像 | | Icon | アイコン（15種類） | | TextLink | テキストリンク | | Label | ラベル（variant: dark/gold） | | SpeechBubble | 吹き出し（variant: tips/decorative） | | CircleBadge | 円形バッジ（variant: bordered/plain） | | MediaLogo | メディア掲載ロゴ |

Molecules（分子）

| コンポーネント | 説明 | |--------------|------| | FaqParts | FAQ個別アイテム（アコーディオン） | | UserVoice | ユーザーレビュー・評価 | | AnchorNavItem | ナビゲーションリンクアイテム | | CarouselItem | カルーセルスライドアイテム | | RankingBadge | ECランキングバッジ | | DiscountBadge | 割引表示バッジ | | CheckListItem | チェックマーク付きリストアイテム |

Organisms（有機体）

コンテンツコンポーネントは Section でラップして使用します（タイトル・背景は Section が担当）。

| コンポーネント | 説明 | 備考 | |--------------|------|------| | Section | セクションコンテナ | title: string | string[], background: white/gray/gold/custom | | KeyVisual | メインビジュアル | variant: 8種 | | AnchorNav | アンカーナビゲーション | layout: 2x2/1x4 | | Cta | CTA（購入導線） | background: gold/gray | | CtaDiscount | CTA（割引価格表示付き） | variant: gold/white | | Column | マルチカラム | columns: 2/3 | | Header | ヘッダー | variant: default/bordered | | Footer | フッター | variant: 4種 | | CountdownTimer | カウントダウンタイマー | - | | FloatingButton | ウィンドウ下部追従CTA | variant: default/simple | | SectionBlock | ブロックセクション | layout: 4種 ← Section でラップ | | NumberedSection | 番号付きセクション | layout: 3種 ← Section でラップ | | Feature | 商品特徴（カード形式） | ← Section でラップ | | ColumnArticle | コラム記事リスト | ← Section でラップ | | Carousel | カルーセル | ← Section でラップ | | Review | お客様の声 | ← Section でラップ | | Ranking | ランキング表示 | ← Section でラップ | | Media | メディア掲載 | ← Section でラップ | | Product | 商品情報 | ← Section でラップ | | Faq | FAQセクション | ← Section でラップ |

Templates（テンプレート）

| コンポーネント | 説明 | |--------------|------| | LpTemplate | 基本LPレイアウト（自由構成） | | ProductLpTemplate | 商品LP用テンプレート（KeyVisual → Product → CTA → FAQ → Footer） |

Pages（ページ）

| コンポーネント | 説明 | |--------------|------| | SampleLpPage | サンプルLPページ（16セクション + FloatingButton） |

Layouts（レイアウト）

| コンポーネント | 説明 | |--------------|------| | Container | コンテンツ幅・パディング制御 | | Grid | CSSグリッドレイアウト | | Stack | Flexboxスタックレイアウト | | Spacer | 要素間スペース | | Blank | セクション間スペーサー（size: sm/md/lg） |

バナーコンポーネント

Atoms（原子）

| コンポーネント | 説明 | |--------------|------| | BannerText | 横書きバナーテキスト（5バリアント × 3サイズ） | | VerticalText | 縦書きテキスト | | BannerImage | バナー用画像（object-fit: cover） | | ProductCutout | 商品切り抜き画像 | | MaskedImage | マスク画像 | | ArrowIcon | 矢印アイコン（right/down） | | DiscountTag | 割引タグ（large/inline/badge） | | SeasonLabel | シーズンラベル（装飾ライン付き） | | SupervisionBadge | 監修バッジ（5カラー × 2シェイプ） | | ProductLogo | 商品ロゴ表示 |

Molecules（分子）

| コンポーネント | 説明 | |--------------|------| | CatchCopy | ヘッドライン + サブヘッドライン | | CtaStrip | 全幅CTA帯（light/dark/transparent） | | DiscountPanel | 割引パネル | | DiscountStrip | 割引帯（white/gold/dark） | | PhotoGrid | 写真グリッド（4-column/2x2） | | ProductGroup | 商品画像グループ | | ProductDiscountStrip | 商品 + 割引表示帯（6カラーバリアント） | | ProductInfoStrip | 商品情報パネル（6カラーバリアント） |

Organisms（有機体）

| コンポーネント | 説明 | |--------------|------| | BannerCanvas | バナーサイズ制御コンテナ | | BannerContent | バナーコンテンツラッパー |

Templates（テンプレート）

| コンポーネント | 説明 | Figmaテンプレート | |--------------|------|------------------| | CollageTemplate | 写真コラージュ型 | テンプレートA | | GiftTemplate | ギフト訴求型 | テンプレートB | | ProductSingleTemplate | 単品商品訴求型（縦書き） | テンプレートC | | ProductLineupTemplate | 商品ラインナップ型 | - | | FramedProductTemplate | フレーム付き商品型 | テンプレートD | | ProductPromotionTemplate | 商品プロモーション型 | テンプレートE | | ProductShowcaseTemplate | 商品ショーケース型 | テンプレートF/G |

共通アセット

| カテゴリ | パス | 内容 | |---------|------|------| | 商品ロゴ | src/assets/logos/ | SVG形式、1行/2行バリエーション（11商品） | | 商品画像 | src/assets/products/ | PNG形式、切り抜き商品画像（10商品） |

開発

# 依存関係のインストール
npm install

# 開発モード（watchモード）
npm run dev

# プレビューサーバー起動
npm run preview:dev

# ビルド
npm run build

# 型チェック
npm run typecheck

エクスポート構成

| サブパス | 内容 | |---------|------| | @super_studio/futsuno-ui | 全コンポーネント（tokens + lp + banner + theme） | | @super_studio/futsuno-ui/tokens | デザイントークン（colors, typography, spacing, banner） | | @super_studio/futsuno-ui/lp | LPコンポーネント | | @super_studio/futsuno-ui/banner | バナーコンポーネント | | @super_studio/futsuno-ui/theme | テーマコンポーネント（将来実装） | | @super_studio/futsuno-ui/styles.css | グローバルスタイル |

Figma Make 連携

このデザインシステムはFigma Makeとの連携を想定しています。

Figmaファイルとの対応関係

LP

| Figma | Design System | |-------|---------------| | Tokens | @super_studio/futsuno-ui/tokens | | Atoms | lp/atoms | | Molecules | lp/molecules | | Organisms (Blocks) | lp/organisms | | Templates | lp/templates | | Pages | lp/pages | | Layouts | lp/layouts |

Banner

| Figma | Design System | |-------|---------------| | Banner Tokens | @super_studio/futsuno-ui/tokens (banner.ts) | | Banner Atoms | banner/atoms | | Banner Molecules | banner/molecules | | Banner Organisms | banner/organisms | | Banner Templates | banner/templates |

コンポーネント階層

Pages (ページ)
  └── Templates (テンプレート)
        └── Organisms (有機体)
              ├── そのまま使えるコンポーネント (KeyVisual, AnchorNav, Column, Cta, CtaDiscount, Header, Footer, CountdownTimer, FloatingButton)
              ├── セクションコンテナ (Section)
              └── コンテンツコンポーネント ← Section でラップして使用
              │     (SectionBlock, NumberedSection, Feature, ColumnArticle, Carousel,
              │      Review, Ranking, Media, Product, Faq)
              └── Molecules (分子)
                    └── Atoms (原子)
Layouts (レイアウト) - 全階層で使用可能 (Container, Grid, Stack, Spacer, Blank)

詳細ガイドライン

Figma Makeでの生成精度向上のための詳細なガイドラインは以下を参照してください。

• LP ガイドライン: guidelines/lp/Guidelines.md
• LP デザインレビュー評価指標: guidelines/lp/DesignReview.md
• バナー ガイドライン: guidelines/banner/Guidelines.md
• バナー デザインレビュー評価指標: guidelines/banner/DesignReview.md

ライセンス

MIT