Kyocera (京セラ) DESIGN.md

京セラ株式会社（https://www.kyocera.co.jp/）のデザイン仕様書。 実サイトのCSS computed style に基づく。CSS Custom Properties は使用されていない。

1. Visual Theme & Atmosphere

• デザイン方針: 堅実で信頼感のあるコーポレートサイト。装飾を抑え、情報整理と可読性を重視した控えめなデザイン
• 密度: 標準的な情報密度。セクションごとに適度な余白をとり、製品情報と企業情報を体系的に配置
• キーワード: 堅実、信頼、ニュートラル、コーポレート、控えめ
• 特徴: ブランドカラーを前面に出さず、グレースケールを基調にした無彩色デザイン。CTA にも強い色を使わず、タグボタンは #f9f9f9 背景 + #dddddd ボーダーの控えめなスタイル。ナビゲーションはダークグレー（#4f4f4f / #616161）で統一

2. Color Palette & Roles

Neutral（ニュートラル — サイト全体の基調）

京セラのサイトはブランドカラーを前面に出さず、グレースケールで構成されている。

• Text Primary (#333333): 本文テキスト（body）
• Text Heading (#000000): 見出しテキスト（h2, h3, p 内見出し）
• Text Secondary (#666666): 補足テキスト、バナー説明文
• Text Light (#999999): ページネーション等の薄いテキスト
• Border (#dddddd): 入力欄・タグ・カードの枠線
• Background (#ffffff): ページ背景
• Surface Light (#f7f7f7): ナビゲーション背景、セクション背景（最多使用）
• Surface Tag (#f9f9f9): タグボタン背景
• Surface Divider (#ededed): ナビゲーション項目背景
• Surface Footer (#f0f0f0): フッター背景

Navigation（ナビゲーションのダークグレー系）

• Nav Primary (#4f4f4f): メインナビゲーション背景
• Nav Secondary (#616161): サブナビゲーション背景
• Nav Highlight (#747474): ナビゲーションTOP項目背景
• Nav Header (#313131): ナビゲーションヘッダー背景
• Nav Text (#ffffff): ナビゲーションテキスト（白）

Search Button

• Search Button BG (#666666): 検索ボタン背景
• Search Button Border (#666666): 検索ボタンボーダー

Pagination

• Pagination Active (#999999): 現在ページのボタン背景
• Pagination Text (#ffffff): 現在ページのテキスト

3. Typography Rules

3.1 和文フォント

ゴシック体（デフォルト）:

• 游ゴシック体 / YuGothic（macOS）
• 游ゴシック Medium / Yu Gothic Medium（Windows）
• 游ゴシック / Yu Gothic（Windows フォールバック）
• ヒラギノ角ゴ Pro（macOS フォールバック）
• メイリオ（Windows 追加フォールバック）

3.2 欧文フォント

• サンセリフ: Noto Sans（欧文専用の一部要素で使用）
• generic: sans-serif

3.3 font-family 指定

css/* メインスタック（body, 見出し, 本文すべて共通） */
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
  游ゴシック, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
  "Noto Sans", メイリオ, meiryo, sans-serif;

/* 欧文専用（Global Site リンク等、一部要素のみ） */
font-family: "Noto Sans";

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

• 和文フォント（游ゴシック体）を先頭に配置し、日本語表示を最優先
• macOS 向けの YuGothic → Windows 向けの Yu Gothic Medium → Yu Gothic の順
• ヒラギノ角ゴ Pro（ProN ではなく Pro を使用）を macOS フォールバックに配置
• Noto Sans を和欧混植のフォールバックに配置
• 最後にメイリオと generic sans-serif

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

以下は DevTools の computed style による実測値

トップページ

企業情報ページ

共通

3.5 行間・字間

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

• body グローバル: 25.6px (16px x 1.6)
• トップページ本文: 26px (16px x 1.625)
• 企業情報本文: 32px (16px x 2.0) — 読み物コンテンツのため広い行間
• セクション見出し (h2): 22.5px (22.5px x 1.0) — 見出しは行間を詰めている
• サブ見出し (h3): 33px (24px x 1.375)

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

• すべての要素で normal — letter-spacing は一切指定されていない

ガイドライン:

• letter-spacing はサイト全体で normal。意図的に字間を空ける設計ではない
• 企業情報の本文は line-height: 2.0 と広く、読みやすさを確保している
• トップページの本文は line-height: 1.625 で標準的

3.6 禁則処理・改行ルール

css/* 明示的な禁則設定は確認されなかった */
/* ブラウザデフォルトの禁則処理に依存 */

3.7 OpenType 機能

css/* すべての要素で font-feature-settings: normal */
/* palt, kern いずれも適用されていない */
font-feature-settings: normal;

• palt: 未使用。和文のプロポーショナル字詰めは行われていない
• kern: 未使用
• コーポレートサイトとして、標準的な字詰めで安定した表示を優先している

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Tag Button（製品タグ — 最も多用されるインタラクティブ要素）

• Background: #f9f9f9
• Text: #000000
• Border: 1px solid #dddddd
• Padding: 9px 10px
• Border Radius: 6px
• Font Size: 13px
• Font Weight: 500

Navigation Link Button（ナビゲーション内リンク）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #dddddd
• Padding: 16px
• Border Radius: 0px
• Font Size: 13px
• Font Weight: 700

Search Button（検索ボタン）

• Background: #666666
• Text: #333333
• Border: 1px solid #666666
• Padding: 1px 6px
• Border Radius: 0px
• Font Size: 16px
• Font Weight: 400

Mega Menu Item（メガメニュー項目）

• Background: #f7f7f7
• Text: #000000
• Border: none
• Padding: 10px 34px 10px 50px
• Border Radius: 0px
• Font Size: 15px
• Font Weight: 500

Navigation CTA（企業情報ナビ）

• Background: #4f4f4f
• Text: #ffffff
• Border: none
• Padding: 18px 16px
• Border Radius: 0px
• Font Size: 16px
• Font Weight: 500

Pagination Button（ページネーション — アクティブ）

• Background: #999999
• Text: #ffffff
• Border: 1px solid #999999
• Padding: 1px 6px
• Border Radius: 100%
• Font Size: 15px

Inputs

• Background: #ffffff
• Text: #333333
• Border: 1px solid #dddddd
• Border Radius: 0px
• Padding: 12px 14px（ヘッダー検索）/ 14px（サイト内検索）
• Font Size: 18px
• Font Weight: 400

Cards

• Background: #ffffff
• Border: none（画像ベースのカード）
• Border Radius: 0px
• Shadow: none（フラットデザイン）

5. Layout Principles

Container

• Max Width: 1440px（推定。ヒーロー画像領域）
• Content Width: 標準的なコーポレートサイト幅

Spacing

• 基本的に px ベースの固定値スペーシング
• セクション間: 大きな余白
• カード間: 均等配置

6. Depth & Elevation

• 京セラのサイトは 完全にフラットなデザイン で、box-shadow は一切使用されていない
• 要素の区別はボーダー（#dddddd）と背景色の差（#ffffff vs #f7f7f7 vs #f9f9f9）で表現
• ナビゲーションのダークグレー背景（#4f4f4f〜#616161）が唯一の視覚的深度

7. Do's and Don'ts

Do（推奨）

• テキスト色は #333333 を使い、見出しには #000000 を使う
• タグやボタンは控えめなスタイル（#f9f9f9 背景 + #dddddd ボーダー）にする
• ナビゲーションはダークグレー（#4f4f4f〜#616161）で構成する
• 背景色は白 (#ffffff) とライトグレー (#f7f7f7) の2段階で使い分ける
• フォントは游ゴシックを先頭にした統一スタックを使う
• 企業情報の本文は line-height: 2.0 で組む
• font-feature-settings は normal のまま（palt を使わない）
• border-radius は控えめに（タグボタンの 6px のみ。他は 0px）

Don't（禁止）

• 派手なブランドカラーやアクセントカラーを使わない（グレースケール基調）
• box-shadow でカードに影を付けない（フラットデザイン）
• letter-spacing を追加しない（サイト全体で normal）
• palt や kern を有効にしない
• 丸い pill ボタン（border-radius: 99px）を使わない
• ナビゲーション以外の要素にダークグレー背景を使わない
• 游ゴシック以外のフォントをメインに使わない

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（ナビゲーション項目で padding: 18px 16px を確保）

フォントサイズの調整

• モバイルでは本文 14-16px、見出しはデスクトップの 70-80% 程度に縮小

9. Agent Prompt Guide

クイックリファレンス

Text Primary: #333333
Text Heading: #000000
Text Secondary: #666666
Background: #ffffff
Surface Light: #f7f7f7
Surface Tag: #f9f9f9
Border: #dddddd
Nav Primary: #4f4f4f
Nav Secondary: #616161
Search Button: #666666

Font: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
  游ゴシック, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
  "Noto Sans", メイリオ, meiryo, sans-serif

Body Size: 16px / line-height: 1.6 / letter-spacing: normal
palt: なし（全要素で normal）
box-shadow: なし（完全フラットデザイン）
Tag Button: bg #f9f9f9, border #dddddd, radius 6px

プロンプト例

京セラのデザインに従って、製品一覧ページを作成してください。
- フォント: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    游ゴシック, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
    "Noto Sans", メイリオ, meiryo, sans-serif
- テキスト色: #333333、見出し: #000000
- 補足テキスト: #666666
- 背景: #ffffff、セクション背景: #f7f7f7
- ボーダー: #dddddd
- タグボタン: bg #f9f9f9, border 1px solid #dddddd, radius 6px, font 13px/500
- ナビゲーション: bg #4f4f4f, text #ffffff
- box-shadow は使わない（フラットデザイン）
- letter-spacing: normal, palt: なし