PortfolioOverseas / GBPicked 2026.09.23

LxL Creative

ポートフォリオのWebデザイン参考 — エンタメ・TV向けクリエイティブエージェンシー

出典: lxlcreative.co.uk

Editor's note — 編集部の視点

ゴツい大文字と手書き、この組み合わせがずるい。

英国のTV・エンタメ向けエージェンシーLxL Creativeのポートフォリオサイトは、極太ワイド書体に1語だけオレンジの手書きを差し、確かさと人の温度を同じ行に同居させる。

LunaType & Whitespace

見出しがこれだけ太くてワイドなのに、本文とナビはManropeで細く静か。そこは張り合わないんだ。……いいね！！ただ、ステートメントで手書きを何語も使うのは、ちょっと多い。

13行コピーの「Real people.」だけが手書き。意味を、書体の切り替えでもう一度言い直す
2ロゴタイプを角丸の人物写真に食い込ませる。写真と文字の境界を越えて、FVを一枚のキーアートに仕上げる
3Our Servicesは画面を固定し、傾いた作品カードを入れ替える。スクロールが作品集をめくる手つきになる

Color

LxL Creativeの配色

Typography

使用フォントと無料の代替

見出し・ロゴタイプ

Aa あア

使用: Owners Wide
代替: Archivo

本文・ナビゲーション

Aa あア

使用: Manrope
代替: Manrope

手書きのアクセント

Aa あア

使用: Scribo
代替: Mr Dafoe

Structure

ページ構成（上から順）

01
ヒーロー
焦げ茶の背景の左に角丸の人物写真を大きく配置し、右中央に「REAL CRAFT. / Real people. / REAL RESULTS.」の3行コピー、下端にオレンジの手書き「lxl」とクリーム色の「creative」のロゴタイプを重ねる。ナビは右上にテキストリンクで並べる。
02
ショーリール
スクロールで中央の映像カードが拡大して全画面になる。ロゴは左上の小さなヘッダーロゴに切り替わる。
03
ステートメント
全画面の撮影現場映像の上に、クリーム色のワイドな大文字で事業内容を中央揃えで組み、「biggest」「brilliant」などをオレンジの手書き文字に置き換える。下部に Sound の切り替えスイッチ。
04
Our Services
左に手書きの「Our」と「SERVICES」、説明文、オレンジの「All services」ボタン。右で Social Campaigns / Key Art / Unit / EPK / Editorial / Activations の作品カードが1枚ずつ入れ替わり、背後にオレンジの波線を置く。
05
Favourite projects
「Discover some of our favourite projects」の見出しで代表作を紹介するセクション（抽出データの見出しから確認。フルページキャプチャの範囲外）。
06
Why LxL
「We’re collaborative」など3つの姿勢を小見出しで並べるセクション（抽出データの見出しから確認）。
07
Studios
スタジオ事業を「Where brands, music and culture meet.」の見出しで紹介するセクション（抽出データの見出しから確認）。
08
フッターCTA
制作の相談を呼びかける大見出しを置いたフッター（抽出データの見出しから確認）。

Interaction

アニメーション・インタラクション

Our Services は GSAP ScrollTrigger で pin し、scrub に合わせてカードを少し回転させながら重ねて入れ替える（セクション高さは約5,400px）
ヒーローからショーリールへは、映像カードの scale か clip-path をスクロール進捗に連動させて全画面まで広げる
ステートメントの大見出しは行ごとに不透明度を上げるリビール。SplitText 等で行分割し、ScrollTrigger で順に明るくすると再現できる
ページ遷移は Barba.js、スクロールは Lenis。Webflow 上に GSAP を組み合わせた構成
オレンジの波線は SVG パスの stroke-dashoffset を動かして描く線画アニメーションと思われる

検出された技術:GSAPLenisBarba.jsWebflow

Reproduce

再現するときのポイント

01見出しは横幅の広い極太サンセリフの大文字で詰めて組み、Archivo なら幅（wdth）を最大にして近づける
02手書き書体は各見出しで1語だけ、オレンジで大文字に重ねて使う
03背景は純黒ではなく焦げ茶（#27201d）、文字は白ではなくクリーム（#fcf2bd）にして映画のポスターのような温度を出す
04サービス紹介は画面固定＋カード入れ替えで、テキストは左に固定したままにする

再現MDに含まれるもの

CSS変数化したカラートークン / Google Fonts 読み込みタグ / 全8セクションの仕様 / つまずきポイント / Claude Code・Cursor・v0 用の実装プロンプト / 仕上げチェックリスト

lxl-creative.katapick.md

1---
2title: "LxL Creative 再現用デザイン仕様書"
3source: https://www.lxlcreative.co.uk/
4katapick: https://katapick.com/sites/lxl-creative
5category: ポートフォリオ
6region: 海外 (GB)
7tags: [ダーク, 大胆なタイポ, 手書き文字, 写真主体, スクロール演出]
8launched: 2026-09
9verified: 2026-09-26
10difficulty: 4/5
11estimated_hours: 30
12generator: Katapick
13---
14 
15# LxL Creative — 再現用デザイン仕様書
16 
17> ゴツい大文字と手書き、この組み合わせがずるい。英国のTV・エンタメ向けエージェンシーLxL Creativeのポートフォリオサイトは、極太ワイド書体に1語だけオレンジの手書きを差し、確かさと人の温度を同じ行に同居させる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ