# Telha Clarke｜コーポレートのWebデザイン参考

> 極太ロゴの黒い額縁で、画面ごと囲ってくる。メルボルンの建築・インテリア設計事務所Telha Clarkeのサイトは、額縁が退いて映像が全面に広がる導入と白い余白に浮かぶ作品写真で、ページを展示室に変えている。

- URL: https://telhaclarke.com.au/
- 解説ページ: https://katapick.com/sites/telha-clarke
- カテゴリ: コーポレート / 地域: 海外（AU）/ 業種: 建築・インテリア設計事務所
- テイスト: 大胆なタイポ、モノクロ、余白、写真主体、スクロール演出、ロングページ
- 公開・リニューアル: 2026-02 / Katapick掲載: 2026-09-30 / 最終確認: 2026-10-30
- 再現難易度: 4/5

## 編集部のひとこと（Leo）
Visionの章がすごい！全面の写真は動かさずに、Design integrity から Enhanced living へ言葉だけが横に流れていくっぽい。映画の字幕が次のカットを連れてくるみたい！

## デザインの見どころ
- 上部を占める極太ワードマークと黒い枠。スクロールで枠が退き、中央の小さな映像が全画面へ広がる
- 作品名は角括弧で挟んで大きく一行。「[ Grange Road ]」のように、写真より先に名前を読ませる
- 下部中央の黒い小さなピルに今いる章の名前と「Discover +」。長いページでも居場所と次の一手を示す

## 配色
- #000000 Black（額縁 / ワードマークの地 / テキスト / フッター）
- #ffffff White（背景 / ワードマーク）
- #cacfcb Mist Gray（現地時刻・非アクティブの工程名などの補助テキスト）
- #243319 Ivy Green（建築写真の植栽の緑（スクショから採色））

## フォント
- ヒーロー・ヘッダー・フッターのロゴ: TELHA CLARKE ワードマーク（独自の極太ロゴ。SVGと思われる）（代替: Anybody（Black・幅広め））
- 見出し・本文・ナビのすべて: Europa-Grotesk（代替: Inter）

## よくある質問
### Telha Clarkeのサイトで使われているフォントは？
見出しから本文、ナビまで Europa-Grotesk というグロテスク体で統一されています。「TELHA CLARKE」の極太ロゴは独自のワードマークで、画像（SVG）として置かれていると思われます。無料で近づけるなら本文に Inter、ロゴ風の表現に幅広の Anybody が使えます。

### Telha Clarkeのような、小さな映像が全画面に広がる演出はどう作る？
映像を画面全体のサイズで配置しておき、初期状態は clip-path: inset() で中央の正方形だけを見せます。GSAP の ScrollTrigger などでスクロール量に合わせて inset の値を0へ近づけると、枠が開くように全画面へ広がります。

### Telha Clarkeのデザインはどんなサイトの参考になる？
建築事務所、インテリアデザイン、写真家やギャラリーなど、作品の写真と名前を主役にして静かに見せたいポートフォリオ型のコーポレートサイトの参考になります。

### Telha Clarkeのサイトの写真や映像を使ってもいい？
建築写真、映像、ロゴなどはTelha Clarkeおよび各権利者に帰属するため、転用はできません。参考にするのはレイアウトや余白の取り方、演出の考え方までにしてください。

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