CorporateJapanPicked 2026.09.28

HASEKO 2050 Room Tour

コーポレートのWebデザイン参考 — 住まい・住宅（長谷工グループ）

サイトを見るhaseko.co.jp

www.haseko.co.jp/roomtour2050開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

文章より先に、縦動画のルームツアーが流れる。

長谷工グループが2050年の住まいを紹介するHASEKO 2050 Room Tourは、PC中央に角丸の縦動画を据え、左に動画付き目次を置いてスマホの視聴感覚を持ち込んだ。

LunaType & Whitespace

左の目次、文字は紫一色で、太さも大きさもほぼ横並び。ジャンプ率をわざと殺してる。主役は動画だから、文字は脇役に徹する。右側は白い余白を大きく残して、飾らない。わかってる。

1中央は角丸の縦長動画だけ。PCで開いても、ショート動画を1本ずつ見て回る感覚で部屋を巡れる
2左の目次は#1〜#3のエピソードごとに縦長サムネイルを添える。文字より先に、中身の絵で選ばせる
3テロップは紫の面に白い文字で「ようこそ。」「2050年の暮らしへ。」と短く区切る。動画の邪魔をしない

Color

HASEKO 2050 Room Tourの配色

Typography

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

日本語の見出し・本文・テロップ

Aa あア

使用: toppan-bunkyu-gothic-pr6n（凸版文久ゴシック）
代替: Zen Kaku Gothic New

英字のナビ・ラベル

Aa あア

使用: neue-haas-grotesk-display
代替: Inter

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

本文The quick brown fox — 参考を型にする12.5px · 1.3 · 500
ボタンKatapick 型14px · — · 600

Structure

ページ構成（上から順）

01
カラム外（左）
「HASEKO 2050 Room Tour」のロゴの下に、Room Tour配下の#1 棚田テラス・#2 LINK ROOM・#3 Behind the Scenesを並べ、それぞれに再生マーク付きの縦長サムネイルを添える。罫線の下にDetails・Statement・Projects・Interviews・Linksを色付きのアイコンと並べる。
02
カラム外（右）
人物・家・HASEKOロゴなどの小さなイラストアイコンを縦1列に並べ、右下に↗アイコンの丸ボタン。中央の動画との間に細い縦線を1本引く。
03
オープニング
幅約480pxの角丸の縦長動画に、模型や施工現場の映像と「ようこそ。」「2050年の暮らしへ。」の紫のテロップを重ねる。
04
Room Tour #1 棚田テラス
中央の縦長フレームの中で、青・緑・ピンクの色面が回転するように切り替わる演出をはさみ、案内役が歩きながら紹介する縦動画に移る。動画の下には緑のピルボタン「棚田テラスについてくわしく見る」。「共用部」「専有部」「建築家」の見出しで部屋を巡る。
05
Room Tour #2 LINK ROOM
「古い建物から始まる、外の世界とつながる住まい」の見出しに続き、同じ縦長フレームで「外観」「内観」「建築家」の順に紹介する。
06
Details〜Links
フレームの左上に「Details」「Interviews」などの見出しをタブのように出し、写真付きのカードに色付きの見出し（「棚田テラスって？」は緑、「プロジェクトメンバーインタビュー」は紫）、短い説明、枠線の「くわしく見る」ボタンを置く。Interviews には所属先・肩書を2026年3月時点とする注記がある。
07
フッター
短いフッターで締める。

Interaction

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

ブラウザのスクロールバーは動かず、中央の縦長フレームの中だけがスクロールする作りと思われる。左の目次は今いるセクションを紫で示し、右のアイコン列もスクロールに合わせて流れる
Lenis・Three.js（WebGL）が読み込まれており、慣性スクロールと3Dの演出を組み合わせていると思われる
中央の動画は自動再生で、PCのスクショとフルページキャプチャで別の場面とテロップが写っている
SPでは左右の要素をなくし、画面いっぱいの動画の右下にメニューと↗の丸ボタン2つを縦に重ね、下中央に縦線と丸の進行表示を置く

スクロールのコマ撮り150–600ms

HASEKO 2050 Room Tourをスクロールしたときのフレーム1 — 01

検出された技術:Three.jsLenisAstroAdobe FontsWebGL

Reproduce

再現するときのポイント

01PCでは幅約480pxの角丸の縦長動画を中央に置き、左に目次、右にアイコン列を固定して、左右の余白は白く残す
02目次はエピソード名と縦長サムネイルを組にして並べ、テキストだけの項目は罫線の下にまとめる
03テロップは紫の面に白い文字で短く区切り、動画の上に重ねる
04配色は白地に紫の文字を基本にし、アイコンにだけマゼンタ・ブルー・グリーンを差す

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全7セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

haseko-roomtour-2050.katapick.md

1---
2title: "HASEKO 2050 Room Tour デザイン分析書"
3source: https://www.haseko.co.jp/roomtour2050/
4katapick: https://katapick.com/sites/haseko-roomtour-2050
5category: コーポレート
6region: 国内 (JP)
7tags: [映像主体, ライト, 角丸, 固定ナビ]
8launched: 2026-06
9verified: 2026-10-28
10measured: 2026-09-27 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# HASEKO 2050 Room Tour — デザイン分析書
16 
17> 文章より先に、縦動画のルームツアーが流れる。長谷工グループが2050年の住まいを紹介するHASEKO 2050 Room Tourは、PC中央に角丸の縦動画を据え、左に動画付き目次を置いてスマホの視聴感覚を持ち込んだ。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-27 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22