JP

Deleted Reality 2025 ／ laser, motion capture, real-time rendering

Colors
01 — グレースケールだけ。有彩色は作品画像の中にしかない
Text
Ink#000000
Heading（h1）#333333
Text Sub（ナビ・ボタン）#666666
Text Muted（日付・クレジット）#999999
Text Faint#C8C8C8
Border / Surface
Border（唯一の枠線色）#C4C4C4
Divider#E5E5E5
Surface Faint（Links）#EEEEEE
Surface（Work 一覧）#F0F0F0
Surface Light#F8F8F8
Surface Lighter（News）#F9F9F9
Background#ffffff
Footer（唯一の暗い面）#000000

アクセントカラーを持ちません。情報の強弱は文字色の階調（#000 → #333 → #666 → #999）と 面色の階調（#fff → #F9F9F9 → #F0F0F0 → #EEEEEE）だけでつくります。

Typography
02 — 全要素セリフ。和文＝Noto Serif JP / 欧文＝Libre Baskerville / palt はグローバル
Section Title
Libre Baskerville 26px / 400 / 1.23 / #333333
Work
Lead
混植 22px / 400 / 1.23 / 0.036em
人とテクノロジーの関係を探求し新しい表現を生み出す
Sub Head（h4）
Noto Serif JP 19.2px / 600 / 1.0
Projects
Body
Noto Serif JP 15px / 400 / 1.8 / 0.021em
技術と表現の新しい可能性を探求し、研究開発要素の強い実験的なプロジェクトを中心に、 外部のアーティストやクリエイター・研究者・科学者などとの刺激的なコラボレーションを通じ、 R&Dプロジェクトや作品制作を行うクリエイティブコレクティブです。
List Item
Noto Serif JP 15px / 400 / 2.0 / 0.011em
WORLD FENCING LEAGUE（LA）にて「Fencing Visualized」の新バージョンを公開しました
Slider Caption
Libre Baskerville 15px / 500 / 2.0
tv asahi MUSIC STATION SUPER LIVE2025
Filter / Tag
混植 14px / 400 / 1.8
_Installation
Nav
Libre Baskerville 13px / 400 / 1.23 / #666666
Careers
Date
Noto Serif JP 13px / 400 / 1.23 / #999999
April 17, 2026
Button
Libre Baskerville 12px / 400 / 1.33 / #666666
View More
Credit
Libre Baskerville 12px / 400 / 1.42 / #999999
Perfume
3種のフォントチェーンを打ち分ける

和文だけの要素 → 'Noto Serif JP', serif
欧文だけの要素 → 'Libre Baskerville', serif
和欧が混じる要素 → 'Libre Baskerville', 'Noto Serif JP', serif（欧文が先頭）
プラットフォームフォント（ヒラギノ明朝・游明朝）をチェーンに並べず、 落ちる先は generic な serif だけです。

body の line-height は 1。読ませる要素にだけ 1.8〜2.0 を個別指定します。 letter-spacing は基本 normal で、開けても 0.011〜0.036em に留めます—— palt で既に詰め組みになっているため、大きく開くと組版が崩れます。

Article
03 — News 記事の組版。面色 #F9F9F9 の上に置く
April 17, 2026

Fencing Visualized、新バージョンを公開

剣先の軌跡をリアルタイムに可視化する「Fencing Visualized」を、 WORLD FENCING LEAGUE（LA）にて更新しました。従来のマーカー式トラッキングを廃し、 複数台のハイフレームレートカメラからの推定に切り替えたことで、 選手の装備に手を加えずに撮影できるようになっています。

Technical Notes

推定パイプラインは学習済みモデルと物理シミュレーションのハイブリッドで、 剣身のしなりを含めた軌跡を毎秒240フレームで再構成します。 描画は会場のLEDと配信映像の双方に同時出力しています。

View More
Buttons
04 — 枠線ボックス1種だけ。塗りボタンを持たない
View More Contact

width 249px / transparent / 1px solid #C4C4C4 / border-radius 0 / padding 13px 0 / Libre Baskerville 12px / color #666666 / text-align center。 色でも面積でも導線の優劣をつけません。

Filter（下線・ボタン化をせず、文字色の濃淡だけで状態を示す）
All _Dance _Installation _Music _Research _Stage

選択中 #333333 / 非選択 #999999。カテゴリ名の頭に _（アンダースコア）を付ける独特の表記。

Work
05 — サムネイルは枠なし・角丸なし・影なし。ホバーで明るく持ち上げる
work image
Fencing Visualized
World Fencing League
work image
Deleted Reality 2025
ELEVENPLAY
work image
MUSIC STATION SUPER LIVE
Perfume
work image
角野隼斗 ピアノリサイタル “Klassik Arena”
Stage Design

ホバー: transform: scale(1.03) と filter: brightness(125%) の2段。 暗くするのではなく明るく持ち上げます（マウスを乗せて確認してください）。 860px 以下ではこの演出を transition: none / transform: none で無効化します。

News & Forms
06 — リストは行送り 2.0。入力欄は装飾を全部剥がす
Forms — デフォルト / フォーカス / エラー
お名前をご入力ください
フォーカスは下線が #333333 に変わるだけ
エラーも色を持たない。下線が #000000 になる

border / background / padding / border-radius をすべて剥がし、 border-bottom: 1px solid #E5E5E5 だけで入力位置を示します。

Elevation
07 — box-shadow は CSS 全体で0件
面色の階調 #ffffff → #F9F9F9 → #F0F0F0 → #EEEEEE。セクションの境界は面色の差だけでつくり、罫線を引かない。
文字色の階調 #000 → #333 → #666 → #999 → #C8C8C8。強弱はすべてグレーの濃淡で表す。
黒いフッター サイト内で唯一の反転面。padding 90px 0 60px（モバイルは 60px 0 40px）。

ホバーの brightness(125%) が、影の代わりに「浮き」を表現する唯一の手段です。

Layout
08 — 標準コンテナ 1156px。ブレークポイントは 860px の1本だけ
1600px — 最大
1300px — ワイド（ヘッダー）
1156px — 標準コンテナ
860px — 唯一のブレークポイント
Spacing Scale
5
13
20
40
60
90

768px でも 1024px でもなく、860px の1本で切り替えます （@media screen and (max-width: 860px) が 24 箇所）。中間サイズを刻みません。 モバイルではコンテナが max-width: 88% になります。