ビザスク（VisasQ） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-10-16 / 対象: https://visasq.co.jp/, https://visasq.co.jp/service/

1. Visual Theme & Atmosphere

• デザイン方針: 純黒の本文に、1色の鮮やかな青だけを差す。 角丸は 3px という極小の一段しかなく、面はほぼ全部が直角に近い矩形。B2B のリード獲得を目的にした、装飾を削った業務的な設計
• 密度: 高い。ファーストビューに 2 ステップの資料ダウンロードフォームを常設し、数値（80万人超・500カテゴリ以上）を大きく並べる
• キーワード: ビビッド・ブルー、純黒、角丸3px、数値訴求、フォーム常設

このサイトの核心は4つある。

1. font-feature-settings: "pkna" を body に 1 行だけ書いて 1937 要素へ継承している。ところがこれは 1px も効いていない。 pkna（Proportional Kana＝仮名だけをプロポーショナル詰めする OpenType feature）は、このサイトが使っている Google Fonts 配信の Noto Sans JP が持っていない。同じ要素・同じ書体で実測すると normal と pkna が完全同幅で、palt だけが詰まる（下表）。詰めたいなら palt を書く
2. letter-spacing は normal が既定（可視 329 要素中 329 が normal ＝トップの最多値）。字間を当てるのは見出しと数値だけで、本文は一切いじらない
3. ウェイトは 400 と 700 の二択（可視 219 / 174 要素）。500 と 900 はそれぞれ 4 要素しかなく、500 は全部 Cookie 同意バナー（外部ウィジェット）。サイト本体は 2 段だけ
4. ルートは 16px 固定だが、body だけが 1024px 付近を境に 14px → 15px と「モバイルで大きくなる」。 画面が狭いほど本文を大きくする設計で、向きが一般と逆

2. Color Palette & Roles

Primary（ブランドカラー）

青は 3 つあるが役割が分かれている。 #0052ff が行動を促す色、#003199 は実績を見せる色、#08277f はフォームの枠。新規実装では #0052ff だけで組んでよい。

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出し。可視 197 要素。このサイトは本文に純黒を使う（#333333 に逃げない）
• Text Secondary (#7f7f7f): フォームのラベル、補足文。可視 122 要素と多い。50% グレーちょうど
• Text on Dark (#ffffff): 青面・写真上のテキスト（可視 35 要素）
• Danger (#dc2626): フォームの必須マーク * のみ（可視 2 要素）
• Background（トップ） (#f0f0f0): ページ地色。pageBackground.resolved = rgb(240,240,240)
• Background（下層） (#edf4fe): 下層は淡い青に変わる（/service/ の resolved）。トップと同じ色にしない
• Surface (#f6f6f6): カードの面（可視 7 要素）
• Surface Blue (#eaf2fb): ビザスクなら の比較ブロック
• Border (#d9d9d9 / #e1e1e1): 区切り線

外部ウィジェット由来（実装しない）

• #1863dc（Cookie バナーの カスタマイズ 同意しない）、#212121（同バナー本文）は Cookie 同意バナーの色。サイトの設計色ではない

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP（Google Fonts）。400 と 700 の 2 ウェイトだけを読み込み、どちらも loaded
• 明朝体: 使わない。セリフ系の和文は 2 ページとも可視 0 要素

3.2 欧文フォント

• サンセリフ: Inter（400 / 700 / 800、すべて loaded）。スタックの先頭に置いて欧文・数字を担当させる
• Roboto（700）も loaded で、数値カウンタ（230,000 570,000）11 要素だけに使われている

3.3 font-family 指定

css/* 実サイトの宣言をそのまま */
font-family: Inter, "Noto Sans JP", YuGothic, "Yu Gothic Medium", "Yu Gothic",
             "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
             "Hiragino Sans", Meiryo, sans-serif;

ただし游ゴシックの並びは誤っている。 YuGothic（Regular）が "Yu Gothic Medium" より前にあるため、Noto Sans JP が落ちた Windows では Regular に当たって細く出る。正しくは Medium を先に置く:

css/* 正しい並び（Windows で Medium を拾わせる） */
font-family: Inter, "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium",
             YuGothic, "Yu Gothic", "Helvetica Neue", Arial,
             "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

実害は限定的（Noto Sans JP が loaded なので通常そこまで到達しない）が、フォント配信が落ちた時だけ細くなるので直す価値がある。

3.4 文字サイズ・ウェイト階層

ウェイトは 400 と 700 だけで組む。 900 はヒーローの数値 4 要素のみ、500 は Cookie バナー由来。600 は設計に存在しない。

3.5 行間・字間

css/* body に 1 回だけ書いて継承させる */
line-height: 1.7;          /* = 23.8/14。可視 67 要素 */
letter-spacing: normal;    /* ★既定。可視 329 要素 */

• 行間は無単位の比率で書く。em や px で固定しない。CSS 全文の最頻は 1.5（65 箇所）、次いで 1（61）、2（31）、1.8（21）、1.7（20）
• 字間は normal が既定。 当てるのは次の 3 つだけ:

• CSS の宣言数は .03em 17 箇所 / .05em 14 箇所 / 0 11 箇所 / -.04em 3 箇所。本文には一切当たっていない

3.6 禁則処理・改行ルール

• word-break は normal（既定のまま）。auto-phrase は使っていない
• ヒーローの 3 行（アクセスしづらい / 一次情報の収集を / たった1時間で）は要素を分けて手で改行している。自動改行に任せていない

3.7 OpenType 機能 — 宣言はあるが効いていない

css/* 実サイトの body 宣言 */
body { font-feature-settings: "pkna"; }   /* ← 1937 要素へ継承。だが無効 */

同一ページ・同一書体（Noto Sans JP 400 / 100px）で measure した実測値:

• pkna は Google Fonts 配信の Noto Sans JP に入っていないため、ブラウザが黙って無視する。 エラーも警告も出ない
• 同じ CSS には font-feature-settings: "palt" も 3 箇所書かれているが、可視要素には 1 つも当たっていない（継承されているのは効かない pkna の方）
• 再現するときは "palt" を書く。 pkna をそのまま写すと「詰めたつもりで 1px も詰まっていない」状態を再現することになる

css/* 正しく詰めたいとき */
body { font-feature-settings: "palt"; }

3.8 縦書き

該当なし。writing-mode が horizontal-tb 以外の要素は 2 ページとも 0 要素。縦組みは使わない。

4. Component Stylings

Primary Button（青の面）

cssbackground: #0052ff;
color: #ffffff;
font-size: 20px;          /* 下層の大きい CTA。小さい版は 14px / 16px */
font-weight: 700;
line-height: 30px;
letter-spacing: normal;
border-radius: 3px;       /* ★このサイトの角丸は 3px がほぼ唯一 */
border: none;

Secondary Button（白面・青文字）

cssbackground: #ffffff;
color: #0052ff;
font-size: 16px;
font-weight: 700;
border-radius: 3px;

フォーム（ファーストビュー常設）

css/* 見出し帯 */
background: #08277f;
color: #ffffff;
border-radius: 4px 4px 0 0;
/* 本体 */
background: #ffffff;
border-radius: 0 0 4px 4px;
/* select */
border-radius: 6px;

• ラベルは 12px / #7f7f7f、必須マーク * は #dc2626
• 送信ボタン 次へ は #0052ff の全幅

角丸の実測

2px の角丸は Cookie バナー由来。実装しない。

5. Layout Principles

• ヒーローは左にコピー、右に資料請求フォームの 2 カラム固定。フォームは常にファーストビュー内に置く
• 実績値は横 3〜4 列のグリッドで、数値を 42px / weight 900 で、単位を小さく添える
• 下層（/service/）は淡い青（#edf4fe）の地に白いカードを重ねる構成

6. Depth & Elevation

影は実質 1 つだけ。

css/* フローティングの資料ダウンロード CTA（可視 1 要素） */
box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 19px 0px;

• カード・ボタンには影を付けない。面の差（#ffffff / #f6f6f6 / #f0f0f0）だけで階層を作る
• rgba(172,171,171,.3) 0 -1px 10px は Cookie バナーの影。実装しない

7. Do's and Don'ts

Do

• 本文は純黒 #000000、補助は #7f7f7f の 2 段で組む
• ウェイトは 400 と 700 だけを使う
• 角丸は 3px。ボタンもカードも同じ値にする
• 字間は normal を既定にし、見出しと数値だけ .05em / -.04em を当てる
• 本文の行間は 1.7（body に 1 回書いて継承させる）
• 青は #0052ff 1 色に絞る

Don't

• font-feature-settings: "pkna" を書かない。 Noto Sans JP では 1px も詰まらない。詰めるなら "palt"
• YuGothic を "Yu Gothic Medium" より前に置かない（Windows で細くなる）
• 500 / 900 を本文やボタンに使わない（500 は Cookie バナー、900 は数値専用）
• 角丸を 8px や 12px にしない。 このサイトの硬さは 3px から来ている
• 影でカードを浮かせない。 面色の差で段を作る
• 下層の地色をトップと同じにしない（トップ #f0f0f0 / 下層 #edf4fe）

8. Responsive Behavior

• html は 6 幅すべて 16px で固定。 流体ではない
• body は 1200px と 834px の間で 14px → 15px に「増える」。 狭い画面ほど本文が大きい。一般的な縮小方向と逆なので、ブレークポイントを写し間違えると印象が変わる
• h1 は同じ境目で 41.87px → 29px に落ちる（階段。clamp() ではない）

9. Agent Prompt Guide

このサイトの見た目でUIを作るときは、次を守る。

1. 書体は Inter + Noto Sans JP（400 / 700 のみ）。スタックの先頭は Inter、2 番目に Noto Sans JP
2. font-feature-settings は "palt" を使う。"pkna" と書かない（実サイトは pkna だが無効）
3. 本文 #000000 / 補助 #7f7f7f / 強調 #0052ff の 3 色で組む
4. 角丸は 3px に統一。影は使わず面色で段を作る
5. 本文の行間は 1.7、字間は normal。見出しだけ .05em、数値だけ -.04em
6. ルートは 16px 固定。本文は デスクトップ 14px / 834px 以下 15px
7. ウェイトは 400 と 700 の二択。600 を作らない