北欧、暮らしの道具店 DESIGN.md

北欧、暮らしの道具店（https://hokuohkurashi.com/）のデザイン仕様書。 株式会社クラシコムが運営する、北欧雑貨・日用品を中心としたライフスタイル EC サイト。読みもの（コラム）と商品販売を融合した「メディアコマース」の先駆者。 実サイトの computed style に基づいて記述（2026-05-09 取得）。

1. Visual Theme & Atmosphere

• デザイン方針: 雑誌のような読みもの体験と EC を融合。写真と短い文章でライフスタイルを提案する「エディトリアルコマース」
• 密度: 中〜高。トップページは読みものカード・商品カード・ニュースが混在するマガジン型レイアウト
• キーワード: 温もり、ナチュラル、エディトリアル、家庭的、游ゴシック
• 特徴:
  • 游ゴシック Medium ベース — 全体を游ゴシック Medium で統一。Noto Sans JP をフォールバックに持つが、主役は游ゴシック。Windows のウェイト問題を "Yu Gothic Medium" 明示指定で対策
  • YakuHanJPs の部分適用 — 記事カード等の一部要素に YakuHanJPs（約物半角化・小さいサブセット）を適用。nav やヘッダーには未適用
  • 小さなベースフォント 12px — body のベースが 12px。記事本文は 13–15px に拡大するが、UI テキストは 12px のまま
  • イエロー NEW バッジ #fff100 — 新着記事に鮮やかなイエロー背景のバッジ。サイト全体の暖色トーンの中で目を引くアクセント
  • コーラルレッド NEW バッジ #fb5c5c — ナビゲーションの "New" バッジに使用。pill 形状（radius 100px）
  • 水色セクション #f2f7f9 — 読みものセクション・カテゴリセクションの背景に淡い水色。柔らかい区切り
  • ライトグレー背景 #f7f7f7 — ニュースティッカー等の背景に使用

2. Color Palette & Roles

Primary（ブランドカラー）

• ブランドカラーは特定の単色ではなく、温かみのあるニュートラルトーン全体がブランドを表現する

Accent

• Yellow (#fff100): 新着記事バッジ背景。ビビッドイエロー
• Coral Red (#fb5c5c): ナビゲーション "New" バッジ背景。pill 形状
• Search Active (#444444): 検索パネルのアクティブタブ背景

Neutral（ニュートラル）

• Text Primary (#444444): 本文テキスト、ナビゲーション、見出し。サイト全体の基本テキスト色
• White (#ffffff): ページ背景、ヘッダー背景
• Background Light (#f7f7f7): ニュースティッカー、配送情報背景
• Background Blue (#f2f7f9): 読みものセクション、カテゴリセクション背景
• Border — 明示的なボーダーは少なく、背景色の切り替えでセクションを分離

Text

• Text Primary (#444444): すべてのテキストに使用される単一テキスト色。純黒を避け、柔らかさを出す
• Text Inverted (#ffffff): ダーク背景上のテキスト（検索パネルタブ等）

3. Typography Rules

3.1 和文フォント

ゴシック体（全般）:

• 游ゴシック Medium / Yu Gothic Medium（Windows のウェイト問題対策で Medium を明示）
• 游ゴシック体 / YuGothic（macOS フォールバック）
• ヒラギノ角ゴ ProN W3 / Hiragino Kaku Gothic ProN
• Noto Sans JP（Web フォントフォールバック）
• メイリオ / Meiryo（Windows 最終フォールバック）

約物半角化:

• YakuHanJPs（記事カード・本文の一部に適用）

3.2 欧文フォント

• サンセリフ: Helvetica Neue, Arial — 游ゴシックの欧文グリフより後にフォールバック

3.3 font-family 指定

css/* 標準（ヘッダー、ナビ、商品一覧等） */
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体,
  -apple-system, "system-ui",
  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
  "Noto Sans JP", メイリオ, Meiryo,
  "Helvetica Neue", Arial, sans-serif;

/* 記事カード・読みもの本文（約物半角化あり） */
font-family: YakuHanJPs, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体,
  -apple-system, blinkmacsystemfont,
  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
  "Noto Sans JP", メイリオ, meiryo,
  "Helvetica Neue", arial, sans-serif;

フォールバックの考え方:

• "Yu Gothic Medium" が先頭。Windows での游ゴシック Regular（細すぎる）問題を Medium 指定で回避
• -apple-system, system-ui を中間に挟む。macOS のシステムフォント（San Francisco）にもフォールバック
• YakuHanJPs は記事テキスト等の限定要素のみ。全体には適用しない
• blinkmacsystemfont は Chrome 向けのシステムフォント指定

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文の行間 (line-height): 1.6–1.71。游ゴシックの標準的な読みやすい行間
• 見出しの行間: 1.6
• 本文の字間 (letter-spacing): normal。追加の字間は一切適用しない
• 見出しの字間: normal

ガイドライン:

• letter-spacing は全要素で normal。サイト全体を通じて明示的な字間調整がない
• 行間は 1.6 を基本とし、記事系コンテンツで 1.71 にわずかに広げる

3.6 禁則処理・改行ルール

cssword-break: break-all;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt 未使用。游ゴシック Medium の標準字詰めに任せている

3.8 縦書き

該当なし

4. Component Stylings

Buttons

北欧、暮らしの道具店は CTA ボタンの露出が少ない。テキストリンクとカードタップが主なインタラクション手段。

バッジ（New）

• Background: #fb5c5c（ナビ）/ #fff100（記事）
• Text: #ffffff（ナビ）/ #444444（記事）
• Padding: 0 3px
• Border Radius: 100px（pill）
• Font Size: 11px

Cards

記事カード

• Background: #ffffff
• Border: none
• 画像: アスペクト比固定、角丸なし
• タイトル: YakuHanJPs + 游ゴシック 15px / weight 700 / line-height 1.71
• 説明文: 15px / weight 400 / line-height 1.71 / color #444444
• NEW バッジ: #fff100 背景、左上に表示

商品カード

• Background: #ffffff
• 商品画像: 正方形
• 商品名・価格: 12–13px / weight 400

Inputs

検索入力

• 検索パネルはオーバーレイで表示
• タブ切替: "商品検索" / "記事検索"
• アクティブタブ: #444444 背景 / #ffffff テキスト

5. Layout Principles

Spacing Scale

Container

• Max Width: 約 1060px（推定）
• Padding (horizontal): 16–20px

Grid

• 商品グリッド: 4–5 カラム（デスクトップ）
• 記事カード: 2–3 カラム
• セクション間の区切りは背景色の切り替え（#ffffff → #f2f7f9 → #f7f7f7）

6. Depth & Elevation

完全にフラットなデザイン。シャドウは一切使わず、背景色の切り替えのみで視覚的階層を構成する。

7. Do's and Don'ts

Do（推奨）

• フォントは游ゴシック Medium を先頭に指定し、Windows でのウェイト問題を防ぐ
• テキスト色は #444444 一色に統一する
• 記事テキストには YakuHanJPs を適用して約物を半角化する
• セクション区切りは背景色の切り替え（#ffffff / #f2f7f9 / #f7f7f7）で表現する
• 新着を示すバッジにはビビッドイエロー #fff100 を使う
• 行間は 1.6 を基本とする

Don't（禁止）

• letter-spacing を追加しない — このサイトは字間調整を一切行わない
• font-feature-settings: "palt" を使わない — 游ゴシック Medium の標準字詰め
• 黒 #000000 をテキストに使わない — すべて #444444
• ボタンやカードにシャドウを付けない — 完全フラット
• ブランドカラーとして特定の色を前面に出さない — 温かみのあるニュートラルトーンが全体

8. Responsive Behavior

Breakpoints

タッチターゲット

• ナビゲーションリンク: padding 8px で 44px 以上のタップ領域
• カード全体がタップ対象

フォントサイズの調整

• 見出し: 20px を維持
• 本文: 13–15px を維持
• ベーステキスト: 12px を維持

9. Agent Prompt Guide

クイックリファレンス

Primary Text: #444444
Background: #ffffff
Background Blue: #f2f7f9
Background Light: #f7f7f7
Accent Yellow: #fff100
Accent Coral: #fb5c5c
Font: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, -apple-system, "system-ui", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", メイリオ, Meiryo, "Helvetica Neue", Arial, sans-serif
Body Size: 13-15px
Line Height: 1.6

プロンプト例

北欧、暮らしの道具店のデザインシステムに従って、読みもの一覧ページを作成してください。
- テキスト色: #444444 一色
- フォント: 游ゴシック Medium ベース、記事テキストに YakuHanJPs を追加
- 背景色の切り替えでセクション区切り（#ffffff / #f2f7f9）
- NEW バッジ: #fff100 背景、11px
- カード: フラット、シャドウなし
- letter-spacing: normal（追加の字間なし）