PortfolioOverseas / GBPicked 2026.09.23

LxL Creative

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

サイトを見るlxlcreative.co.uk

www.lxlcreative.co.uk開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

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

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

LunaType & Whitespace

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

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

Color

LxL Creativeの配色

Typography

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

見出し

Aa あア

使用: Owners Wide
代替: Archivo

本文・ナビゲーション

Aa あア

使用: Manrope
代替: Manrope

手書きのアクセント

Aa あア

使用: Scribo
代替: Mr Dafoe

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型32.6px · 1 · 700
見出しKatapick 型54.9px · 0.9 · 700
小見出しKatapick 型15.4px · 1.2 · 700
本文The quick brown fox — 参考を型にする17.4px · 1.4 · 500
ボタンKatapick 型17.4px · 1.4 · 500

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

スクロールのコマ撮りLenis · 150–3000ms

検出された技術:GSAPLenisBarba.jsWebflow

Reproduce

再現するときのポイント

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

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# LxL Creative — デザイン分析書
16 
17> ゴツい大文字と手書き、この組み合わせがずるい。英国のTV・エンタメ向けエージェンシーLxL Creativeのポートフォリオサイトは、極太ワイドの大文字に要所だけオレンジの手書きを差し、確かさと人の温度を同居させる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22