Audio-Technica DESIGN.md

オーディオテクニカ（https://www.audio-technica.co.jp/）のデザイン仕様書。 1962年創業のプロフェッショナルオーディオ機器メーカー。 Puppeteer による computed style 実測値（2026-05-26 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: プレシジョン・テクニカル。音響機器メーカーとしての精密さと信頼感を、シャープなエッジと抑制されたカラーパレットで表現
• 密度: 製品カタログ型。カルーセルで製品を回遊させつつ、ナビカードで用途別に誘導する構成
• キーワード: シャープ、テクニカル、プレミアム、ミニマル、精密
• 特徴: border-radius をほぼ使わない（0px）直線的なデザイン。FontPlus によるヒラギノ角ゴ ProN のウェブフォント配信と、英文ディスプレイ用の Univers Next Pro Condensed の組み合わせが特徴。ナビゲーションラベルの letter-spacing: 0.2em が日本語プレミアム感を強調。ゴールド（#daa521）のアクセントが温かみのある高級感を添える

2. Color Palette & Roles

Primary（ブランドカラー）

• Black (#000000): メインテキスト色。純粋な黒を使用
• Gold (#daa521): 会員登録CTA、プレミアムアクセント。温かみのあるゴールド

Semantic（意味的な色）

• Info Blue (#0478c1): Cookie同意ボタン、インフォメーション系アクション
• Promo Gold (#cc9900): プロモーションバッジ、キャンペーン訴求

Neutral（ニュートラル）

• Text Primary (#000000): 本文テキスト（純粋な黒）
• Text Secondary (#616161): 補足テキスト、無効ボタンテキスト
• Text Footer (#ffffff): フッター内テキスト（白）
• Border (#bfbfbf): ボタン枠線、区切り線
• Background (#ffffff): ページ背景
• Surface Card (#f0f0f0): 製品カードの背景面
• Surface Section (#eaeaea): トピックス・新製品セクション背景
• Surface Campaign (#efefef): キャンペーンセクション背景
• Footer Dark (#404040): フッター背景（ダークグレー、純黒ではない）

Product Color Swatches

• Teal (#008080): 製品カラーバリエーション
• Warm Brown (#be8f68): 製品カラーバリエーション
• Peru (#cd853f): 製品カラーインジケーター

UI Elements

• Swiper Active (#777777): カルーセルのアクティブドット
• Swiper Inactive (#dddddd): カルーセルの非アクティブドット
• Nav Overlay (rgba(255, 255, 255, 0.7)): ナビカード背景（半透明白）

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文）: FP-HiraKakuProN-W3 — FontPlus（SBテクノロジー）配信のヒラギノ角ゴ ProN W3。ウェイト 400
• ゴシック体（見出し）: FP-HiraKakuProN-W6 — FontPlus 配信のヒラギノ角ゴ ProN W6。ウェイト 700
• ゴシック体（UI）: "FP-ヒラギノ角ゴ ProN W6" — Cookie バナー等の UI 要素用。日本語名での指定

3.2 欧文フォント

• ディスプレイ: UniversNextPro-Cond — Univers Next Pro Condensed。セクションタイトル、英文テキスト、404ページ等のディスプレイ用途。コンデンスドグロテスクで技術的な雰囲気を強調
• 入力フィールド: Arial — フォーム入力のデフォルト

3.3 font-family 指定

css/* 本文 */
font-family: "FP-HiraKakuProN-W3", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

/* 見出し・太字 */
font-family: "FP-HiraKakuProN-W6", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

/* 英文ディスプレイ */
font-family: "UniversNextPro-Cond", "Arial Narrow", "Roboto Condensed", sans-serif;

/* UIボタン */
font-family: "FP-ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

/* フォーム入力 */
font-family: Arial, sans-serif;

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

• FontPlus のウェブフォント（FP-HiraKakuProN-W3/W6）を最優先
• ローカルのヒラギノ角ゴ ProN、Hiragino Sans でフォールバック
• 英文ディスプレイは Univers Next Pro Condensed → Arial Narrow → Roboto Condensed の順
• FontPlus はドメインライセンスのため、preview.html ではローカルのヒラギノ角ゴ ProN + Roboto Condensed（Google Fonts）で代替

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

3.5 行間・字間

• 本文の行間 (line-height): 1.5（14px テキスト → 21px）
• 見出しの行間: 1.0〜1.8（セクションタイトルは密、ナビカード見出しはゆったり）
• 本文の字間 (letter-spacing): normal（基本的に字間なし）
• ナビゲーションの字間: 0.2em（13px × 0.2 = 2.6px）— 非常に広い字間。日本語プレミアムブランドの特徴的な表現
• フッターの字間: 0.05em（12px × 0.05 = 0.6px）

ガイドライン:

• ナビゲーションラベルの letter-spacing: 0.2em はブランドの視覚的アイデンティティ。省略しないこと
• 本文は字間を詰めず、normal を維持する
• フッターのみ微細な字間（0.05em）を適用

3.6 禁則処理・改行ルール

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

実測では特別な禁則設定は検出されなかった。

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt: 適用なし。全要素で font-feature-settings: normal
• すべてのテキストでプロポーショナル字詰めを使わず、等幅配置を維持している

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（会員登録）

• Background: #daa521（ゴールド）
• Text: #ffffff
• Padding: 12px 50px
• Border Radius: 4px — サイト全体で唯一の角丸要素
• Font: FP-HiraKakuProN-W3, 16px, 400

Secondary（基本ボタン）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #bfbfbf
• Padding: 10px
• Border Radius: 0px
• Font: FP-ヒラギノ角ゴ ProN W6, 11px, 400
• Letter Spacing: 1.1px（0.1em）

Cookie Accept

• Background: #0478c1
• Text: #ffffff
• Padding: 1px 6px
• Border Radius: 0px
• Font: FP-ヒラギノ角ゴ ProN W6, 15px, 400

Cookie Reject

• Background: #e9e7e8
• Text: #616161
• Padding: 1px 6px
• Border Radius: 0px

Inputs

• Background: #ffffff
• Border: デフォルトでは明示的なボーダーなし
• Border Radius: 0px
• Padding: 0px 8px
• Font: Arial, 14px, 400

Cards（製品カード）

• Background: #f0f0f0（ライトグレー）
• Border: なし
• Border Radius: 0px — 完全にシャープなエッジ
• Padding: —（画像が全面を覆う構成）
• Shadow: なし（フラットデザイン）

Navi Cards（ヘッドホンナビ等）

• Background: rgba(255, 255, 255, 0.7)（半透明白）
• Border: なし
• Border Radius: 0px
• 製品画像の上にオーバーレイとして表示

5. Layout Principles

Spacing Scale

Container

• Max Width: 1440px（推定、フルワイドカルーセル）
• Footer Padding: 55px 60px 0px（上・左右・下）

Grid

• Product Grid: 4カラム（製品カルーセル）
• Navi Cards: 3カラム（用途別ナビゲーション）
• Swiper Carousel: フルワイドスライダー

6. Depth & Elevation

• サイト全体で box-shadow の使用は検出されなかった
• 深度の表現はシャドウではなく、背景色の差（#ffffff → #f0f0f0 → #eaeaea）で階層を示す
• フッターのみダークグレー（#404040）で明確な領域分離

7. Do's and Don'ts

Do（推奨）

• border-radius は基本 0px。シャープなエッジでテクニカルな印象を維持する
• ナビゲーションラベルには letter-spacing: 0.2em を適用し、プレミアム感を出す
• 英文テキストには UniversNextPro-Cond（コンデンスド書体）を使用する
• 製品カードの背景は #f0f0f0 でコンテンツ領域と区別する
• フッターは #404040（ダークグレー）。純黒にしない
• 色のコントラストはページ背景が白・テキストが黒なので十分に確保されている

Don't（禁止）

• 角丸を多用しない。CTA ボタン（#daa521 ゴールド、radius: 4px）以外は radius: 0px
• ドロップシャドウを使わない。背景色の差で深度を表現する
• ナビゲーションの letter-spacing: 0.2em を省略しない（ブランドアイデンティティ）
• palt を適用しない。すべてのテキストで等幅配置を維持する
• ゴールド（#daa521）を汎用色として使わない。会員登録 CTA とプレミアム訴求に限定する
• 本文に FP-HiraKakuProN-W6（太字）を使わない。見出し・タイトルに限定する

8. Responsive Behavior

Breakpoints

タッチターゲット

• ナビゲーション項目: padding 0px 20px（リスト項目単位）
• ボタン: padding 10px〜12px 50px（十分なタッチ領域）

フォントサイズの調整

• モバイルではナビゲーションがハンバーガーメニューに変化
• 製品グリッドは1〜2カラムに縮小

9. Agent Prompt Guide

クイックリファレンス

Primary CTA Color: #daa521 (Gold)
Text Color: #000000
Background: #ffffff
Card Surface: #f0f0f0
Footer Background: #404040
Font (JP body): "FP-HiraKakuProN-W3", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
Font (JP heading): "FP-HiraKakuProN-W6", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
Font (EN display): "UniversNextPro-Cond", "Arial Narrow", "Roboto Condensed", sans-serif
Body Size: 14px
Line Height: 1.5
Border Radius: 0px (CTA only: 4px)
Nav Letter Spacing: 0.2em

プロンプト例

Audio-Technica のデザインシステムに従って、製品一覧ページを作成してください。
- CTA ボタン: bg #daa521, text white, radius 4px, padding 12px 50px
- 製品カード: bg #f0f0f0, radius 0px, shadow なし
- 見出しフォント: FP-HiraKakuProN-W6 (700), 16px, line-height 1.5
- 本文フォント: FP-HiraKakuProN-W3 (400), 14px, line-height 1.5
- ナビラベル: 13px, letter-spacing 0.2em
- 英文テキスト: UniversNextPro-Cond
- border-radius は CTA 以外すべて 0px
- フッター: bg #404040, text white, 12px, letter-spacing 0.05em