TopicsAll

Whiteboard

よろこびの小躍り。

こんなふうに想像すると、ここをよく見ると、このくらい跳躍すると。Whiteboardは、まだない構想を、いまから話すための場所です。日本デザインセンター(ndc.co.jp)から抽出したデザイントークンのカタログ。Variable Font の 340/450/520 ウェイトと、明朝×サンセリフの混在を再現。


01 / Colors

カラーパレット

Text & Surface
Black / Text
#1a1a1a
本文・見出しの基調色
Gray
#6f6f6f
二次情報・補足
Pale Gray
#fcfcfc
ページ背景(純白不可)
Footer
#f5f5f5
フッター背景
Border & Underline
Border
#eeeeee
カード境界・水平線
Underline
#dddddd
リンク下線
Error
#e61000
エラー
Error Background
#ffebee
エラー領域の背景

02 / Typography — 実測値

タイポグラフィ階層 (Variable Font: 340/450/520)

Whiteboard
Acumin (sans) 75.9px / 340 / line-height 1.0 / letter-spacing -0.01emdisplay
よろこびの小躍り。
Acumin (sans) 33.73px / 520 / line-height 1.65 / letter-spacing 0.025emhero sub
言葉ざわり — Section Title (h2)
Acumin (sans) 25.30px / 520 / line-height 1.6h2
こんなふうに想像すると、ここをよく見ると、このくらい跳躍すると。— Body Lead
Acumin (sans) 21.08px / 520 / line-height 1.8lead
本文 — 私たちは、デザインの仕事を通じて、社会と未来をつなぐ役割を担いたいと考えています。Body 16.87px / 340 / line-height 1.8。明朝(Source Serif 4 + 筑紫明朝)で組む長文。
Source Serif 4 + 筑紫明朝 16.87px / 340 / line-height 1.8body
Topics
Acumin (sans) 14.76px / 520tag
2026.03.02 — News list item
Acumin (sans) 13.70px / 340news

2026.03.02 — Topics

言葉ざわり — まだない構想を、ことばで触れる

言葉に触れたとき、人は何を感じるのでしょうか。「ざわり」は、表面の質感を指す日本語ですが、それは指で触れるものだけに限らず、目で見るもの、耳で聞くもの、そして言葉にも宿ります。

本文の組版について

本文は明朝体(Source Serif 4 + 筑紫明朝)で組み、見出しはサンセリフ(Acumin + Tazugane Gothic)で組みます。これは、本文の読みやすさと、見出しの視認性をそれぞれ最適化する選択です。

ウェイトは 340 / 450 / 520 の 3 段階。Variable Font ならではの精緻な制御で、和文・欧文・中文の視覚ウェイトを揃えます。letter-spacing は、見出しでわずかに開け、本文では指定しない。

余白について

サイドパディング 96px、コンテンツ最大幅 1500px。一般的なサイトより広く取ることで、編集物としての密度と空気感を両立させます。


03 / Topics — News List

トピックス


04 / Work

プロジェクト一覧

Branding
無印良品リブランディング
2024 / 原研哉
Editorial
JR東日本 駅サイン体系
2023 / 永井一正
Identity
瀬戸内国際芸術祭
2025 / 田中一光アーカイブ

05 / Forms

フォーム要素

エラー: メールアドレスの形式が正しくありません

06 / Spacing & Layout

スペーシング

0.5rem (8px)
1rem (16px)
2rem (32px) — gap
4.5rem (72px) — header
6rem (96px) — side padding