ブランド色でボタンを塗らない。マゼンタ #f42859 は資料ダウンロード系のボタン専用（面 17 要素）で、青 #0d64c9 は見出し・リンク・問い合わせ系の副次ボタンに回っている。「一番目立つ色＝一番押させたい操作」を 1 対 1 にしている。3 つ目の CTA 色を足さない。
青みを含んだ 6 段のグレースケール（#30363e → #495158 → #697482 → #8897a7 → #bcc8d6 → #dae3ed）を持ち、純黒・純グレーを使わない。面も #fafcfd → #f4f7fa → #eaf0f6 の 3 段。
自社トークンは 0 個。検出した 60 個の CSS 変数はすべて WordPress / Gutenberg 由来。
本文スタックの先頭に NotoSansJP-circled-1〜-9 が並ぶ。それぞれ unicode-range が ①〜⑨ の 1 文字ずつ（U+2460〜U+2468）に絞られていて、該当文字が無いページでは1 バイトも取りに行かない。セルフホストしている NotoSansJP-Regular.woff2 のサブセットに丸数字が入っていないための補填。
| Family | 調達 | document.fonts | 実測のリクエスト | 判定 |
|---|---|---|---|---|
| Noto Sans JP | セルフホスト（Regular / Medium / Bold） | 400 / 500 / 700 loaded | 3 本 | ★和文の本体 |
| Inter | セルフホスト（24pt R/B・18pt M） | 400 / 500 / 700 loaded | 3 本 | ★欧文・数字 |
| NotoSansJP-circled-1 … -9 | Google Fonts のサブセット woff2 を直リンク | 9 本とも unloaded | 0 本 | unloaded が正常（unicode-range） |
| Font Awesome 5 Free | CDN | 900 loaded / 400 unloaded | 1 本 | アイコン |
| Font Awesome 5 Brands | CDN | unloaded | 0 本 | 未使用 |
| slick | テーマ同梱 | 400 loaded | 1 本 | カルーセルの矢印 |
unloaded を「読み込み失敗」と読み違えないこと。丸数字が出るページでだけ 1 本ずつ落ちてくる。本文フォントをサブセットしていて記号が欠けるケースの解法として流用できる。
ウェイトは 400 / 500 / 700 の 3 本しか持っていない。下層の h3 に当たっている font-weight: 600（34 要素）は実体が無く、上方向の 700 で描画される。600 と書かず 700 と書くこと。
body の 0.1em は 16px に対して 1.6px と計算され、その px 値が子へ降りる。だから 1.6px という値は 2 通りの出方をする。サイズが違う要素に同じ px が並んでいたら継承、サイズに比例して px が動いていたら em 宣言、と読み分ける。
行間は 1.6 が既定で、読ませる長い段落だけ 2.0 に開く（下層の 18px 本文、27 要素）。詰めるのは 1.4（Hero Lead）、1.3（Hero H1）、1.1（大見出し）、1.0（ナビ・青帯 h1）。font-feature-settings: "palt" が 1,070 / 684 要素に効いている。字間 em とセットなので、片方だけ真似ない。欧文の合字を切る "clig" 0, "liga" 0 も 30 要素にある。
実測 50 要素。カードもボタンも表も全部 4px。pill も 0px も使わない。4.8px / 6.112px は外部のフローティングバナー由来なので無視してよい。
印刷・製本・郵送作業が不要になり、契約作業のための出社をなくせました。
ワークフローとリマインド機能で、差し戻しの手間が減りました。
印刷代やレターパック代、印紙代をまとめて削減できました。
| プラン | 月額 | 送信件数ごとの費用 | ユーザー数 |
|---|---|---|---|
| Light | 11,000円（税込12,100円） | 220円（税込242円） | 無制限 |
| Corporate | 30,000円（税込33,000円） | 200円（税込220円） | 無制限 |
| Enterprise | 年額 税込145,200円※1 | 個別見積もり | 無制限 |
表ヘッダは面 #eaf0f6 / 14px / 700 / letter-spacing: 0.04em / 行間 1.57。本体は面 #fafcfd / 14px / 400 / 行間 1.40。罫線は淡いグレー、角丸は外周の 4px だけ。
実サイトは outline: none でフォーカスリングを消している。これは真似てはいけない実装。キーボード操作でどこにいるか分からなくなる。新規実装では outline: 2px solid #0d64c9; outline-offset: 2px を必ず明示すること。
階層 1 は 0 3px 6px rgba(0,0,0,.1) に一本化されている。カードは全部これ。浮かせたいものだけ影の色を rgba(48, 54, 62, 0.1)（本文色の 10%）にして、黒い影より面に馴染ませている。10 周年バナーは 0 1px 5px rgba(48,54,62,.1), 0 5px 9px rgba(13,100,201,.1) と青の影を重ねている。filter: drop-shadow() / text-shadow は 0 件。
ブレークポイントはすべて min-width で書かれたモバイルファースト。max-width は 1 件も無い。320 / 375 / 605 / 767 / 768 / 798 / 1230 / 1280 / 1325px。screen and (min-width: 768px) and (min-width: 1280px) という入れ子のまま出ている指定もある（実質 1280px）。
html は 16px 固定、body は 1440 / 1200 / 834px で 16px、375px で 14px。行間は 1.6 のまま（25.6px → 22.4px）、字間は 0.1em なので 1.6px → 1.4px に自動追従する。見出しも連動し、h1 は 60px → 42px、h2 は 40px → 23px（字間は 1.6px → 0.92px = 0.04em のまま）。body のサイズを落とすだけで、字間も行間も見出しも比率で追従する設計。px に読み替えると、この自動追従が全部壊れる。
ヘッダーの CTA は高さ 38px で WCAG の 44px を下回るので、新規実装では 44px 以上を確保すること。