山と道（やまとみち / Yamatomichi） DESIGN.md

山と道（https://www.yamatomichi.com/）のデザイン仕様書。 ウルトラライト・ハイキング（UL）の道具を作る山道具メーカー。読み物「JOURNAL」とコミュニティ「HLC」を軸にした、EC より雑誌に近い構成の公式サイト（Next.js ベース）。 最大の特徴は 筑紫ゴシック（Fontworks）＋ Helvetica Now Text の和欧混植、白地に大きく角丸したパネル／カード、プライマリの青 #0386f0、そして 記事カードごとに色を変える多色エディトリアル（ベージュ・オリーブ・コーラル・ピンク…）。CTA は青のピル、カテゴリは淡いグレーのピルタグ。 実サイトの computed style 実測（2026-07-22 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: アウトドア × エディトリアル。プロダクト EC でありながら、トップは JOURNAL 記事の色とりどりのカードが主役。山の空気（自然色）とデジタルの明快さ（青）を同居させる
• 山と道について: 「本当に必要な道具を形にしていく」思想の UL ギア・ブランド。作り手の言葉・ハイキング文化・コミュニティ活動を長文記事で発信するため、Web はメディア的に設計されている
• 密度: 中密度。大きなヒーローパネルの下に、色分けされた記事カードがグリッドで積層する。文字は多いが余白と角丸で軽やかに見せる
• キーワード: 筑紫ゴシック、Helvetica Now、白地、大きな角丸、青 #0386f0、ベージュ #dfceaa、多色カード、ピルCTA、ピルタグ
• 特徴:
  • 和文は 筑紫ゴシック（TsukuGoPr5-R / TsukuGoPro-B）、欧文は Helvetica Now Text（Light / Medium） を合成した和欧混植
  • ウェイトは 本文 300（Light）／強調・見出し 600（Medium 相当） の二択が基本
  • 面は 大きく角丸（ヒーロー／特集パネルは 10〜24px、CTA は 26〜30px のピル、タグは 14px のピル）。ただし 記事一覧カードは radius 0
  • プライマリ色は 青 #0386f0（リンク／主要 CTA パネル／「一覧を見る」ボタン）
  • 記事カードは 1 枚ごとに背景色が変わる多色設計。ベージュ・オリーブ・ゴールド・コーラル・ピンク・クリーム等を巡回させ、誌面の楽しさを出す
  • ブランドマークは円形にレイアウトした「ULTRALIGHT HIKING 山と道」の英字リング

2. Color Palette & Roles

実測値。CSS Custom Properties はほぼ未使用（--swiper-theme-color: #007aff 等ライブラリ由来のみ）。色は各コンポーネントに直接指定されている。ブランドの主軸は「青 #0386f0 ＋ ベージュ #dfceaa」の二本柱。

Brand

• Yamatomichi Blue (#0386f0): プライマリ。主要 CTA パネル・「一覧を見る」ボタンに使う鮮やかな青。リンク文字は近縁の #0085ee、ボタンの一部は #1e88e5 と微差の青が併存する
• Trail Beige (#dfceaa): 準ブランドカラー。出現頻度が青に次いで高い、砂・枯草を思わせる暖色ベージュ。地色・記事カード・図版背景に多用され、山と道の「自然」を担う

Editorial Card Palette（記事カードの多色）

記事カードは背景色を巡回させる。文字色は明度に応じて黒／白を切り替える。

• Olive (#9db033) — 白文字
• Gold (#d3ac45) — 白文字
• Sky (#47a2e3) — 白文字
• Coral (#f25745) — 白文字
• Pink (#f171c4) — 白文字
• Slate (#7f8896) — 白文字
• Mint (#bed387) — 黒文字
• Peach (#fad7b9) — 黒文字
• Cream (#fffaea) — 黒文字
• Lavender (#e3dde1) — 黒文字

Neutral（背景・面）

• White (#ffffff): ページ背景（body）
• Panel Grey (#eeeeee): 図版・メニュー画像の地
• Tag Grey (#ebebeb): カテゴリバッジの地
• Line Grey (#9d9d9d): アウトライン・ボタン枠線
• Text Black (#000000): 本文・見出しテキスト
• Text on Color (#ffffff): 濃色カード・青パネル上のテキスト

Semantic

• 独立したエラー／警告色は前面にはほぼ出ない。実装が必要なら、エラーは記事パレットの #f25745（コーラル）を転用し、成功・情報は青 #0386f0 を流用すると世界観に収まる

3. Typography Rules

和文 筑紫ゴシック・欧文 Helvetica Now Text を 1 フォント名に合成した和欧混植スタック。ウェイトは Light(300) と Medium(600) の二段で、palt は明示適用していない。

3.1 和文フォント

• ゴシック体（Light 本文用）: 筑紫ゴシック Pr5 R（TsukuGoPr5-R）→ ヒラギノ角ゴ ProN W3 → sans-serif
• ゴシック体（Bold 見出し用）: 筑紫ゴシック Pro B（TsukuGoPro-B）→ ヒラギノ角ゴ ProN W6 → sans-serif
• 筑紫ゴシックは Fontworks（LETS）の Web フォント。ヒューマニストで温かみのある字面が山と道の個性を担う

3.2 欧文フォント

• サンセリフ（本文）: Helvetica Now Text Light
• サンセリフ（見出し）: Helvetica Now Text Medium
• 実際の宣言では和文フォント名と欧文フォント名が 1 つの family 名として連結されている（例: TsukuGoPr5-R-HelveticaNowTextLight）。CSS では下記のように和欧を並べて再現する

3.3 font-family 指定

css/* 本文（Light） */
font-family: "TsukuGoPr5-R", "Helvetica Now Text", "ヒラギノ角ゴ ProN W3",
             "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 300;

/* 見出し・強調（Medium/Bold） */
font-family: "TsukuGoPro-B", "Helvetica Now Text", "ヒラギノ角ゴ ProN W6",
             "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 600;

/* 入力フォーム（和文ゴシックにフォールバック） */
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;

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

• 筑紫ゴシックが読めない環境ではヒラギノ角ゴ ProN → sans-serif に落とす
• 欧文を和文グリフより優先したい箇所は Helvetica Now Text を前に置く
• 筑紫が無い場合でも「ヒューマニストなゴシック」の印象を保つため、末尾は必ず sans-serif

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

• 見出し・強調は 600、読み物本文は 300。line-height は概ね 1.4 で統一

3.5 行間・字間

• 本文の行間 (line-height): 1.4 前後（16px→22.4px、18px→25.2px）。エディトリアルながら詰め気味で、カード内に多くの文字を収める
• 見出しの行間: 1.4（48px→67.2px、24px→33.6px）と本文と揃える
• 字間 (letter-spacing): normal（0）。筑紫ゴシックの字面をそのまま活かす

ガイドライン:

• 読み物本文は 16〜18px / line-height 1.6〜1.8 まで広げると長文記事で読みやすい（トップのカードは 1.4 で密に）
• letter-spacing は 0 を基本に。英字大見出しのみ僅かに詰めてよい

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt は明示適用していない */

• 実測は normal。筑紫ゴシックのベタ組みを活かす。見出しで詰めたい場合のみ "palt" 1 を局所適用

3.8 縦書き

• 該当なし（全編横組み）

4. Component Stylings

Buttons

Primary（青ピル CTA）

• Background: #0386f0（一部 #1e88e5）
• Text: #ffffff
• Border Radius: 26〜30px（ピル）
• Padding: 10px 24px
• Font: 筑紫ゴシック B, 20px, weight 600
• 例: 「一覧を見る」

Secondary（アウトライン・ラベル）

• Background: transparent
• Text: #0085ee（青）または #000000
• Border: 1px solid #9d9d9d
• Border Radius: 10px
• 例: 記事バナー「山と道の考えるウルトラライトハイキング」

Tag / Category（ピルタグ）

• Background: #ebebeb
• Text: #000000
• Border Radius: 14px（ピル）
• Padding: 3px 10px
• Font Size: 14px
• 例: COMMUNITY / INFORMATION / PLAYLIST

Inputs

• Background: #ffffff
• Border: 1px solid #dddddd
• Border (focus): 1px solid #0386f0
• Border Radius: 8px
• Padding: 10px 14px
• Font: ヒラギノ角ゴ ProN, 14〜16px, weight 300
• Text Color: #000000

Cards

特集／ヒーローパネル（角丸）

• Background: 画像、または #0386f0 などのブランド色
• Border Radius: 16〜24px（大きめの角丸）
• Padding: 内容により可変（テキストは中央〜下寄せ）
• Shadow: なし（フラット。色面と画像で存在感を出す）

記事一覧カード（角ゼロ・多色）

• Background: 記事ごとに巡回する多色（§2 参照）
• Text: 明度に応じ黒／白
• Border Radius: 0
• Padding: 16px
• カードタイトルは 20px / weight 600

5. Layout Principles

Spacing Scale

Container

• Max Width: 1280px 目安
• Padding (horizontal): 16〜24px（モバイルは 16px）

Grid

• Columns: 12
• Gutter: 16〜24px
• トップは「大きなヒーロー2分割 → 3カラムの記事カード群」の積層。カード間は 16px 前後

6. Depth & Elevation

• 基本はフラット。奥行きは 色分けと角丸で表現し、影は最小限に

7. Do's and Don'ts

Do（推奨）

• 和文 筑紫ゴシック＋欧文 Helvetica Now の混植を維持し、末尾を sans-serif にする
• 本文は weight 300、見出し・強調は weight 600 の二段で組む
• プライマリ CTA は青 #0386f0 のピル、カテゴリは淡グレーのピルタグにする
• 記事カードは多色パレットを巡回させ、明度で黒／白文字を切り替える
• ヒーロー・特集は大きな角丸、記事一覧カードは角ゼロ、と使い分ける

Don't（禁止）

• 明朝体を使わない（山と道はゴシック一系統）
• 青を複数のまったく別の色相に散らさない（#0386f0 系にまとめる）
• ベージュ #dfceaa を無視して真っ白一辺倒にしない（自然色が個性）
• すべてのカードに影を付けて重くしない（色面と角丸で軽く見せる）
• letter-spacing を過度に広げない（normal が基本）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px。ピル CTA・タグは縦 padding で確保

フォントサイズの調整

• モバイルでは h1 48px → 28〜32px、カードタイトル 20px → 18px 程度に縮小
• 本文 16px は維持。line-height は据え置き

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #0386f0   （青 / リンク・主要CTA）
Accent:        #dfceaa   （ベージュ / 自然色の地）
Text Color:    #000000
Background:    #ffffff
Font (body):   "TsukuGoPr5-R", "Helvetica Now Text", "ヒラギノ角ゴ ProN W3", sans-serif  (weight 300)
Font (head):   "TsukuGoPro-B", "Helvetica Now Text", "ヒラギノ角ゴ ProN W6", sans-serif  (weight 600)
Body Size:     16px
Line Height:   1.4（長文は1.6〜1.8）
Letter Spacing:normal
CTA:           青ピル radius 26–30px / タグ 淡グレーピル radius 14px

プロンプト例

山と道のデザインシステムに従って、JOURNAL 記事一覧ページを作成してください。
- 和文フォント: 筑紫ゴシック（TsukuGoPr5-R / TsukuGoPro-B）、欧文 Helvetica Now Text
- 本文 weight 300 / 見出し weight 600、line-height 1.4、letter-spacing 0
- 背景は白。ヒーローは大きな角丸パネル（16〜24px）で青 #0386f0 を使う
- 記事カードは 1 枚ごとに背景色を巡回（ベージュ #dfceaa / オリーブ #9db033 / コーラル #f25745 / ピンク #f171c4 …）、明度で黒白文字を切替
- カテゴリは淡グレー #ebebeb のピルタグ（radius 14px）
- 主要 CTA「一覧を見る」は青 #0386f0 のピル（radius 26–30px、白文字）