01 / Colors

ブランド色は「塗る色」ではなく「引く線」

コーポレートグリーン #018A0E は CSS 全文で 21 回現れるが、静止状態で描画される要素は 0 個。 グローバルナビ項目の ::before(height: 1px / opacity: 0)として仕込まれ、ホバーとカレント表示でだけ現れる。 上のナビ「事業」に引かれている 1px の緑線がそれ。面は 白・淡グレー・フッターの #565656 しか使わない。

Corporate Green
#018A0E
★ ナビの 1px 下線のみ。面に塗らない
Main Text
#272727
--main-text-color。文字 94 要素。純黒は使わない
Notice Text
#666666
注記・黒ボタンのホバー。文字 46 要素
News Tab Text
#767676
ニュースのタブ・日付
Border
#cad0d5
罫線。CSS 全文で 37 回。最頻の線色
Surface / Badge
#eff0f2
ニュース種別バッジの面。30 要素
Surface / Notice
#f1f2f4
--important-notice-background
Button Hover
#d6dade
--basic-button-hover-color
Footer
#565656
フッター全面。文字は #d5d5d5
Text on Dark
#d5d5d5
★フッターの文字。白を置かない
プレスリリース
--news-press-release #cc3d2e
株主・投資家情報
--news-ir #255aa5
サステナビリティ
--news-sustainability #3e8f79
イベント情報
--news-others #e68e43

ニュースのカテゴリ色は文字にだけ使い、バッジの面は種別を問わず #eff0f2 で共通。 実測のバッジ面は #eff0f2 が 30 要素あり、4 色のいずれも面色としては現れなかった。

字間は書かない。詰めるのは約物だけ

スタックの先頭に YakuHanJPs(約物だけのサブセット書体)を置き、2 番目に 游ゴシック Medium の別名 MyYuGothicM を置く。 letter-spacing は実測 353 要素中 346 要素が normal、font-feature-settings は 0 件。 サイズはすべて rem だが、px を 16 で割って小数 2 桁に丸めているため 14.08px / 13.12px / 38.08px という半端な実測値になる。

EN Section Title
Roboto 70px / 700 / 1.31
NEWS
Page Title
2.38rem = 38.08px / 400 / 1.6
大林組基本理念
Hero Caption
1.75rem = 28px / 400 / 1.5 / ls .01em
JR長崎駅ビル
Heading 1
1.75rem = 28px / 700 / 1.6
「地球に優しい」リーディングカンパニー
Heading 2
1.25rem = 20px / 700 / 1.6
優れた技術による誠実なものづくり
Body
1rem = 16px / 400 / 1.8
大林組がめざす姿、社会において果たすべき使命を示したものが「大林組基本理念」です。
Nav / List
0.88rem = 14.08px / 700 / 1.7
技術・ソリューション
Meta
0.82rem = 13.12px / 400 / 1.7
大林組公式ソーシャルメディアアカウント
Utility
0.75rem = 12px / 400 / 1.7
このサイトについて/個人情報保護について
YakuHanJPs あり(実サイト)
「技術・ソリューション」(土木)、および建築。
YakuHanJPs なし(比較)
「技術・ソリューション」(土木)、および建築。

詰めているのは約物(かっこ・句読点・中黒)だけで、かなと漢字の間は詰まらない。 palt と違って OS やブラウザで結果が変わらない反面、letter-spacing を足すと約物が二重に詰まって崩れる。 MyYuGothicM の @font-face は local() だけで書かれており、游ゴシックが無い環境では status: error になってヒラギノへ落ちる。これは意図どおりで、URL を足してはいけない。

03 / Article

本文は 1rem / line-height 1.8、読み物は 800px

大林組がめざす姿、社会において果たすべき使命を示したものが「大林組基本理念」です。

三箴(さんしん)

「良く、速く、廉く、しかも安全に」——創業以来受け継がれてきた言葉を、いまの事業のことばに置き換えて示しています。 本文は 1rem(16px)/line-height: 1.8。ナビゲーションやリストの 1.7 より一段ゆるく組み、読み物であることを行間で示します。

箇条書きの行頭記号は円ではなく 6px の正方形。このサイトは border-radius を持たないので、リストマーカーも角のままにします。

面で塗った CTA が無い

押せるものは「白地に #cad0d5 の罫で囲む」か「#272727 の黒面」の 2 種類だけ。 どちらも border-radius: 0、box-shadow: none。ホバーは色を #d6dade / #666666 に差し替える。 ニュース種別のバッジは面 #eff0f2・文字 #272727 で共通、種別色は ::before の 左端 4px の帯にだけ塗る。 暗い面では面が #585858・幅 190px・帯 5px の別バリアントになる。

プレスリリース 株主・投資家情報 サステナビリティ イベント情報 会社情報
プレスリリース
自動搬送ロボットの実証を開始
株主・投資家情報
第2四半期決算説明会の開催について
サステナビリティ
再生可能エネルギー転換を全支店へ
05 / Cards

ホバーは色ではなく 1.05 倍の拡大で示す

カードは枠も影も持たず、写真とテキストだけ。--hover-scale-value: 1.05 と --hover-scale-transition: scale 0.35s ease-out が変数化されており、 ホバーで写真だけが拡大する(カード全体の色は変わらない)。カード見出しは実績名なので 1.75rem / 400 / line-height 1.5 / letter-spacing .01em。

JR長崎駅ビル
駅と街をひとつづきにする、長崎の新しい玄関口
GLION ARENA KOBE
海に開いたアリーナ。ウォーターフロントの再生
ジャムナ鉄道橋
バングラデシュ。全長4.8kmの複線鉄道専用橋

入力欄も角のまま

全角でご入力ください
CSS 全文で唯一の box-shadow 0 0 2px 3px rgba(0,0,0,.2) がフォーカスリングに使われている
07 / Depth & Elevation

影は無い。奥行きは罫線と明度差で作る

実測 2 ページで box-shadow は 0 種類、border-radius も 0 種類。 段差は #cad0d5 の 1px 罫と、#ffffff → #eff0f2 → #f1f2f4 → #565656 という面の明度差だけで表す。

Level 0 — すべての要素
box-shadow: none / border-radius: 0
面の明度差で段を作る
#ffffff → #eff0f2 → #f1f2f4

標準 1240px、読み物 800px

viewport
max-width: 1240px(標準コンテンツ・実測 8 要素)
max-width: 800px(理念・本文などの読み物)
Query出現用途
only screen and (max-width: 767px)58モバイル。主要な切り替え点
only screen and (max-width: 1060px)10タブレット/小型ノート
only screen and (min-width: 768px)5モバイル以上
only screen and (max-width: 1150px)3ナビの折り返し
(-ms-high-contrast: none)3IE 向けにフォントスタックを差し替える
(max-height: 760px) and (min-width: 1000px)1★高さで切り替える唯一の分岐(ヒーローの高さ)

デスクトップファースト(max-width 主体)。余白は % と em で持っているため、ブレークポイントを跨いでも自動で縮む。 見出しだけ rem を下げる(1.75rem → 1.375rem、1.25rem → 1.13rem)。