Hands (hands.net) DESIGN.md

ハンズ（https://hands.net/、旧 東急ハンズ）のデザイン仕様書。 創造的な暮らしを支えるライフスタイルストア。DIY・文具・コスメ・アウトドアなど幅広い品揃え。 実サイトの computed style 実測（2026-06 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ダークグリーンのヘッダーと白背景のコントラストで「信頼と実用性」を表現。装飾を抑え、商品情報へのアクセスを最優先にした実直なリテール UI
• 密度: 本文 12px という小さめのベースサイズで高密度な情報表示。line-height 1.5 を全体で統一し、コンパクトだが読みにくくはならない
• キーワード: ダークグリーン、高密度リテール、実用的、システムフォント、フラットボタン
• 特徴:
  • ブランドカラーは ダークグリーン #004022〜#006b30。ヘッダー・ナビ・CTA すべてグリーン系で統一
  • Web フォントを使わず、ヒラギノ角ゴ ProN + 游ゴシック のシステムフォントスタックで運用。ローカル環境でもそのまま再現できる
  • ボタンは 角張ったフラットデザイン（radius 0〜4px）。ピル型は使わない
  • CTA の多くは 白背景 + グリーン文字 のアウトラインスタイル。グリーン背景のソリッドボタンはヘッダー・検索に限定
  • タグ・バッジ類に オレンジ #c84d06 や ピンク #d2234e のアクセントを使い、商品の状態（新着・キャンペーン等）を色で分類
  • CSS Custom Properties は使わない伝統的な CSS 設計
  • ダークモード非対応

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand — Green Scale

Neutral

Accent

Semantic（推奨値）

実サイトにはエラー／成功色は明示的に表面化していない。リテール EC 向けに推奨する補完値:

• Danger: #cc0000（赤。在庫切れ・エラー）
• Success: #006b30（ブランドグリーンを流用）
• Warning: #c84d06（オレンジタグ色を流用）

3. Typography Rules

3.1 和文フォント

• ゴシック体: ヒラギノ角ゴ ProN（macOS / iOS）を最優先。次いで 游ゴシック Medium（Windows / macOS）
• 明朝体: 使用しない（サイト全体ゴシック統一）
• 注意: 「ProN」であって「Pro」ではない。JIS X 0213:2004 字形を使用

3.2 欧文フォント

• 専用の欧文フォントは持たない
• ヒラギノ角ゴ ProN / 游ゴシックに含まれる欧文グリフをそのまま使用
• Helvetica Neue / Arial 等の欧文書体は font-family に含まれない

3.3 font-family 指定

css/* 全要素共通 */
font-family: "Hiragino Kaku Gothic ProN", "游ゴシック Medium",
  "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif;

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

• ヒラギノ角ゴ ProN（macOS）を最優先
• 游ゴシックは Medium ウェイトを明示指定してから通常名を置く（Windows での細字化対策）
• 欧文専用書体は挟まない。和文フォントの欧文グリフで統一
• 最後に sans-serif で generic family

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

実測値（トップ／特集ページ、2026-06 取得）

3.5 行間・字間

行間 (line-height) -- 実測:

• 本文 (12px): 1.5（18px / 12px）
• 見出し (22px): 1.5（33px / 22px）
• ナビ・タイトル (16px): 1.5（24px / 16px）
• タグ (14px): 1.0（14px / 14px）-- 一行高さ
• ヘッダー上部 (12px): 2.33（28px / 12px）-- タッチターゲット確保

字間 (letter-spacing) -- 実測:

• 全要素: normal（0）。明示的な letter-spacing の指定なし

ガイドライン:

• line-height は一貫して 1.5 で統一されている（タグ除く）
• letter-spacing の調整は行わない方針。字詰めは和文フォントのメトリクスに委ねる
• 12px の小さい本文でも line-height 1.5 で最低限の可読性を確保

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: break-all;
overflow-wrap: break-word;
line-break: strict;

• 商品名やカテゴリ名は折り返し発生を前提とした横幅設計
• 長い URL やプロモコードは overflow-wrap: break-word で折り返す

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt / kern の明示的な有効化はなし
• システムフォントの既定メトリクスに任せ、字間調整を行わない方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（グリーンソリッド） -- ヘッダーナビ・検索ボタン

• Background: #004022
• Text: #ffffff
• Padding: 8px 16px
• Border Radius: 0px（角張ったフラット）
• Font: 16px, weight 700
• Border: none

Secondary CTA（白アウトライン + グリーン文字） -- "投稿をすべて見る"・"イチ押し商品一覧へ"

• Background: #ffffff
• Text: #006b30
• Border: 1px solid #e0e0e0
• Padding: 8px 16px
• Border Radius: 2px
• Font: 14px, weight 400

Tertiary（白 + ダークテキスト） -- "一覧を見る"

• Background: #ffffff
• Text: #333333
• Border: 1px solid #e0e0e0
• Padding: 8px 16px
• Border Radius: 4px
• Font: 14px, weight 400

Tab Button -- カテゴリ切替タブ

• Background: transparent
• Text: #4d4d4d
• Border: 1px solid #e0e0e0
• Padding: 6px 12px
• Border Radius: 2px
• Font: 12px, weight 400

Category Link（特集ページ）

• Background: #ffffff
• Text: #006600
• Border: none
• Padding: 8px 16px
• Border Radius: 4px
• Font: 14px, weight 400

Inputs

• Background: #ffffff
• Border: 1px solid #e0e0e0
• Border (focus): 1px solid #006b30（推奨: ブランドグリーン）
• Border Radius: 0px（ヘッダー検索は角型）
• Padding: 8px 12px
• Font: 12px, weight 400
• Height: 36px

Cards

• Background: #ffffff
• Border: 1px solid #e0e0e0
• Border Radius: 0px（角型）または 4px（わずかな丸み）
• Padding: 16px
• Shadow: なし（フラットデザイン）

Header

• Background: #004022（ダークグリーン、不透明）
• Position: fixed / sticky
• Height: 約 90px（上部リンクバー + メインナビの2段構成）
• 上部リンクバー: #d9f1dd（薄緑）背景に 12px テキスト

Footer

• Background: #004022（ヘッダーと同じダークグリーン）
• Text: #ffffff
• h2: 16px / 700 / #333333（白背景セクション内）

5. Layout Principles

Spacing Scale

Container

• Max Width: 1040px 程度（実測: 中央寄せコンテンツ領域）
• Padding (horizontal): mobile 12px / desktop 16〜24px

Grid

• 商品一覧: 4〜5 カラム（デスクトップ）、2 カラム（モバイル）
• 特集・記事: 3 カラム（デスクトップ）
• Gutter: 16px

6. Depth & Elevation

• 実測ではほぼすべて box-shadow: none のフラットデザイン
• 階層感は 背景色の切り替え（#ffffff → #f5f5f5 → #e0e0e0）と ボーダー（1px solid #e0e0e0）で表現
• ヘッダーは #004022 のソリッドカラーで区切り、影は使わない

7. Do's and Don'ts

Do（推奨）

• 和文フォントは ヒラギノ角ゴ ProN を最優先、フォールバックは 游ゴシック Medium → Yu Gothic → sans-serif
• 本文の line-height は 1.5 を全体で統一する
• ブランドカラーのグリーンは #004022（暗）と #006b30（中）の2段階で使い分ける。ヘッダー・ナビには暗め、リンク・CTA テキストには中間を使う
• ボタンは 角張ったフラットスタイル（radius 0〜4px）で統一する
• テキストリンクは #006b30（グリーン） にする
• タグ・バッジは オレンジ #c84d06（定常カテゴリ）と ピンク #d2234e（キャンペーン）を目的で使い分ける
• 情報密度は高めに。本文 12px で多くの情報を一覧表示する

Don't（禁止）

• 主要 CTA に ピル型（radius 9999px）を使わない -- ハンズのボタンは角張ったフラット
• リンクに 青 #0000ff や Tailwind のブルー系 を使わない。リンク色は #006b30（グリーン）
• Web フォント（Noto Sans JP 等）を読み込まない -- システムフォントだけで動くのがハンズの方針
• ヘッダー・フッターに 白背景や薄いグレーを使わない -- #004022 のダークグリーンが必須
• 本文に line-height 1.2 以下 を使わない（12px の小さいテキストでは特に可読性が低下する）
• letter-spacing を明示指定しない -- ハンズの CSS は字間を一切触らない方針
• font-family に ヒラギノ角ゴ Pro（ProN なし） を使わない -- ProN（JIS2004 字形）が正しい

8. Responsive Behavior

Breakpoints

モバイル時の調整

• セクション H2: 22px → 18px
• 本文サイズ: 12px を維持（モバイルでも高密度方針）
• 商品グリッド: 4〜5列 → 2列
• ヘッダー: 2段構成 → 1段 + ハンバーガー
• 上部リンクバー（#d9f1dd）: 非表示

タッチターゲット

• ヘッダーリンク: line-height 28px で最低限のタップ領域を確保
• 主要ボタン: 高さ 36px 以上（padding 8px 16px + 16px font）
• 商品カード: カード全体がタップ領域

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Green Dark (Header/Nav): #004022
Green Primary (Links/CTA text): #006b30
Green Bright: #007236
Green Pale (Link Bar BG): #d9f1dd
Orange Tag: #c84d06
Pink Campaign: #d2234e
Text Primary: #333333
Text Secondary: #4d4d4d
Black (Headings): #000000
Border: #e0e0e0
Surface: #f5f5f5
White: #ffffff

Font: "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif

Body Size: 12px / line-height 1.5 / weight 400 / letter-spacing normal
Heading H2: 22px / line-height 1.5 / weight 700
Nav / Title: 16px / line-height 1.5 / weight 700
Tag: 14px / weight 400-700

Border Radius: 0px（ヘッダー）/ 2px（アウトライン CTA）/ 4px（カテゴリリンク）
Shadow: 基本 none。階層はボーダーと背景色で表現

プロンプト例

ハンズのデザインに従って、商品一覧ページを作成してください。
- フォント: "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif
- ヘッダー: 背景 #004022（ダークグリーン）/ 白文字
- セクション見出し: 22px / weight 700 / color #000000
- 商品タイトル: 16px / weight 700 / color #4d4d4d
- 本文: 12px / weight 400 / line-height 1.5 / color #333333
- テキストリンク: color #006b30
- 主要 CTA（ソリッド）: 背景 #004022 / 白文字 / border-radius 0px / padding 8px 16px
- セカンダリ CTA: 背景 白 / 文字 #006b30 / border 1px solid #e0e0e0 / radius 2px
- タグ: 14px / color #c84d06（オレンジ）
- キャンペーンバッジ: 12px / color #d2234e（ピンク）
- カード: 白背景 / border 1px solid #e0e0e0 / radius 0-4px / shadow none
- 商品グリッド: デスクトップ 4-5列、モバイル 2列
- letter-spacing は指定しない（normal）
- ピル型ボタンは使わない。角張ったフラットデザイン