検索

空間から未来を描き、
人と社会に丹青いろどりを。

Drawing the future from space,
adding new colors
to people and society.

01 / Colors
Color

社名の 2 文字が、そのまま配色になっている

CSS 変数に --red: #A7153C(丹)と --blue: #1C4C6F(青)が定義されている。会社案内には「「丹青」とは、赤(丹)・青の基本的な 2 色から…」という一文がある。色が先にあってブランドがあるのではなく、名前が先にあって色がある。実測では役割がはっきり分かれていて、赤は文字とアクセント、青は面に使う。

丹(赤)/--red
#A7153C
★文字 24 / 面 1 要素。お知らせバッジ、ヒーロー右上の帯
青/--blue
#1C4C6F
★面 3 要素。ナビ展開面、フッターの Contact
Badge Blue
#376895
視察レポート・対談(面 6 要素)。CSS 変数に無い
Badge Purple
#555879
事例紹介(面 2 要素)。CSS 変数に無い
--base_text
#333333
★本文。可視 159 要素。純黒は使わない
--gray
#666666
説明文(91 要素)。面としても 64 要素
--lightgray
#999999
日付・補助
--bg
#F7F7F7
★下層ページはページ全体がこの色
--border
#cccccc
枠
--line
#dddddd
罫線。枠と罫線を 2 段で持つ
--tanseinote_base
#00346B
自社メディア「丹青ノオト」。文字 1 要素
--tanseinote_key
#db7007
宣言のみ。この 2 ページでは可視 0 要素

カテゴリバッジの 2 色(#376895 / #555879)はトークン化されていない。--red / --blue だけを見て「このサイトは 2 色」と書くと取りこぼす。バッジは 4 色の体系として扱うこと。また 下層ページの地色は白ではなく #F7F7F7。

Type

和文 2 段、欧文 4 段

和文は Noto Sans JP、欧文の見出しとラベルだけ Roboto に切り替える。@font-face は和文 400/500/700・欧文 400/500/600/700 がすべて loaded しているが、和文で実際に使われるのは 400 と 500 の 2 段だけ(実測の 600 / 700 はすべて Roboto の要素)。和文に 600 を当てると Noto Sans JP に 600 が無いため 700 に丸められる。

121314 151618 202432 404864
Hero Heading ★Noto Sans JP / 48px / 500
lh 1.50 / ls .0625em(ルビ入り)
人と社会に丹青いろどりを。
Section Heading (JP)Noto Sans JP / 64px / 500
lh 1.20 / ls normal
実績紹介
Section Heading (EN)Roboto / 40px / 600
lh 1.00 / ls 1.6px
PICK UP
Sub Heading LNoto Sans JP / 32px / 500
lh 1.60 / ls .0625em
最新の実績
Sub Heading MNoto Sans JP / 24px / 500
lh 2.00
その他運営メディア
Nav HeadingNoto Sans JP / 20px / 500
lh 1.60 / ls .07em
丹青社の想い
Card TitleNoto Sans JP / 18px / 500
lh 1.60
従業員同士のつながりを生む、多機能な食堂空間へ
Body ★Noto Sans JP / 16px / 400
lh 2.00(body の既定)
「丹青」とは、赤(丹)・青の基本的な 2 色から“豊かないろどり”を意味する言葉です。
UI Label ★Noto Sans JP / 14px / 400・500
lh 1.60(最多 136 要素)
トップメッセージ / 丹青社の空間づくり / 私たちの未来ビジョン2046
CaptionNoto Sans JP / 12px / 400
lh 2.00(73 要素)
個人情報保護方針 / 特定個人情報の適正な取扱いに関する基本方針

clamp() の流体タイポ

html は 10px 固定で、動くのは body 以下。768px で 15px、1200px で 16px を線形補間する。傾きは厳密に 1px / 432px(= 1200 − 768)。768px を下回ると流体が止まり、行間も 2.0 → 1.8 に落ちる。

Viewporthtmlbody font-sizebody line-height比率
1440px10px16px32px2.00
1200px10px16px32px2.00
1000px10px15.537px31.074px2.00
834px10px15.1528px30.306px2.00
768px10px15px27px1.80
375px10px15px27px1.80

CSS では clamp(1.2rem, .8444444444rem + .462962963vw, 1.4rem)(12px→14px)のように書かれている。.462962963vw × 432px = 2px で、すべての clamp が 768〜1200px の窓で設計されている。letter-spacing と line-height を px で書き写すと、この帯域で比率が崩れる。

font-feature-settings: "palt" は CSS に 7 回あるが、この 2 ページでは 1 要素も効いていない。セレクタがすべて .main--partner*(協力会社向けページ)に限定されていて、グローバルナビでは font-feature-settings: normal で明示的に打ち消してすらいる。コーポレート画面に palt を足さないこと。使う場合は実サイトと同じく letter-spacing: .08em とセットにする。

03 / Components
Parts

円か、ピルか。中間が無い

border-radius の実測は 100%(円)が 76 要素、100px(ピル)が 4 要素。4px や 8px の角丸は 1 要素も無い。遷移の既定はテキストリンク(padding: 0 0 1px)で、面のボタンは持たない。

丹青社の想い 事業紹介 視察レポート 事例紹介 お知らせ

実績カード

事例紹介
従業員同士のつながりを生む、多機能な食堂空間へ
働く人の交流が生まれる場として、食堂を再定義した。
視察レポート
YKK AP はじまりの工場が持つ歴史的価値を活かす
産業遺産を展示空間として再生したプロジェクト。
お知らせ
SBTi の基準に沿った温室効果ガス削減目標を設定
2026.07.31

入力欄

既定の状態
フォーカス(outline に --blue)
市外局番から入力してください
Grid

1200px のコンテナ、gap は 24px

Wide 1440px — 全幅セクション(6 要素)
Container 1200px ★最多(7 要素)。ブレークポイントでもある
Column 680px — 本文カラム
0px(カード・入力欄)
100px ピル(4 要素)
100% 円 ★最多(76 要素)

Depth & Elevation

Level 0(唯一)
box-shadow: none
階層は罫線で
1px solid #dddddd
階層は面で
#F7F7F7

影を使わないサイト。CSS 全文には box-shadow が 42 回、text-shadow が 6 回宣言されているが、実測した 2 ページの可視要素では 1 つも使われていない。filter: drop-shadow() は 0 回。奥行きは斜めに切った面・写真・#dddddd の罫線・#F7F7F7 と白の差で作る。

縦組みは使っていない。CSS 全文に writing-mode が 23 回あるが、実測した 2 ページの該当要素は 0 件。縦組みを実装しないこと。