# HASEKO 2050 Room Tour｜コーポレートのWebデザイン参考

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

- URL: https://www.haseko.co.jp/roomtour2050/
- 解説ページ: https://katapick.com/sites/haseko-roomtour-2050
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: 住まい・住宅（長谷工グループ）
- テイスト: 映像主体、ライト、角丸、固定ナビ
- 公開・リニューアル: 2026-06 / Katapick掲載: 2026-09-28 / 最終確認: 2026-10-28
- 再現難易度: 4/5

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

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

## 配色
- #ffffff White（ページの背景）
- #5803d4 Violet（ナビの文字・テロップの地）
- #f0ebf5 Lilac Mist（淡い面の背景）
- #ff0082 Magenta（アイコン・面のアクセント）
- #1978ff Blue（アイコン・面のアクセント）
- #00b225 Green（アイコン・面のアクセント）

## フォント
- 日本語の見出し・本文・テロップ: toppan-bunkyu-gothic-pr6n（凸版文久ゴシック）（代替: Zen Kaku Gothic New）
- 英字のナビ・ラベル: neue-haas-grotesk-display（代替: Inter）

## よくある質問
### HASEKO 2050 Room TourはPCでどう見える？
PCでも幅約480pxの角丸の縦長動画を画面中央に置き、左にエピソードごとのサムネイル付き目次、右に小さなアイコン列と丸ボタンを配置する構成です。スマホで縦動画を見る体験を、PCの画面にそのまま持ち込んでいます。

### どんなサイト？
長谷工グループが描く2050年の住まいと暮らしを、ルームツアー形式で紹介する特設サイトです。#1 棚田テラス、#2 LINK ROOM、#3 Behind the Scenes のエピソードで構成しています。

### 縦動画をPCのサイトで見せるコツは？
動画をスマホ幅のまま中央に置き、角を丸めて端末の画面のように見せる方法が参考になります。左右の余白には目次とサムネイルを置き、次に見る動画を選びやすくしています。

### サイトの動画や写真を参考資料として使ってもいい？
動画・写真・イラストの権利は長谷工グループと各制作者に帰属します。参考にするのはカラム構成や配色、目次の設計にとどめ、素材は使用しないでください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「デザイン分析MD」は https://katapick.com/sites/haseko-roomtour-2050 からダウンロードできます。
出典: Katapick（https://katapick.com）