FLOW ANATOMY #08 — 1サイトを縦に解剖する
TANGENTは、
なぜ線だけで成立するのか。
技法は『点』、サイトは『線』。架空建築事務所『TANGENT』のサイトは、図面を引く行為そのものとして設計されています。 露出グリッドや寸法線、線画ドローといった"設計の論理"を前面に出し、秩序と精度をブランドにする。 最も構築的で静謐なこの流れを章ごとに解剖します。 解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
製図→思想→作品→工程→体制→記録→相談。秩序と精度そのものを、世界観として前面に出しています。
- 00HERO製図 — 線が引かれる開幕動
- 01持続レイヤー常 — 方眼と座標が支える常
- 02PHILOSOPHY思想 — 図像と余白で静
- 03WORKS作品 — 線が竣工写真に動
- 04PROCESS工程 — 段取りを線で結ぶ動
- 05STUDIO体制 — 実績を静かに数える静
- 06NEWS記録 — 淡々と並べる静
- 07CONTACT・FOOTER相談 — 略地図で招く動
線が引かれていく、製図の開幕
狙いアイソメトリックのSVG線画が自動でドローされ、寸法線アノテーション(W=1280・H=800・ISOMETRIC 30°)が添えられ、キャッチコピー「線を引く。余白を設計する。」がstaggerで立ち上がる。ローダーは無く、製図そのものが開幕になっている。完成画でなく「描く過程」を冒頭に置くことで、作る行為が事務所の名刺になる。
つなぎ線が引かれる開幕は、その後の全章を通底するモチーフ——線=思考の可視化——を最初に提示する儀式でもある。SVGドローを見た訪問者は、次の章でも「この設計者は線に責任を持つ」と感じながらスクロールする。
方眼と座標が、常に画面を支える
狙い露出グリッドのオーバーレイ(GRID 8pt)、四隅に固定された図面アノテーション(ORIGIN 0,0 / SCALE 1:100 / DWG. No. TGT-2026)、十字レチクルの追従カーソル、下端に伸びる進捗バー。設計の論理を装飾として隠すのでなく、常時前面に見せることがブランドの骨格になる。
つなぎあわいが進捗バー1本に絞った引き算なら、TANGENTは方眼と座標と十字レチクルをセットで敷く。これはマキシマリズムでなく、建築設計という職能の語彙を全章に貫く一貫性の設計だ。
線が、竣工写真に変わる
狙い代表作リストの各行にカーソルを乗せると、ワイヤーフレームから竣工写真へclip-pathワイプで切り替わる。「図面→建築」という事務所の仕事の本質を、UIの遷移そのもので体現する。テキストで説明するより、操作した瞬間に伝わる。
つなぎ思想(02)を見た後に、実際の作品をこの形で見せる。事務所が「何ができるか」でなく「どう考えるか」を先に示したうえで実績を見せる順番が、信頼の積み上げ方になっている。
最後は、略地図と段取りで招く
狙いSVGの略地図(代々木アトリエへのピン)と相談フローのステップで設計相談へ招く。「ご予算・敷地が未確定の段階でも構いません」という一文が、敷居を下げる。フッターは超特大の「TANGENT」装飾とシンプルなナビで静かに締める。最後まで図面の語彙のまま、次の一歩へ招く。
つなぎフッターの巨大な「TANGENT」の文字は、サイトを通底した線と余白の設計の最後の体現。語りすぎず、ブランド名そのものを締めの一枚にする。
TAKEAWAY"構築"でつくる流れの5原則
TANGENTから取り出せる、秩序と精度を世界観にするサイト設計の法則。#04 足し算・#05 引き算など他の作法と読み比べると、同じ静謐でも「構造ゆえの余白」と「省略ゆえの余白」の違いがよくわかります。
秩序そのものを世界観にする
露出グリッドと座標ラベルを常時見せる。設計の論理(方眼)を前面に出すことがブランドになる。隠す装飾でなく、見せる構造。
開幕は"描く"プロセスを見せる
完成画でなく、線が引かれる過程をローダー代わりに。作る行為が名刺になる——完成物よりも姿勢が先に刻まれる。
状態の変化で実績を語る
作品はワイヤーから竣工写真へワイプ。「図面→建築」の仕事をUIの遷移で体現する。テキストで説明するより、操作した瞬間に伝わる。
静を貫き、数字だけ動かす
全篇トーンを抑え、実績の数字だけ静かにカウントアップ。騒がない設計が精度の印象を作る。動かすものを絞るほど、動きが際立つ。
余白は引き算でなく構造
TANGENTの余白はグリッドと寸法で測られた意図的な間。空白に理由があると線が際立つ——余白もまた設計された要素である。