CorporateJapanPicked 2026.09.26

UNION TEC（ユニオンテック株式会社）

コーポレートのWebデザイン参考 — 空間デザイン・内装設計施工

出典: union-tec.jp

Editor's note — 編集部の視点

画面より大きい社名ロゴに、写真の窓が開く。

空間デザイン・施工のユニオンテックのサイトは、画面幅を超えるロゴタイプに楕円の窓を開け、白と黒だけで“余白の扱い方”そのものを自己紹介にしている。

LeoMotion & Direction

ステートメントの本文、途中からグレーなの！スクロールで一行ずつ黒く塗られていく演出っぽくて、朗読劇で照明が当たっていく感じ！最後の黒地の小さな楕円も広がりそうで、鳥肌！

1巨大なロゴタイプに楕円で切り抜いた写真を重ねる。文字が壁、写真が窓になり、FVがひとつの空間になる
2キャッチコピーを画面幅いっぱいに字間を離して組む。読む速度を落とさせ、一語ずつの重みを立てる
3薄い方眼を全面に敷き、色は白と黒のみ。図面のような下地が、設計施工の会社である説得力を足す

Color

UNION TEC（ユニオンテック株式会社）の配色

Typography

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

英字見出し・ナビ・日付

Aa あア

使用: Helvetica LT Pro
代替: Inter

和文本文・見出し（Medium / DeBold）

Aa あア

使用: ゴシックMB101（Morisawa Fonts）
代替: Noto Sans JP

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

見出しKatapick 型16px · 1.5 · 400
小見出しKatapick 型18px · 1.6 · 400
本文The quick brown fox — 参考を型にする28px · 2 · 400
ボタンKatapick 型16px · 1.6 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左上にロゴと Ja / En 切替、中央右寄りに2列のテキストナビ、右端に黒い「Contact」と枠線の「Menu」のピル型ボタン。ボタンはスクロール後も右上に残る。
02
ヒーロー
薄い方眼の白地に、画面幅を超える巨大な「UNION TEC」を横一列に流し、中央に横長楕円で切り抜いた写真を重ねる。下部に字間を大きく離したキャッチコピーとリード文、右下に Scroll。
03
ステートメント
左に数行ずつ区切った企業メッセージ、右に縦長楕円の写真。背景に薄いロゴタイプが入り、本文は途中まで黒・以降はグレーで表示されている。
04
Capability
左に見出しと「Discover more」ボタン、右に Hospitality / Design / Technology / Quality の4枚のカードを立体的に傾けて散らす。各カードは線画の楕円アイコンと和文の短い見出し。
05
Service
見出しと説明文の下に全幅のぼかした写真を敷き、白い大きな英字で4つの事業名を並べる。右上に楕円の小さな写真、右下に「Discover more」。
06
Featured Projects
Shop / Office / Hotel などのカテゴリラベルと案件名、写真のカードを横に並べ、右上の左右矢印で送るスライダー。
07
News
左に見出しと「View All」、右にカテゴリのタブ（すべて・プレスリリース・ART など）とサムネイル付きの記事リスト。
08
Company / Office・Access
横長楕円に切り抜いたモノクロのオフィス写真の中央に、大きな黒いピル型ボタン2つを縦に並べる。
09
Recruit・フッター
黒背景に切り替わり、中央に小さな楕円の写真を置く。フルページキャプチャは9000pxで切れており、以降の「101名の事業責任者」の見出しとフッターは抽出データでのみ確認。

Interaction

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

ヒーローの巨大ロゴタイプはキャプチャごとに位置がずれており、横に流れるマーキーと思われる。テキストを2つ並べて translateX を -50% までループさせる CSS animation で再現できる
楕円マスクは PC では横長、SP では角丸の長円になっており、clip-path か border-radius: 50% で切り抜いている。中の写真はキャプチャごとに異なり、映像かスライドショーと思われる
ステートメントの本文が途中からグレーになっており、スクロール量に合わせて文字色が黒く塗られていく演出と思われる（GSAP ScrollTrigger の scrub で行ごとに color を補間）
Capability のカードは遠近感をつけて傾いており、抽出データにある Three.js / WebGL で平面を3D空間に配置していると思われる。CSS の perspective と rotateY でも近い見た目になる
Recruit は黒地の中央の小さな楕円が、スクロールに合わせて拡大していく演出と思われる。慣性スクロールは Lenis

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

UNION TEC（ユニオンテック株式会社）をスクロールしたときのフレーム1 — 01

UNION TEC（ユニオンテック株式会社）をスクロールしたときのフレーム2 — 02

UNION TEC（ユニオンテック株式会社）をスクロールしたときのフレーム3 — 03

UNION TEC（ユニオンテック株式会社）をスクロールしたときのフレーム4 — 04

UNION TEC（ユニオンテック株式会社）をスクロールしたときのフレーム5 — 05

UNION TEC（ユニオンテック株式会社）をスクロールしたときのフレーム6 — 06

検出された技術:Three.jsLenisWordPressAdobe FontsLottieWebGL

Reproduce

再現するときのポイント

01背景全体に薄いグレー #f9f9f9 の方眼を敷き、設計図のような下地をつくる
02写真はすべて楕円・長円で切り抜き、形を統一することでブランドの記号にする
03ロゴタイプは画面幅を超えるサイズで使い、写真の背面に回して奥行きを出す
04色は白黒に絞り、ボタンは黒塗りと枠線のピル型2種類だけにする

再現MDに含まれるもの

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

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

union-tec.katapick.md

1---
2title: "UNION TEC（ユニオンテック株式会社） 再現用デザイン仕様書"
3source: https://www.union-tec.jp/
4katapick: https://katapick.com/sites/union-tec
5category: コーポレート
6region: 国内 (JP)
7tags: [大胆なタイポ, モノクロ, マーキー, 3D/WebGL, 写真主体]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# UNION TEC（ユニオンテック株式会社） — 再現用デザイン仕様書
17 
18> 画面より大きい社名ロゴに、写真の窓が開く。空間デザイン・施工のユニオンテックのサイトは、画面幅を超えるロゴタイプに楕円の窓を開け、白と黒だけで“余白の扱い方”そのものを自己紹介にしている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22