Telha Clarke

1. 01

   ヒーロー（額縁）

   黒い帯に白の極太ワードマーク「TELHA CLARKE」を横幅いっぱいに置き、細い黒枠が白地を囲む。白地の上段に「Work, Process, Studio」のナビ、グレーの現地時刻と「South Yarra, AUS」、Contact。中央に正方形の建築映像、左下に[Scroll down]、右下にタグライン。

2. 02

   映像の全画面化

   スクロールで額縁が消え、中央の映像が画面いっぱいに広がる。ロゴは小さくなってヘッダー左に収まり、ナビは白文字で映像に重なる。

3. 03

   スタジオ（01）

   左上に小さな建築写真、中央右寄りにアボリジニとトレス海峡諸島民の土地への敬意を示す文章。その下に「Telha Clarke is a Melbourne based Architecture & Interior Design studio…」の大きな紹介文と、手がける用途（住宅、高齢者住宅、学生寮、ホテル、ワークプレイスなど）の説明が続く。

4. 04

   セレクテッドワークス（02）

   「SELECTED WORKS」「17 - 25'」のラベルのあと、角括弧で挟んだ大きな作品名（Grange Road / Southbank Tower / Daylesford Hill House）と作品写真を交互に縦へ並べる。

5. 05

   All Work

   白地の中央に下線付きの「All Work(31)」、周囲に大小さまざまな作品写真を余白の中へ散らして浮かべる。

6. 06

   ビジョン（03）

   樹木と建物の写真を全面に敷き、Design integrity / Innovation / Enhanced living の3語を横一列に流して切り替え、それぞれに短い説明文を添える。

7. 07

   メソッド（04）

   Schematic Design(01) から Contract Administration(07) までの7工程をスラッシュでつないだ一続きの文章として組み、1工程だけ黒、残りを薄いグレーで示す。右にコンクリートの空間写真、下にスコープの説明。

8. 08

   フッター

   グレーの「Talk to us about your project」と下線付きの「Contact us」、ナビ、住所・電話・メール、ニュースレター登録欄。最下部の黒地に再び巨大なワードマークを置く。

• ヒーローは黒枠とワードマークを縮小しながら、中央の video 要素を clip-path または scale で全画面まで広げるスクロール連動の演出と思われる
• 下部中央のピル型ボタンは固定表示で、表示中のセクションに応じて「Studio」「Grange Road」「All Work」「Vision」とラベルが切り替わると思われる
• All Work の散らばった写真は、撮影時点で濃さの違うものが混在しており、スクロールに合わせて個別の速度でフェードや移動をするパララックスと思われる
• Vision の3語とメソッドの強調工程は、スクロール量に合わせて横移動・色の切り替えをしていると思われる。Lenis で滑らかさを揃えている
• ヘッダーの時刻はメルボルンの現地時刻を JavaScript で表示していると思われる

スクロールのコマ撮りLenis · 450–1000ms

検出された技術:LenisWordPress

• 01ヒーローは「黒い額縁＋極太ロゴ＋中央の小さな映像」の3つだけで組み、映像が全画面へ広がる1つの動きに集中させる
• 02書体は Europa-Grotesk 系のグロテスク1種に絞り、サイズの大小とグレー／黒の濃淡で情報の強弱をつける
• 03作品名は角括弧で挟み、写真と同じくらいの存在感で一行に置く
• 04章番号（01〜04）と現在地のピルで、長いページの中の位置を常に示す

1---
2title: "Telha Clarke デザイン分析書"
3source: https://telhaclarke.com.au/
4katapick: https://katapick.com/sites/telha-clarke
5category: コーポレート
6region: 海外 (AU)
7tags: [大胆なタイポ, モノクロ, 余白, 写真主体, スクロール演出, ロングページ]
8launched: 2026-02
9verified: 2026-10-30
10measured: 2026-09-30 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# Telha Clarke — デザイン分析書
16 
17> 極太ロゴの黒い額縁で、画面ごと囲ってくる。メルボルンの建築・インテリア設計事務所Telha Clarkeのサイトは、額縁が退いて映像が全面に広がる導入と白い余白に浮かぶ作品写真で、ページを展示室に変えている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-30 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22