Scroll Down

AIで企業のOSを
つくり変える会社

私たちについて 見出しは ten-mincho-antique 700(代替: Zen Antique)。ゴシックではない
01 / Colors
Color Palette

白地に、赤ひとつ

アクセントは #f8444d の 1 色だけ。面にも文字にも罫にも同じ赤を使い回す。本文の黒は純黒ではなく #16171d、面の階調は #f0f1f4 と #fafafc の 2 段しかない。

Primary
#f8444d
★面 17 要素 / 文字 37 要素。CTA・フィルタ選択・Scroll Down・ラベル
Text / Surface Dark
#16171d
★本文 59 要素かつ塗り面 8 要素。純黒ではない
Text Muted
#585e74
補助テキスト。可視上位 3 色には入らない
Surface Muted
#f0f1f4
面 4 要素。フィルタの非選択状態
Surface Subtle
#fafafc
宣言のみ。実サイトでは可視 0 要素
Border
#c5c8d3
区切り線・カード枠
Primary Hover
#fff2f3
ホバー専用。静止状態では可視 0 要素
Form Border
#e2e8f0
slate-200。フォーム部品だけ別系統

フォーム部品だけブランドのニュートラルから外れている。本文の黒は #16171d なのに入力欄の文字は #020617(slate-950)、罫は #c5c8d3 ではなく #e2e8f0(slate-200)。実装の実態としてそうなっているので、既存ページに合わせるならこの 3 値を使う。

02 / Typography
Typography

見出しは明朝アンチック

一見ヘビーゴシックだが、実体は 貂明朝アンチック(ten-mincho-antique)700。仮名が写植のアンチック、漢字がゴシック寄りという字面で、ゴシックに置き換えると仮名の表情が消える。和文の本文には Web フォントを 1 本も使わず、游ゴシック体(OS ローカル)で組む。

101213 142rem2.8rem 3.2rem6.4rem 16.8rem
Hero (h1) ★貂明朝アンチック / 16.8rem(実測 142.306px)/ 700
lh 1.12 / ls 0.08em / palt
AIで企業のOSを
Hero Accentnexa(代替 Poppins)/ 19.6rem / 600
lh 1.00 / ls -0.02em(和文とは逆に詰める)
AO
Section Heading (h2) ★貂明朝アンチック / 6.4rem(54.2117px)/ 700
lh 1.32 / ls 0.08em / palt
AIを前提とした企業運営
Lead貂明朝アンチック / 3.2rem / 700
lh 1.32 / ls .128rem / 色 #f8444d
これまで、200社を超えるAI変革を実現
Section Labelnexa / 1.6rem / 500
lh 1.20 / ls .064rem / 色 #f8444d
Feature
Card Heading (h3)游ゴシック体 / 2.8rem / 700
lh 1.50 / ls .096rem
経営層向けAI活用伴走支援
Person Name游ゴシック体 / 2rem / 700
lh 1.20 / ls .036rem(28 要素)
鴨居 啓人
Body ★游ゴシック体 / clamp(13px, 1.6rem, 16px)
lh 1.65 / ls .064rem(rem 固定)
生成AIの登場以降、AIは我々の想像を超えるスピードで進化を続けている。AIはただのツールではなく、人と横並びで仕事をする存在になりつつある。
Nav Linknexa / 14px(px 固定) / 500
lh 1.30 / ls 0.28px(px 固定)
About Service News
Tag游ゴシック体 / 12px(px 固定) / 500
lh 1.42 / ls .024rem(可視 37 要素で最多)
プレスリリース 経営層向け支援 事業変革

サイズには 2 つの系統がある。見出し・本文・カードは rem で viewport に連動し、ナビ・ボタン・チップは px 固定(12 / 13 / 14px)。UI 部品はどの画面幅でも同じ大きさにする設計。
字間も同じ考え方で rem 宣言。em で書くとサイズに比例してしまい、「本文の字間は絶対値」という設計が崩れる。例外は 40px を超える大見出しだけで、そこは 0.08em(ヒーローも h2 もちょうど 8%)。

03 / Components
Components

角丸は1.2rem、影はゼロ

border-radius は実測 3 値だけ ——1.2rem(73 要素)、0.4rem(28 要素)、999px(1 要素)。静止状態の box-shadow は 0 要素で、--shadow-card は宣言されているだけ。

私たちについて Get In Touchお問い合わせ Primary Dark:#16171d / radius 1.2rem / padding 1.6rem 5.6rem / 14px weight 700
Primary Round:#f8444d / radius 999px / 英語+日本語の2段

フィルタだけ border-radius: 0。このサイトで唯一の角丸ゼロ部品。選択状態が #f8444d、非選択が #f0f1f4。

AI導入戦略策定支援

AIのプロフェッショナルが戦略策定をご支援します。現状の業務を棚卸しし、効果の出る領域から着手します。

経営層向け支援事業変革

経営層向けAI活用伴走支援

経営層がAIの可能性と限界を掴み、自ら意思決定できる状態をつくります。

経営層向け支援

新規事業開発支援

創業以来50以上のAIネイティブな事業立ち上げで培った型を持ち込みます。

事業変革組織変革
代表取締役CEO
鴨居 啓人
執行役員 COO
高橋 椋一
執行役員 CHRO
高橋 寛行
執行役員 CTO
山田 拓郎

人物写真だけ --radius-xs(0.4rem / 実測 3.38823px)。カードとボタンは 1.2rem。

Get In Touch
AI活用のご相談はこちらから
→
04 / Form
Form

入力欄だけ別系統

フォームのトークンは Tailwind slate の素通し(#020617 / #64748b / #e2e8f0)。フォーカスはアクセントの赤で示す。autofocus は使わず .is-focus クラスで見せている。

送信する
05 / Layout
Layout & Spacing

rootは8.47px

html { font-size: calc(100vw / 170) } ——1440px で 1rem = 8.47058px、デザイン幅 1700px で 1rem = 10px になる流体ルート。このサイトの寸法はすべてこの rem に乗っている。16px や 62.5% に変えると --section-padding-y: 14rem をはじめトークンの数値が全部壊れる。

0.8rem
6.78px @1440
1.2rem
10.16px ★gap 最多(19 要素)
2.4rem
20.33px カード間
3.2rem
27.11px ブロック間
5.2rem
44.05px セクション内の段
8rem
67.76px ★--section-padding-x
14rem
118.61px ★--section-padding-y
72rem
609.88px 本文カラム
0.4rem
写真
0.8rem
1.2rem
既定
999px
丸ボタン
0
フィルタのみ

ブレークポイントは (width <= 768px) の 1 本だけ(実測 15 件)。中間幅の調整は html の流体 font-size が引き受けている。(hover: hover) 11 件、(prefers-reduced-motion: reduce) 10 件でホバー演出とアニメーションを丁寧に切り分けている。

06 / Guidelines
Do's and Don'ts

やること・やらないこと

Do

  • html { font-size: calc(100vw / 170) } を先に置く。全トークンがこれ前提
  • 見出しは ten-mincho-antique 700。落ちる先は明朝(Hiragino Mincho ProN)
  • 本文・UI は游ゴシック体。和文の Web フォントは読み込まない
  • 字間は rem で宣言(本文 .064rem / タグ .024rem / ボタン .028rem)
  • 40px 超の大見出しだけ letter-spacing: 0.08em + palt
  • 巨大な欧文は -0.02em と逆に詰める
  • 赤は #f8444d 1 色。本文色は #16171d
  • ナビ・ボタン・チップの font-size は px 固定

Don't

  • 見出しをヘビーゴシックにしない(実体は明朝アンチック)
  • nexa の font-weight: 300 を使わない(unloaded)
  • 本文の letter-spacing を em で書かない
  • カード・ボタンに box-shadow を足さない(静止時 0 要素)
  • グラデーションをフラットにしない(ノイズ 24% が前提)
  • アクセント色を 2 色目にしない
  • #fafafc を面に使わない(実サイトでは未使用)
  • フォーム以外に slate の値を持ち込まない