URLをAIに渡すだけじゃ、
数字までは取れない。

1---
2title: "207株式会社（ニーマルナナ） 再現用デザイン仕様書"
3source: https://207-inc.com/
4katapick: https://katapick.com/sites/207-inc
5category: コーポレート
6region: 国内 (JP)
7tags: [イラスト, 写真主体, スクロール演出, 角丸, ロングページ, ライト]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# 207株式会社（ニーマルナナ） — 再現用デザイン仕様書
17 
18> 事業の説明より先に、物流の街を丸ごと描いてる。物流テック企業207株式会社のコーポレートサイトは、ロボットやドローンが行き交うアイソメトリックの街で、ラストマイル配送の全体像を一枚で掴ませる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22 
23## 1. 見どころ
24- 街のイラストはロゴと同じ紫を軸に3色へ絞る。描き込みの多い絵でも、ブランドの色として記憶に残る
25- ビジョンは暗い実写に「3〜5年」「2050年」の縦の時間軸。絵から写真へ切り替え、未来を現実の話にする
26- 事業紹介は片側だけ大きく角丸にした画像枠を左右交互に。3つのサービスを同じリズムで読み比べられる
27 
28## 2. カラー
29 
30| 変数 | HEX | 名前 | 役割 |
31| --- | --- | --- | --- |
32| `--bg` | `#f8f8f8` | Off White | 背景 |
33| `--text` | `#222222` | Ink | テキスト |
34| `--bg-3` | `#000000` | Black | ビジョンセクション背景（写真の下地） |
35| `--bg-4` | `#ebebf2` | Lavender Gray | セクション背景 |
36| `--accent` | `#24274a` | Midnight Navy | ボタン・メニューボタン |
37| `--bg-6` | `#307add` | Logistics Blue | セクション背景（フルページ未撮影範囲） |
38 
39```css
40:root {
41  --bg: #f8f8f8; /* 背景 */
42  --text: #222222; /* テキスト */
43  --bg-3: #000000; /* ビジョンセクション背景（写真の下地） */
44  --bg-4: #ebebf2; /* セクション背景 */
45  --accent: #24274a; /* ボタン・メニューボタン */
46  --bg-6: #307add; /* セクション背景（フルページ未撮影範囲） */
47}
48```
49 
50### 実際の文字色 × 背景色のコントラスト（WCAG 2.2）
51 
52| 文字色 | 背景色 | 比 | 判定 |
53| --- | --- | --- | --- |
54| `#222222` | `#f8f8f8` | 14.98:1 | AAA |
55| `#ffffff` | `#000000` | 21:1 | AAA |
56| `#222222` | `#ffffff` | 15.91:1 | AAA |
57| `#ffffff` | `#307add` | 4.24:1 | AA（大きい文字のみ） |
58| `#ffffff` | `#24274a` | 14.34:1 | AAA |
59 
60> 4.5:1 未満の組は、本文サイズで使うと読みにくくなります。再現時は明度を調整してください。
61 
62## 3. タイポグラフィ
63 
64| 役割 | 使用フォント | 無料の代替 |
65| --- | --- | --- |
66| 見出し・本文 | Noto Sans JP | Noto Sans JP |
67| 英字サブコピー・ラベル | Hanken Grotesk | Hanken Grotesk |
68 
69```html
70<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Hanken+Grotesk:wght@400;500;700&display=swap">
71```
72 
73### 実測タイプスケール（1440px幅）
74 
75| 役割 | サイズ | 行間 | 字間 | 太さ | 書体 |
76| --- | --- | --- | --- | --- | --- |
77| 特大見出し | 72px | 1.4 | 0.12em | 700 | Noto Sans JP |
78| 見出し | 40px | 1.4 | 0.16em | 700 | Noto Sans JP |
79| 小見出し | 16px | 1.3 | 0.16em | 700 | Noto Sans JP |
80| 本文 | 16px | 2 | 0.12em | 400 | Noto Sans JP |