01 / Colors
Colors

紺地の面と、ひとつだけの CTA

面色は 紺 #080822(可視 47 要素)ひとつ。彩度のある色は CTA の #8a001a だけで、トップ・下層とも 1 要素しか無い。トップは紺地、下層は白地。body.home にだけ背景色が当たる設計で、/about/ 以下は #ffffff になる。

Navy
#080822
★トップの地色。body.home 限定。可視 47 要素
Crimson
#8a001a
★CTA「お問い合わせ」専用。各ページ 1 要素
Card
#eceef1
メディア掲載カードの面(可視 40 要素)
Ink
#111111
見出し・リンク(可視 59 要素)
Body
#333333
本文(下層 39 要素)
Muted
#aaaaaa
日付・カテゴリ(可視 46 要素)
Cream / Line
#fbf8f1 / #d9d0bd
下層の告知バナーの面と枠
Tag(半透明)
rgba(153,153,153,.6)
分類タグ(可視 43 要素)。写真に重ねる前提

自社トークンは 8 個だけ(残り 60 個は WordPress / Gutenberg の preset)。うち色の 4 個はトップ・ブログ記事の両方で可視 0 要素。宣言はあるが描画されていないので、ブランドカラーとして実装しない。

--rte-gold
#9a6412
宣言のみ。実測 2 ページとも可視 0 要素
--rte-gold-hover
#c8892f
宣言のみ。可視 0 要素
--rte-line
#e8e0d2
宣言のみ。可視 0 要素
--rte-wash
#faf5ec
宣言のみ。可視 0 要素
Typography

約物だけを詰める

letter-spacing はトップ 205/208 要素、下層 170/173 要素が normal。font-feature-settings: "palt" も 1 要素も使っていない。代わりに YakuHanJP / YakuHanMP(約物だけを収録したサブセットフォント)をスタックの先頭に置き、句読点・括弧だけを半角幅に詰めている。仮名漢字の字送りは一切変わらない。

101214 162022 2426 32 36
Display (EN)CarreNoirPro-Medium / 56px
代替: EB Garamond
NIPPONIAとは
Lead(明朝)★Noto Serif JP / 36px / 300
lh 1.40 / ls normal
なつかしくて、あたらしい、
日本の暮らしをつくる。
Section (EN)CarreNoirPro-Medium / 32px
代替: EB Garamond
NIPPONIA Sites
Lead Text(明朝)Noto Serif JP / 26px / 500
lh 1.60
私たちは、古民家等の歴史文化資産の活用・再生を起点にしています。
Sub Heading(明朝)Noto Serif JP / 20px / 500
lh 1.45
NIPPONIAのVision
Nav / HeadingNoto Sans JP / 16px / 700
lh 1.65
全国のプロジェクト
Body ★Noto Sans JP / 14px / 400
lh 1.75 / ls normal
NIPPONIAからの最新情報と、その土地で暮らす人びとの声をお届けします。歴史的建築物の保存・活用について、その理念や手法を広くお伝えしています。
Body(長文)Noto Sans JP / 16px / 400
lh 1.65
羅針盤なき時代。本当の豊かさとは何か。豊かに生きる、豊かに暮らすとはどういうことか、そのことを誰も知りません。
CaptionNoto Sans JP / 12px / 400
lh 1.30(可視 81 要素で最多)
私たちの想い / 私たちの約束 / 私たちのブランド
TagNoto Sans JP / 10px / 400
lh 17px / radius 9px
城下町 港町 花街

html { font-size: 62.5%; line-height: 1 }。無単位の 1 が全要素に降りるため、行間を宣言し忘れた要素は行が潰れる(実測 比率 1.00 が 107 要素)。本文ブロックは必ず line-height を書き、無単位で指定すること。1.0em のような絶対値にすると子要素まで巻き込む。

明朝に 700 は存在しない。Noto Serif JP の宣言は 300 500、YakuHanMP 700 は unloaded。明朝へ font-weight: 700 を当てるとブラウザの合成太字になる。ウェイトは 300 / 400 / 500 まで。

03 / Vertical
Vertical

縦組みは、右端のタブだけ

実サイトで writing-mode: vertical-rl が当たっているのは 6 要素(うち 2 件はアイコンの <svg> / <use>)。右端の固定タブと、サブメニューの「私たちの想い」だけだ。ヒーローの大きな縦組みコピーは実装ではない。

お問い合わせ
視察・求人・物件
本物の縦組み。幅 40px・line-height: 40px の絶対値・letter-spacing: normal。主ラベルが 14px、副ラベルが 10px。

複数の縦組みを横に並べるときは flex-direction: row-reverse にする。素の display: flex だと DOM 順に左→右へ置かれ、日本語の縦組みとして読む向き(右→左)と逆になる。

ヒーローのコピーは SVG スプライト。.TopSlideCopy__inner > svg > use[xlink:href="#icon-top-copy"](154×490px)で、<text> 要素は 0 個、<path> も 0 個のアウトライン。document.images にも verticalWriting にも出てこないので、スクショだけ見て「縦組みを実装している」と判断しないこと。下は同じ見え方を SVG で再現したもので、実サイトの構造に合わせてある。

なつかしくて あたらしい 日本の暮らしをつくる
Components

角丸は 4 値、影はひとつ

角丸は 3px(カード)/ 9px(タグ)/ 12px(ボタン)/ 14px(バナー) の 4 値から選ぶ。影は実測 1 種類 1 要素しかない。カード・ボタン・ナビはすべてフラットで、階層は紺地と白地の切り替えで作る。

城下町商人町宿場町港町
AKARI SUPPORTER
灯が、未来を照らす。
詳しく見る →

サイト唯一の影。rgba(0,0,0,.42) 0 14px 36px + 1px solid rgba(255,255,255,.16) + radius 14px のガラス調。ここ以外に影を足さない。

Cards

Inputs

実測した 2 ページに入力欄が無い。Tag の radius: 9px と Primary の radius: 12px に合わせ、フォーカスリングは CTA の #8a001a を使う。

全角でご記入ください
確認のご連絡をお送りします
ご用件を選択してください
05 / Elevation & Layout
Elevation

影ではなく、面で区切る

Level 0
none / 既定。ほぼ全要素
Level 1
rgba(0,0,0,.42) 0 14px 36px / 1 要素のみ
max-width 1440px(実測 11 要素)
content 1280px(1440 − padding 80px × 2)
1066px(補助・1 要素)
2px / 19 要素
3px / 40 要素(最多)
4px / 4 要素
9px / タグ
12px / ボタン
14px / バナー

ブレークポイントは実質 2 段階。CSS 全文の @media は max-width: 800px が 299 宣言と圧倒的で、次が 960px の 39 宣言。ルートサイズは 6 幅(1440 / 1200 / 834 / 768 / 767 / 375px)すべてで 10px、body 14px のまま動かない。流体スケールは使っていない。