CorporateJapanPicked 2026.09.26

207株式会社（ニーマルナナ）

コーポレートのWebデザイン参考 — 物流テック・ラストマイル配送

出典: 207-inc.com

Editor's note — 編集部の視点

事業の説明より先に、物流の街を丸ごと描いてる。

物流テック企業207株式会社のコーポレートサイトは、ロボットやドローンが行き交うアイソメトリックの街で、ラストマイル配送の全体像を一枚で掴ませる。

IrisColor & Brand

セクションの地が、ただのグレーじゃなくてほんのり紫がかったラベンダーグレーなのがすき。洗いたてのシーツみたいにやさしくて、紺のボタンがきりっと映えるの。

1街のイラストはロゴと同じ紫を軸に3色へ絞る。描き込みの多い絵でも、ブランドの色として記憶に残る
2ビジョンは暗い実写に「3〜5年」「2050年」の縦の時間軸。絵から写真へ切り替え、未来を現実の話にする
3事業紹介は片側だけ大きく角丸にした画像枠を左右交互に。3つのサービスを同じリズムで読み比べられる

Color

207株式会社（ニーマルナナ）の配色

Typography

使用フォントと無料の代替

見出し・本文

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

英字サブコピー・ラベル

Aa あア

使用: Hanken Grotesk
代替: Hanken Grotesk

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型72px · 1.4 · 700
見出しKatapick 型40px · 1.4 · 700
小見出しKatapick 型16px · 1.3 · 700
本文The quick brown fox — 参考を型にする16px · 2 · 400
ボタンKatapick 型16px · — · 400

Structure

ページ構成（上から順）

01
ヘッダー
左上に斜線を組み込んだ「207」ロゴ、右上に事業内容・会社概要・お知らせ・採用情報・お問い合わせのテキストナビ。SPでは紺の円形メニューボタンになる。
02
ファーストビュー
「行動の自由を加速させる」を2行の太い和文で左上に置き、英訳を小さく添える。物流・ロボット・ドローンなどを描いたアイソメトリックの街のイラストが画面の右半分から下を占め、下部に「Missionについて」ボタン。
03
ビジョン（短期・中期・長期）
暗くした実写（配送員、配送車、自動運転車両など）を全面に敷き、左側の縦線上に「3〜5年」「2035年〜2045年」「2050年」の時間軸、写真の上に白い太字の見出しと1行の説明を重ねる。
04
事業内容
トドクサポーター・トドククラウド・トドク便の3サービスを、アプリ画面や人物写真を入れた角丸の画像枠と説明文を左右交互に並べて紹介する。
05
会社概要・沿革・お知らせ
フルページキャプチャは9000pxで切れており、ここから下は抽出データの見出しのみで確認。会社概要・これまでの歩み・お知らせが続く。
06
受賞歴・掲載メディア・投資パートナー
抽出データの見出しより、受賞歴、掲載メディア、投資パートナー6件（VC・事業会社・個人）の一覧が並ぶ。
07
行動指針
BE PROFESSIONAL / BE OPEN / BE SINCERE の3項目（見出しより）。
08
採用情報・公式SNS
採用メッセージの見出しと公式SNSのセクション（見出しより）。抽出データでは採用情報が高さ約3100pxと長い。
09
お問い合わせ・フッター
お問い合わせと開設予定の支店一覧（見出しより）、フッターで締める。

Interaction

アニメーション・インタラクション

ビジョンのセクションは、フルページキャプチャに同じ場面が複数回写っていることから、写真と見出しをピン留めしてスクロールで切り替える演出と思われる（GSAP ScrollTrigger の pin + scrub で再現可能）
見出しがキャプチャ内で途中まで表示されている箇所があり、1文字ずつ表示するテキストアニメーションと思われる（SplitText などで文字を分割し stagger で出す）
Lenis による慣性スクロールが入っており、長いピン留め区間でも動きが滑らか
ビジョン下部の細い白線はスクロール進捗を示すバーと思われる（ScrollTrigger の progress を scaleX に反映）

スクロールのコマ撮りLenis · 300–1680000ms

検出された技術:GSAPLenisGoogle Fonts

Reproduce

再現するときのポイント

01FVは明るいオフホワイト背景に、紫・水色・黒の3色に絞ったアイソメトリックのイラストを大きく置く。イラストの色をロゴの紫と揃える
02ビジョン部は写真に黒の半透明オーバーレイをかけ、白文字の見出しと左側の縦線＋年代ラベルで時間軸を表す
03事業紹介の画像枠は border-radius を片側だけ大きくとり、左右交互の2カラムにする
04和文見出しは Noto Sans JP の太めのウェイトで letter-spacing を広めにとり、英字は Hanken Grotesk で小さく添える

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

207-inc.katapick.md

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