# UNION TEC（ユニオンテック株式会社）｜コーポレートのWebデザイン参考

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

- URL: https://www.union-tec.jp/
- 解説ページ: https://katapick.com/sites/union-tec
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: 空間デザイン・内装設計施工
- テイスト: 大胆なタイポ、モノクロ、マーキー、3D/WebGL、写真主体
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

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

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

## 配色
- #ffffff White（背景）
- #f9f9f9 Grid Gray（方眼線 / カード面）
- #000000 Black（テキスト / ロゴ / ボタン / Recruit 背景）
- #cccccc Silver（非選択の言語表示（スクショから採色））

## フォント
- 英字見出し・ナビ・日付: Helvetica LT Pro（代替: Inter）
- 和文本文・見出し（Medium / DeBold）: ゴシックMB101（Morisawa Fonts）（代替: Noto Sans JP）

## よくある質問
### UNION TECのサイトで使われているフォントは？
英字に Adobe Fonts の Helvetica LT Pro、和文に Morisawa Fonts のゴシックMB101（Medium / DeBold）が使われています。無料で近づけるなら Inter と Noto Sans JP の組み合わせがおすすめです。

### 写真を楕円で切り抜くレイアウトはどう作る？
画像を包む要素に border-radius: 50% か clip-path: ellipse() を指定します。スクロールに合わせて楕円を広げる場合は、GSAP ScrollTrigger で clip-path の値や scale を補間します。

### UNION TECのデザインはどんな業種の参考になる？
内装・建築・空間デザイン、設計事務所など、施工写真を見せつつ企業としての思想も伝えたいBtoB企業のコーポレートサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/union-tec からダウンロードできます。
出典: Katapick（https://katapick.com）