HUMAN MADE（ヒューマンメイド） DESIGN.md

HUMAN MADE（https://humanmade.jp/）のデザイン仕様書。 2026-05-10 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: NIGO(R) が手がけるストリートウェア／ライフスタイルブランド。ヴィンテージアメリカーナとポップカルチャーへの愛を、クリーンなグラフィックデザインで表現。Avenir Next LT Pro（ジオメトリック・サンセリフ）を主軸に、font-weight 400 のみという極端なウェイト統一で「力の抜けた洗練」を実現。CTAは radius 0px の完全な直角 で、グラフィカルかつ大胆。プロダクト写真のカラフルさとミニマルな UI のコントラストが HUMAN MADE の世界観を形作る
• 密度: EC サイト型のプロダクトショーケース。商品画像を主役にした構成で、テキストは最小限。Shopify ベースの堅実なグリッドレイアウト
• キーワード: ストリートウェア、ポップカルチャー、ヴィンテージ、シャープCTA、カラフル、Avenir Next、weight 400 統一
• 特徴: font-weight 400 のみという単一ウェイトシステムが最大の特徴（footer の微小ボタン 600 を除く）。見出し・本文・CTA すべてが同一ウェイトで、サイズと letter-spacing の変化だけで階層を表現する。CTAは完全な直角（radius 0px）で、ストリートカルチャーのグラフィック的な力強さを演出。ブランドアクセントの赤 #ea2222 は NIGO(R) のハートモチーフに由来し、プロダクトカラーも多彩（ネイビー、イエロー、オリーブ、ピンク等）。テキストカラーは純黒を避けたチャコール #121212

2. Color Palette & Roles

Primary（ブランドカラー）

HUMAN MADE のカラーパレットはプロダクト由来の多彩さが特徴。UI 自体は #121212 チャコール と #ffffff 白 の二極構成だが、商品から溢れる色がページ全体のトーンを決める。

• Charcoal (#121212): CTA 背景・見出しテキスト・フッター等のキーエレメント（rgb 18, 18, 18）— 純黒ではないソフトブラック
• Heart Red (#ea2222): ブランドアクセント。NIGO(R) のハートモチーフに由来する赤（rgb 234, 34, 34）— 11 件出現

Accent（プロダクト由来のアクセントカラー）

商品写真・カテゴリを彩るカラーパレット。UI 要素ではなくプロダクトの世界観を表現する色。

• Navy (#083a6b): ネイビー系プロダクト（rgb 8, 58, 107）— 11 件出現
• Yellow (#ffd83b): ポップなイエロー（rgb 255, 216, 59）— 9 件出現
• Olive (#808000): ミリタリー調オリーブ（rgb 128, 128, 0）— 6 件出現
• Green (#7fbf50): フレッシュグリーン（rgb 127, 191, 80）— 6 件出現
• Sky Blue (#399ede): ライトブルー（rgb 57, 158, 222）— 5 件出現
• Pink (#f9aae7): ポップピンク（rgb 249, 170, 231）— 5 件出現
• Orange (#ff9800): オレンジ（rgb 255, 152, 0）— 4 件出現
• Tan (#c7b376): ヴィンテージベージュ（rgb 199, 179, 118）— 4 件出現
• Brown (#a5652a): レザーブラウン（rgb 165, 101, 42）— 4 件出現

Text & Neutral

• Text Primary (#121212): 見出し・本文テキスト（rgb 18, 18, 18）
• Text Muted (rgba(18,18,18,0.85)): サブナビゲーション・補足テキスト — 85% 不透明度
• Text Footer (rgba(18,18,18,0.75)): フッターテキスト — 75% 不透明度
• Text on Dark (#ffffff): チャコール背景上の白テキスト
• Gray (#707070): グレーテキスト（rgb 112, 112, 112）
• Sale Red (#ed1c24): セール価格の赤（rgb 237, 28, 36）— Heart Red とは別のやや明るい赤
• Gray Card (#999999): プロダクトカード背景（rgb 153, 153, 153）— 15 件出現

Surface

• Surface White (#ffffff): ページ背景
• Surface Charcoal (#121212): CTA・フッター・ダークセクション背景
• Carousel Dot (rgba(255,255,255,0.55)): カルーセルインジケーター

3. Typography Rules

3.1 和文フォント

HUMAN MADE は和文フォントに游ゴシック体ファミリーを使用。Avenir Next LT Pro（欧文主体）のフォールバックとして配置されている。

• 游ゴシック体 (YuGothic): font-family 内で和文の表示を担当
• 游ゴシック ("Yu Gothic"): Windows 向けフォールバック
• Hiragino Sans: macOS / iOS 向けフォールバック

3.2 欧文フォント

• avenir-next-lt-pro: Adobe Fonts から配信されるジオメトリック・サンセリフ。すべてのテキストの先頭に指定される HUMAN MADE のシグネチャーフォント
• Google Fonts 代替: Nunito Sans（丸みのあるジオメトリック・サンセリフ、Avenir Next と字形が近い）または Outfit

補足: avenir-next-lt-pro は Adobe Fonts のドメインライセンス制フォント。preview.html では Nunito Sans を代替として使用する。一部要素では "Avenir Next"（ローカルフォント名）が指定されているケースもある

3.3 font-family 指定

css/* メイン（Adobe Fonts 版） */
font-family: avenir-next-lt-pro, sans-serif, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", Meiryo, sans-serif;

/* 一部要素（ローカル版） */
font-family: "Avenir Next", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", Meiryo, sans-serif;

/* Google Fonts 代替 */
font-family: "Nunito Sans", sans-serif, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", Meiryo, sans-serif;

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

• 欧文フォント（Avenir Next LT Pro）を先頭に配置 — 欧文グリフの品質を優先
• 和文は游ゴシック体 → Yu Gothic → Hiragino Sans → メイリオの順で、OS 問わず対応
• Avenir Next のクリーンなジオメトリック感が HUMAN MADE のブランドトーン

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

3.5 行間・字間

• ボディ基本の行間: line-height: 1.0（16px / 16px）— 極端に詰めた行間。EC サイトのレイアウト効率重視
• 本文パラグラフの行間: line-height: 1.5〜1.6（24-25.6px / 16px）— 読みやすさが必要な長文では標準的な行間に
• 見出しの行間: line-height: 1.2〜1.3 — タイトなヘッディング
• 本文の字間: letter-spacing: 0.6px（16px ベースで約 0.0375em）— HUMAN MADE 全体で最も多い字間値
• ナビ・ボタンの字間: letter-spacing: 0.8〜1px（約 0.05〜0.077em）— やや広めでトラッキング感を出す
• 価格の字間: letter-spacing: 0.6px — 本文と同一

ガイドライン:

• letter-spacing は 0.6px がベースライン。ナビ・CTA・ラベルでは 0.8〜1px に広げる
• 行間は用途で大きく変わる: レイアウト目的の body は 1.0、読む本文は 1.5〜1.6
• すべてが weight 400 のため、サイズと字間の変化だけで視覚的階層を構成する

3.6 OpenType 機能

css/* 特別な OpenType 設定なし */
/* Avenir Next LT Pro はデフォルトのカーニングが有効 */

• palt: グローバル適用なし。和文テキストが少なく、欧文フォント主体のため
• kern: Avenir Next LT Pro のデフォルトカーニングに依存
• 日本語テキストは letter-spacing で間隔を制御

3.7 改行・禁則

• Shopify テーマのデフォルト設定に依存
• 特別な禁則処理の指定なし（ブラウザデフォルト）

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（塗りつぶし）

HUMAN MADE の CTA は 完全な直角（radius 0px） が最大の特徴。ストリートカルチャーのグラフィック的な力強さを表現する。

• Background: #121212
• Text: #ffffff
• Border Radius: 0px（完全な直角 — sharp rectangular）
• Padding: 16px 32px（寛大なパディング）
• Font Family: avenir-next-lt-pro, sans-serif, ...
• Font Size: 13px
• Font Weight: 400
• Letter Spacing: 1px

Ghost CTA（アウトライン）

• Background: transparent
• Text: #121212
• Border: 1px solid #121212
• Border Radius: 0px
• Padding: 16px 32px
• Font Size: 13px
• Font Weight: 400
• Letter Spacing: 1px

ボタンの考え方:

• radius 0px が鉄則。pill でも角丸でもなく、完全な直角。HUMAN MADE のグラフィック・アイデンティティ
• font-weight は 400（CTA テキストも太くしない — ブランド全体の統一）
• パディングは 16px 32px で横にゆったり。存在感を出しつつ、テキストの繊細さを保つ
• letter-spacing 1px で CTA テキストにトラッキング感を付与

Inputs

• Font Family: avenir-next-lt-pro, sans-serif, ...
• Font Size: 14-16px
• Font Weight: 400
• Letter Spacing: 0.98-1px
• Shopify テーマのデフォルトスタイルに準拠

Cards（プロダクトカード）

• Background: #ffffff（一部 #999999 グレー背景）
• Border Radius: 0px（フラット）
• Shadow: なし
• 商品画像 + 商品名（14px / 400）+ 価格（11px / 400 / ls 0.6px）の構成
• セール価格は #ed1c24 の赤で表示

Carousel Indicators

• Active: #ffffff（不透明白）
• Inactive: rgba(255,255,255,0.55)（半透明白）
• Shape: 50% radius（円形ドット）

Section Backgrounds

• Default: #ffffff（白背景が基本）
• Dark: #121212（チャコール）
• Product cards: 一部 #999999（グレー）

5. Layout Principles

Spacing Scale（実測ベース）

Container

• Max Width: 1300px（--base-size: 1300）
• Gutter: 1.6rem（--bs-gutter-x: 1.6rem = 25.6px）

Grid

• Bootstrap ベースのグリッドシステム
• 商品一覧は 2〜4 カラムグリッド
• Gutter: 1.6rem（25.6px）

6. Depth & Elevation

HUMAN MADE はシャドウを使わないフラットデザイン。色面（白 / チャコール / グレー）のコントラストで空間を構成する。

7. Do's and Don'ts

Do（推奨）

• 欧文フォントは Avenir Next LT Pro（または代替の Nunito Sans）を先頭に配置する
• font-weight は原則 400 のみ を使う（唯一の例外は footer 微小要素の 600）
• CTA は radius 0px の完全な直角 にする
• CTA のパディングは 16px 32px でゆったり取る
• テキストカラーは #121212（チャコール）を使う — 純黒を避ける
• letter-spacing は 0.6px をベースに、ナビ・CTA では 0.8〜1px に広げる
• ブランドアクセントには #ea2222（Heart Red）を使う
• セール価格には #ed1c24 を使う
• プロダクトの多彩な色（ネイビー、イエロー、ピンク等）を写真で活かす
• 本文パラグラフの行間は 1.5〜1.6 に設定する

Don't（禁止）

• CTA に border-radius を付けない（0px が HUMAN MADE のアイデンティティ）
• pill ボタン（radius 9999px）を使わない
• font-weight 700 や bold を見出し・CTA に使わない（400 統一が原則）
• 純黒 #000000 をテキストに使わない（#121212 がブランドのトーン）
• letter-spacing: 0（normal）にしない — すべてのテキストに字間が設定されている
• UI 要素にプロダクトカラー（#ffd83b, #f9aae7 等）を使わない — これらは商品の色であり UI の色ではない
• palt をグローバル適用しない — 欧文フォント主体のため和文の字詰めは不要
• box-shadow を使わない（フラットデザインを維持）
• テキストに装飾（underline, italic）を多用しない — ミニマルで均一な印象を保つ

8. Responsive Behavior

Breakpoints（Bootstrap ベース）

モバイル時の調整

• h4（24px）→ 18-20px 程度に縮小
• 商品グリッドは 1〜2 カラムに折り返す
• ナビゲーションはハンバーガー化
• CTA の radius 0px と letter-spacing は維持（ブランドアイデンティティ）

タッチターゲット

• CTA ボタンは padding 16px 32px で十分なタップ領域を確保
• ナビ項目は 14-16px のため、モバイル時はタップ領域の拡張が必要

9. Agent Prompt Guide

クイックリファレンス

Brand: HUMAN MADE（ヒューマンメイド）
Origin: NIGO(R) によるストリートウェア／ライフスタイルブランド
Charcoal: #121212
Heart Red: #ea2222 (brand accent)
Sale Red: #ed1c24
Text Primary: #121212
Text Muted: rgba(18,18,18,0.85)
Text Footer: rgba(18,18,18,0.75)
Background: #ffffff
Font: avenir-next-lt-pro, sans-serif, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", sans-serif
Google Fonts Alt: "Nunito Sans", sans-serif（Avenir Next LT Pro の代替）
palt: 適用しない（欧文フォント主体）
Body: 16px / 400 / line-height 1.0 / letter-spacing 0.6px
Body Paragraph: 16px / 400 / line-height 1.6 / letter-spacing 0.8px
Heading 2: 20px / 400 / line-height 1.2 / letter-spacing 0.6px
Heading 4: 24px / 400 / line-height 1.3 / letter-spacing 0.6px
CTA Style: filled (bg #121212, text #fff, radius 0px, padding 16px 32px)
Ghost CTA: outline (bg transparent, text #121212, border 1px solid #121212, radius 0px)
CTA Font: 13px / 400 / letter-spacing 1px
Shadow: 使用しない
Grid: Bootstrap (max-width 1300px, gutter 1.6rem)

プロンプト例

HUMAN MADE（ヒューマンメイド）のデザインシステムに従って、新商品一覧ページを作成してください。
- フォントは avenir-next-lt-pro（または代替 "Nunito Sans"）を先頭に、游ゴシック体をフォールバック
- font-weight は 400 のみ（太字は使わない）
- 見出しは 20-24px / 400 / line-height 1.2-1.3 / letter-spacing 0.6px / color #121212
- 本文は 16px / 400 / line-height 1.5-1.6 / letter-spacing 0.8px / color #121212
- 価格は 11px / 400 / letter-spacing 0.6px。セール価格は #ed1c24
- CTA「カートに入れる」は bg #121212, text #fff, radius 0px, padding 16px 32px
- アウトラインCTA「もっと見る」は bg transparent, border 1px solid #121212, radius 0px
- 背景は白 #ffffff。ダークセクションは #121212
- grid は max-width 1300px, gutter 1.6rem
- シャドウは一切使わない

字詰め・組版の重要ポイント

1. 欧文優先の font-family: Avenir Next LT Pro を先頭に配置し、和文は游ゴシック体にフォールバック。欧文のジオメトリックなクリーンさがブランドの基調
2. weight 400 の完全統一: 見出し・本文・CTA・ナビすべてが同一ウェイト。サイズと letter-spacing の差だけで階層を作るのが HUMAN MADE の設計思想
3. letter-spacing 0.6px がベースライン: 全テキストに最低 0.6px の字間を設定。CTA・ナビでは 0.8〜1px に広げてトラッキング感を出す
4. radius 0px の直角CTA: pill でも角丸でもない完全な直角。ストリートカルチャーのグラフィック的な力強さを表現する HUMAN MADE のアイデンティティ
5. #121212 チャコール: 純黒（#000000）ではない。RGB (18, 18, 18) のわずかにソフトなブラックが、ポップな商品写真と調和する
6. Heart Red #ea2222: NIGO(R) のハートモチーフに由来するブランドアクセント。UI のアクセントというよりブランドシンボルの色

取得日: 2026-05-10 出典: https://humanmade.jp/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出