# Units｜コーポレートのWebデザイン参考

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

- URL: https://units.gr/en/homepage/
- 解説ページ: https://katapick.com/sites/units
- カテゴリ: コーポレート / 地域: 海外（GR）/ 業種: 学生向け住居（家具付き学生寮）
- テイスト: ビビッド、角丸、横スクロール、マーキー、写真主体、固定ナビ
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 48 時間）

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

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

## 配色
- #f4e9e1 Sand（ページ背景）
- #eef1f5 Cloud Gray（背景）
- #0072e3 Units Blue（ナビ01 / 「What defines us」のカード）
- #ffb200 Marigold（ナビ02 / ロケーションのカード）
- #ff5c38 Tangerine（ナビ03 / 設備リストのカード）
- #ab54f7 Violet（予約ボタン / コミュニティのカード）

## フォント
- 見出し（幅広の極太書体）: Bunch（代替: Archivo Black）
- 本文・ナビ・ボタン: Aeonik Pro（代替: Manrope）

## よくある質問
### Unitsのサイトで使われているフォントは？
抽出データでは見出しに Bunch、本文に Aeonik Pro が使われています。無料で近づけるなら、見出しに Archivo Black、本文に Manrope の組み合わせが扱いやすいです。

### Unitsのような縦スクロールで横に流れるセクションはどう作る？
GSAP ScrollTrigger でセクションを pin し、中身の横幅から画面幅を引いた距離だけ x を負方向に動かします。Lenis を併用すると慣性がついて滑らかになります。

### Unitsのデザインはどんなサイトの参考になる？
学生寮・シェアハウス・コワーキングなど、設備とコミュニティの楽しさを伝えたい住居・施設系のサイトや、若年層向けの不動産ブランドの参考になります。

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