夏季休暇のお知らせ
final final ag 0

音のクオリティは、
音楽体験に大きな影響を与える。

ZE8000 MK2
Colors
01 / 有彩色は #006bc6 の1色だけ
Primary — サイト唯一の有彩色
Primary Blue
#006bc6
--primary-button-background。主要CTA・カートバッジ
Ink
#222222
--secondary-button-background。文字色と同値
Footer
#171717
ダークセクションよりさらに一段暗い
Semantic
Error
#ec0924
セール価格・在庫僅少
Error Background
#feeef0
エラー時の入力欄
Success Background
#cce1f4
Success は Primary と同値
Sold Out
#959595
「在庫切れ」「生産終了」バッジ
Star Rating
#e79315
レビューの星
Neutral
Background
#ffffff
ページ地色(html に指定)
Secondary Background
#f5f5f5
シリーズカードの面
Border Darker
#a7a7a7
--border-color-darker
Border Root
#dedede
--root-border-color

Typography
02 / 和文はすべて明朝。字間は全要素で 0.05em
English — EB Garamond。大見出しだけ字間がマイナス
PRODUCTS
EB Garamond / 40px / 400 / line-height: 1.07 / letter-spacing: -0.025em和文は開き、欧文は締める
PICK UP
EB Garamond / 40px / 500 / line-height: 1.083 / letter-spacing: 0.05emセクション見出し
ZE series
EB Garamond / 24px / 400 / line-height: 1.11シリーズ名
Japanese — 和文明朝。本文・価格・ボタン・フォームまですべて
final 公式ストア
和文明朝 / 30px / 700 / line-height: 1.733 / letter-spacing: 0.05emストアタイトル
音のクオリティは音楽体験に大きな影響を与えると信じています。私たちは研究開発を軸に、音を測ることと聴くことの両方から製品をつくっています。
和文明朝 / 15px / 400 / line-height: 2.2 / letter-spacing: 0.05emリードだけ行間を開く
本文 — 音響工学と音響心理学の双方を踏まえ、測定値と聴感の一致を目指した音質設計を行っています。
和文明朝 / 15px / 400 / line-height: 1.733 / letter-spacing: 0.05em継承の基準値
セール価格 ¥1,280,000
和文明朝 / 16px / 400 / line-height: 1.733価格も明朝。数字はヒラギノ明朝の欧文グリフ
ピックアップ
和文明朝 / 14px / 400 / line-height: 1.23英語見出しの下に置く和文ラベル
TOP / 全ての商品 / ZE8000 MK2
和文明朝 / 13px / 400 / line-height: 1.54 / color: rgba(34,34,34,0.7)パンくず
音響工学・音響心理学を踏まえた音質設計 — Caption
和文明朝 / 12px / 400 / line-height: 1.5シリーズ説明
例外 — ボタンのラベルだけ字間が本文の3倍
カートに追加する — Button Label
和文明朝 / 13px / 400 / letter-spacing: 2px(0.154em)押せる文字を字間で区別する

ABOUT
03 / 20カラムグリッド・gutter 34px の商品一覧

音のクオリティは音楽体験に大きな影響を与えると信じています。研究開発部門が、研究や技術開発の成果や過程を製品に落とし込んでいます。

ZE8000 MK2
¥39,800
VR3000 for Gaming
¥7,980
在庫切れ
A8000
¥198,000
生産終了
E3000
セール価格 ¥3,980
Color Swatches — radius 0。選択中は白の2px枠
Series Cards — 面色 #f5f5f5、唯一 radius 6px を持つ
ZE series

音響工学・音響心理学を踏まえた音質設計

DX series

全く新しい超開放型の音場感を実現

VR series

ゲームジャンルに最適な定位表現

A series

時間応答の研究成果から生まれた設計


Buttons
04 / 高さは padding ではなく line-height で作る
Primary / Secondary — radius 4px / height 52px / letter-spacing 2px
カートに追加する TOPへ戻る 結果を見る

--button-border-radius: 4px に対し --block-border-radius: 0px
面・バッジ・スウォッチは角丸ゼロで、ボタンだけが 4px を持つ。

Newsletter — 純黒 #000000。#222222 ではない
final ag
Pagination — 正円。現在ページのみ塗る
final LAB

研究開発部門が、研究や技術開発の成果や過程を皆さんと共有する場です。測定と聴感のあいだにあるものを、できるだけそのまま書いています。

VIEW MORE
Forms
06 / 入力欄はボタンと同じ高さ 52px・角丸ゼロ

罫線は rgba(0,0,0,0.1)。高さ 52px

フォーカス時は Primary の #006bc6

エラーは #ec0924 の罫線+ #feeef0 の背景


Layout
07 / 20カラム。12 でも 16 でもない
Container1520px / 左右 40px(--container-gutter
Grid20カラム / gap 34px。4・5・10 分割が同じグリッドで作れる
Vertical Breather80px(既定)/ 64px(tight)
Product Block Spacing34px(グリッド gutter と同値)
Button / Input Height52px(小サイズ 44px)
Border Radiusボタン 4px / シリーズカード 6px / 面・バッジ・スウォッチ 0px
Elevation影は使わない。面色 #f5f5f5 と rgba(0,0,0,0.1) の罫だけで分節する