# LxL Creative｜ポートフォリオのWebデザイン参考

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

- URL: https://www.lxlcreative.co.uk/
- 解説ページ: https://katapick.com/sites/lxl-creative
- カテゴリ: ポートフォリオ / 地域: 海外（GB）/ 業種: エンタメ・TV向けクリエイティブエージェンシー
- テイスト: ダーク、大胆なタイポ、手書き文字、写真主体、スクロール演出
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-23 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 30 時間）

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

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

## 配色
- #27201d Espresso（背景）
- #fcf2bd Butter Cream（見出し・テキスト）
- #ff5121 Flame Orange（アクセント（手書き文字・ボタン・波線））
- #055dff Electric Blue（アクセント背景）
- #ffffff White（サブ背景）

## フォント
- 見出し・ロゴタイプ: Owners Wide（代替: Archivo）
- 本文・ナビゲーション: Manrope（代替: Manrope）
- 手書きのアクセント: Scribo（代替: Mr Dafoe）

## よくある質問
### LxL Creativeのサイトで使われているフォントは？
見出しとロゴタイプに Owners Wide、本文に Manrope、手書きのアクセントに Scribo が使われています。無料で近づけるなら、Archivo（幅を広げた設定）、Manrope、Mr Dafoe の組み合わせが使えます。

### LxL Creativeのようにカードが入れ替わるサービス紹介はどう作る？
セクションを GSAP ScrollTrigger で pin し、タイムラインでカードごとに y 移動と rotate を設定して scrub で進めます。左側のテキストは固定したまま右のカードだけを動かします。

### LxL Creativeのデザインはどんな業種の参考になる？
映像・広告制作会社、エンタメ系エージェンシー、フォトスタジオなど、作品写真を大きく見せつつ強い書体で個性を出したいポートフォリオサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/lxl-creative からダウンロードできます。
出典: Katapick（https://katapick.com）