CorporateOverseas / GRPicked 2026.09.26

Units

コーポレートのWebデザイン参考 — 学生向け住居（家具付き学生寮）

出典: units.gr

Editor's note — 編集部の視点

左端のナビが、5色のカードでそのまま目次になってる。

アテネの学生寮ブランドUnitsのサイトは、左端に5色の角丸カードを積んだ固定ナビを置き、その色を各セクションへ渡して、寮の明るさを構造にまで持ち込む。

LeoMotion & Direction

最後の最後で来る！方眼の上に色の四角がばらまかれて、左下に巨大なロゴがドン！ライブのカーテンコールみたいで鳥肌！フッターでここまで盛り上げるサイト、なかなかないって！

1番号付きの色面カードを左端に積んだ固定ナビ。どこまで読み進めても、次に行ける場所が色で見える
2設備紹介は写真とリストのカードを横に流す。縦に長いページの途中に、寄り道のリズムが生まれる
3ドット絵のアイコンと線画のトンネル。学生寮の説明に、ゲームのような遊びをひとさじ混ぜる

Color

Unitsの配色

Typography

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

見出し（幅広の極太書体）

Aa あア

使用: Bunch
代替: Archivo Black

本文・ナビ・ボタン

Aa あア

使用: Aeonik Pro
代替: Manrope

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

本文The quick brown fox — 参考を型にする15px · 1.2 · 400
ボタンKatapick 型16px · — · 400
注釈The quick brown fox — 参考を型にする25.5px · 1 · 850

Structure

ページ構成（上から順）

01
サイドナビ
左端にロゴと、01〜04の番号付き色面カード（青・黄・橙・緑）、紫の「Book your Unit」、言語切替、SNSアイコンを縦に積み、スクロール中も固定する。
02
ヒーロー
共用スペースの写真を大きな角丸で右側いっぱいに置き、中央に白い極太の2行見出し、サブコピー、黒いピル型の予約ボタンを重ねる。
03
ロケーション
黄色の角丸カードに見出しと説明、右にオレンジ系に塗った市街地図（mapbox）を並べ、物件の位置をピンで示す。
04
オールインクルーシブ
赤いマーキー帯の下で、写真カードとSecurity・Supportなどの設備リストカードを横に流す。フルページキャプチャでは同じ帯が複数回写っており、縦スクロールを横移動に変換するピン留めセクションと思われる。
05
Our Units
左に「Student living, redefined.」の見出しと設備アイコンの2列リスト、右に線画の奥行きグリッドに色面と部屋写真をはめたトンネル状のビジュアル。
06
コミュニティ
外観・人物の写真2枚の間に赤いカードで説明と黒いボタンを置く3列構成。
07
What defines us
青い横長の見出し帯の下に、ドット絵の顔・絆創膏・ハートを描いた青いカード3枚と短い説明、黒い全幅ボタン。
08
Instagram・ニュースレター
紫の見出しカードとInstagram投稿のサムネイルを横に並べ、赤と黄のピル型フォームでメール登録を促す。
09
フッター
方眼の地に色の四角を散らし、左下に巨大なロゴ、右下にFAQ・プライバシーなどのピル型リンクを置く。

Interaction

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

抽出データに GSAP・Lenis があり、設備紹介は GSAP ScrollTrigger の pin と横方向の x アニメーションで縦スクロールを横移動に変換していると思われる
マーキーの帯は CSS の @keyframes による translateX の無限ループで再現できる
Three.js が検出されており、Our Units のトンネル状ビジュアルがスクロールや視点移動に反応する可能性がある（静止画からは不明）
Lottie が検出されており、What defines us のドット絵アイコンが Lottie アニメーションと思われる
Instagram の投稿は Swiper によるカルーセルと思われる

スクロールのコマ撮りLenis · 200–1100ms

検出された技術:GSAPThree.jsLenisSwiperWordPressLottieWebGL

Reproduce

再現するときのポイント

01ナビの色（青・黄・橙・緑・紫）をそのままコンテンツのカード色に使い回し、色で情報の所属を示す
02写真もカードもすべて同じ大きめの角丸（20〜30px程度）に揃え、#f4e9e1 の砂色の地に並べる
03見出しは幅広の極太書体、本文は癖の少ないグロテスクにして、見出しだけで個性を出す
04設備リストは「見出し＋小見出し＋罫線区切りの箇条書き」の型で統一する

再現MDに含まれるもの

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

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

units.katapick.md

1---
2title: "Units 再現用デザイン仕様書"
3source: https://units.gr/en/homepage/
4katapick: https://katapick.com/sites/units
5category: コーポレート
6region: 海外 (GR)
7tags: [ビビッド, 角丸, 横スクロール, マーキー, 写真主体, 固定ナビ]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 48
13generator: Katapick
14---
15 
16# Units — 再現用デザイン仕様書
17 
18> 左端のナビが、5色のカードでそのまま目次になってる。アテネの学生寮ブランドUnitsのサイトは、左端に5色の角丸カードを積んだ固定ナビを置き、その色を各セクションへ渡して、寮の明るさを構造にまで持ち込む。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22