SHARP（シャープ） DESIGN.md

SHARP（https://jp.sharp/）のデザイン仕様書。 「ネイチャーテクノロジー」を掲げる総合家電メーカーのコーポレートサイト。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ライトテーマ基調（#f5f5f5 面 + #000000 テキスト）で、清潔感と誠実さを体現。製品写真をヒーローに大胆に使い、ダークオーバーレイ（rgba(0,0,0,0.6)）で可読性を確保。ブランドカラーのシャープレッド（#e6000d）を要所で使い、差し色として機能させる
• 密度: 製品カテゴリはカードグリッドで整然と並べ、情報密度を中程度に保つ。本文ウェイトが 300（Light）と細めで、全体的に軽やかでクリーンな印象
• キーワード: クリーン＆ライト、Noto Sans JP 単独、シャープレッドの差し色、製品写真主体、ネイチャーテクノロジー
• 特徴:
  • フォントに Noto Sans JP のみを使用（カスタムWebフォントなし）。body ウェイトが 300（Light） と、家電メーカーとしては細めの設定が特徴的
  • ブランドアクセントの SHARP Red #e6000d は使用頻度を絞り、ナビゲーションやバッジの強調に留める
  • AQUOS Blue #4d7cfa はAQUOS（テレビ）製品ラインのサブブランドカラー
  • ヒーローは製品・自然写真の上に rgba(0,0,0,0.6) のオーバーレイを重ね、白テキストを載せる
  • 全タイポグラフィの line-height が一律 ×1.5 で統一されており、計算しやすい設計
  • COCORO サービス（クラウド連携）の存在感が大きく、ストアや会員訴求への導線を随所に配置

2. Color Palette & Roles

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

Brand

• SHARP Red (#e6000d): ブランドのプライマリアクセント。ナビゲーション強調、バッジ、注目要素に使用。出現頻度は 5〜6 回と絞り込まれており、差し色として機能する
• AQUOS Blue (#4d7cfa): AQUOSテレビ製品ラインのサブブランドカラー。5 回程度出現。製品カード・バナーのアクセントに使用
• Text Primary (#000000): 全テキストの基調色。サイト全体に一貫して使用

Surface / Background

• Surface Light (#f5f5f5): ページの主要な面背景色。22 回と最多出現。カード、カテゴリボタン、製品サムネイル背景に使用
• Surface White (rgba(255,255,255,0.9)): 半透明白のオーバーレイ。製品情報パネル等に使用
• Surface Border (#e6e6e6): カードや区切り線のボーダー色

Overlay

• Overlay Dark (rgba(0,0,0,0.6)): ヒーロー画像上のテキスト可読性を確保するダークオーバーレイ。11 回出現
• Overlay Light (rgba(0,0,0,0.1)): 軽い影・ホバー表現に使用。4 回出現
• Video Overlay (rgba(43,51,63,0.7)): 動画プレーヤーコントロールの背景

Neutral

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP のみ。カスタム Web フォントは使用せず、Google Fonts の Noto Sans JP 1 種で統一
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ: Noto Sans JP に内包される欧文グリフを使用（専用欧文フォントは指定なし）
• フォールバック: sans-serif

3.3 font-family 指定

css/* サイト全体 */
font-family: "Noto Sans JP", sans-serif;

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

• Noto Sans JP が読み込まれない環境ではシステムの sans-serif にフォールバック
• 専用の欧文フォントは指定しておらず、Noto Sans JP の欧文グリフが使われる
• Adobe Fonts 等のライセンス制限フォントは使用していないため、preview.html でも同じフォントを使用可能

代替フォント注記: Noto Sans JP はオープンライセンスのため、外部環境でもそのまま利用可。weight 300 / 400 / 500 / 700 を Google Fonts から読み込む。

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

実測値（トップページ、2026-05-09 取得）

3.5 行間・字間

• 全体の行間 (line-height): ×1.5 で統一（H1〜ナビゲーション・バッジまで全レベル共通）
• 本文の字間 (letter-spacing): normal（0）— 字間指定なし
• 見出しの字間: normal（0）— 字間指定なし

ガイドライン:

• line-height: 1.5 をサイト全体で統一することで、グリッドの整合性が保たれている
• 字間（letter-spacing）は指定しない（Noto Sans JP のデフォルトカーニングに委ねる）
• body の font-weight: 300 は非常に細く、過度に小さいサイズでの使用は可読性に注意

3.6 禁則処理・改行ルール

css/* サイト実測より */
word-break: break-word;
overflow-wrap: break-word;

3.7 OpenType 機能

実サイトにて palt（プロポーショナル字詰め）の明示的な指定は確認されていない。Noto Sans JP のデフォルト設定を使用。

css/* 指定なし（ブラウザデフォルト） */

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Category Button（カテゴリ選択）

• Background: #f5f5f5
• Text: #000000
• Border Radius: 10px
• Font Size: 14–16px
• Font Weight: 400
• 例: "AV機器"、"空調家電"

Product Category Card（製品カテゴリカード）

• Background: #f5f5f5
• Text: #000000
• Border Radius: 20px（大きめの角丸でソフトな印象）
• 製品カテゴリ一覧のナビゲーションカード

Primary CTA（主要行動喚起）

• Background: #000000
• Text: #ffffff
• Border Radius: 5px
• 例: "TVCMを見る"

Video Play Button（動画再生）

• Background: rgba(43,51,63,0.7)
• Text / Icon: #ffffff
• Border Radius: 9px

NEW Badge（新製品バッジ）

• Background: #e6000d（SHARP Red）
• Text: #ffffff
• Font Size: 12px
• Font Weight: 700
• Border Radius: 2–4px

Cards

• Background: #f5f5f5
• Border: none（ボーダーなしで面色で区切る）
• Border Radius: 20px（製品カテゴリカード）/ 10px（カテゴリボタン）
• テキスト色: #000000
• ヒーロー上のカード: rgba(0,0,0,0.6) オーバーレイ + #ffffff テキスト

Navigation

• Background: #ffffff（ヘッダー背景）
• Logo: SHARP ロゴ（ブランドマーク）
• Nav Text Size: 15px、weight 300–400
• SHARP Red #e6000d をナビゲーション内の強調要素に使用

5. Layout Principles

Spacing Scale

実サイトから観測できる主なスペーシング単位:

Container

• Max Width: 1280–1440px（実測ベース）
• Padding (horizontal): 24px（モバイル）/ 48–64px（デスクトップ）

Grid

• 製品カテゴリ: 3〜4 カラムグリッド
• ニュース・インフォメーション: 2〜3 カラム
• ヒーロー: フルスクリーン幅

6. Depth & Elevation

シャドウ（box-shadow）よりも背景色の差（#ffffff vs #f5f5f5）と透明オーバーレイで奥行きを表現するフラットデザイン。

7. Do's and Don'ts

Do（推奨）

• 本文は font-weight: 300（Light）を使う — シャープの軽やかな印象の根幹
• 全タイポグラフィの line-height は 1.5 で統一する
• カードや面の背景には #f5f5f5、枠線には #e6e6e6 を使い、純白との差で階層を表現する
• SHARP Red #e6000d はアクセントに限定して使い、バッジ・ナビ強調など要所に絞る
• テレビ（AQUOS）関連コンテンツには AQUOS Blue #4d7cfa を使ってサブブランドを表現する
• ヒーロー画像には rgba(0,0,0,0.6) のオーバーレイを重ね、白テキストで可読性を確保する
• カテゴリカードは border-radius: 20px の大きめ角丸でやわらかい印象を出す

Don't（禁止）

• 本文に font-weight: 700（Bold）を使わない — 見出しとの差別化が失われる
• ページ背景に純黒 #000000 を使わない（ライトテーマの世界観を壊す）
• letter-spacing を指定しない — Noto Sans JP のデフォルトカーニングに委ねる
• SHARP Red を多用しない — 差し色としての効果が薄れる
• 角丸を 0px（シャープな角）にしない — カテゴリカードは必ず丸みを持たせる
• 明朝体を混ぜない — 全体をゴシック（Noto Sans JP）で統一
• line-height を 1.5 以外に変えない — 全レベル統一が SHARP のタイポグラフィルール

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）

フォントサイズの調整

• Hero H1（40px）はモバイルで 24–28px 程度に縮小
• Section H2 Large（36px）はモバイルで 22–24px 程度に縮小
• Body（16px）はモバイルでも 16px を維持（14px に下げる場合は weight を 400 に上げる）
• 製品カテゴリグリッドはモバイルで 2 カラムに変更

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff / #f5f5f5
Text Color: #000000
Brand Accent: #e6000d (SHARP Red)
Sub-brand Accent: #4d7cfa (AQUOS Blue)
Border: #e6e6e6
Font: "Noto Sans JP", sans-serif
Body Size: 16px / Weight 300 (Light)
Line Height: 1.5 (全レベル統一)
Letter Spacing: normal (指定なし)
Hero Overlay: rgba(0,0,0,0.6)
Card Radius: 20px (製品カテゴリ) / 10px (カテゴリボタン)
CTA Radius: 5px (Primary) / 10px (Category)

プロンプト例

SHARPのデザインシステムに従って、製品カテゴリ一覧セクションを作成してください。
- 背景: #f5f5f5（面背景）
- テキスト: #000000
- フォント: "Noto Sans JP", sans-serif
- Body ウェイト: 300（Light）、見出しは 700（Bold）
- 全 line-height: 1.5 で統一
- カードの角丸: border-radius 20px
- ブランドアクセント（バッジ・強調）: #e6000d
- AQUOSテレビカテゴリには #4d7cfa をサブブランドカラーとして使用
- ヒーロー画像の上にテキストを載せる場合は rgba(0,0,0,0.6) のオーバーレイを使用