軽さ🎈によって、人と社会に光💨を届ける /
東京のデザインスタジオ🌏

Contact 📝 Contact 🤝🏻 Contact 📝 Contact 🤝🏻 Contact 📝 Contact 🤝🏻 Contact 📝 Contact 🤝🏻
株式会社トピア

Web Design

気づけば、窓ばかり見ていた。

Client:
株式会社トピア
Role:
#Web
Date:
2026.05~
https://hono-bono.jp/

ティザーサイトとして立ち上げた「仄仄」が、実績と実物を積み重ねながら、サービスサイトとして生まれ変わりました。 当初はパースのみで世界観を伝えることに徹していたサイトも、物件の竣工と成約が重なるにつれ、届けられる情報の厚みが変わっていきました。実績が増えたことは、単なるコンテンツの追加ではなく、ブランドとしてもより深まっています。 リニューアルにあたって軸に据えたのは、機能的な情報の整理よりも、このブランドが大切にしている理念をより丁寧に表現することでした。静かさ・余白・経年の美しさ。仄仄が目指す暮らしの感触を、サイトのすべての細部から感じ取れるよう、情緒をデザインしました。

課題・背景

  • 仄仄の空間が持つ静けさや余白、経年による変化といった感覚的な価値を、Web上でどう体験させるか
  • 実際にその場に立ったときに感じられる空気感や時間の流れを、画面の中でどう再現するか

アプローチ

  • 情報を削ぎ落とした引き算の設計で、余白そのものに上質さと静けさを宿らせる
  • ユーザーの操作負荷を極限まで減らすことでサイトを見ることに集中できるように

クライアントについて

株式会社トピアは、山口県で35年以上にわたって木造住宅を手がけてきた地域密着の工務店です。断熱性・耐震性といった機能価値で積み上げてきた信頼を土台に、情緒的な価値を正面に据えた新ブランドとして「仄仄」を立ち上げました。「こう住むべき」という固定観念から距離を置き、自然素材と余白を通じて感性が磨かれる住まいを提案するブランドです。

Point 1|「没入」をコンセプトに

スクロールするごとに少しずつ深みにはまっていくように、ユーザーが操作を忘れてぼんやりと見続けてしまう状態を目指しました。

キービジュアルはスクロール不要の仕様としています。ページを開いた瞬間から、何もしなくても仄仄の世界観が広がる。操作を促さず、ただそこにいるだけで伝わるキービジュアルとしました。

写真を閲覧できるところにはフルスクリーンで没頭して見られるナビゲーションを実装しています。空間の細部まで視線を委ねられる体験をつくることで、実際の仄仄の空気感が伝わるようにしました。

実物化のように見えるこの画像はパースです

Point 2|1クリックでも少なくなるように

仄仄の空間には、自然と静かになれるような空気が宿っています。その感覚をUIにしたのが、漫画の静寂表現から着想を得た「・・・」です。言葉を尽くさず、余白と点だけで場の空気を伝える。この表現が仄仄らしい静けさと一致していました。

この「・・・」をボタンにも応用しています。通常のボタンはクリックという能動的な操作を求めますが、仄仄のサイトではゲージが溜まることで自動的に遷移する仕様を採用しました。ユーザーはただ見ているだけで、次のページへと自然に導かれていく。操作を意識させないことが、没入を妨げないための判断でした。

時間ごとに情景をイメージできるセクション
株式会社トピア desktop screen 1
株式会社トピア desktop screen 2
株式会社トピア mobile screen 1
株式会社トピア mobile screen 2
株式会社トピア mobile screen 3
株式会社トピア mobile screen 4
株式会社トピア mobile screen 5
株式会社トピア mobile screen 6
株式会社トピア mobile screen 7
株式会社トピア mobile screen 8
株式会社トピア mobile screen 9
株式会社トピア mobile screen 10
株式会社トピア mobile screen 11
株式会社トピア mobile screen 12

Team

Website

Creative Direction
原田 収一郎(moar inc.)
Copy Writing
山村 光春(BOOKLUCK)
Photograph
​目野 つぐみ
Art Direction / Design
奥村 匠真(tsukuru inc.)
Front-end Developer
増田 日吉