PortfolioOverseas / ESPicked 2026.09.24

Boc.Studio

ポートフォリオのWebデザイン参考 — クリエイティブ・ブランドスタジオ

出典: boc.studio

Editor's note — 編集部の視点

見出しもボタンも置かず、いきなり映像から始まる。

バルセロナのスタジオBoc.Studioのポートフォリオは、全画面のショーリールにオレンジの帯を1本通すだけ。説明を削るほど、映像が前に出る。

LeoMotion & Direction

スクロールしたら、さっきまで赤地に「SPORT」だった画面が料理のCGに切り替わってドーン！Lenisの慣性も効いてて、映画の予告編をぶっ通しで浴びてる感じ。鳥肌！

1画面の縦中央にオレンジの帯を固定。どこまでスクロールしても、ロゴと肩書きが視線の真ん中に残る
2帯には緯度経度と「Barcelona」も流す。所在地を座標で刻む遊び心が、スタジオの素性を粋に名乗る
3プライバシー通知も右下の黒い小さなピルで横に流す。映像を遮らないことを、最後まで優先している

Color

Boc.Studioの配色

Typography

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

ティッカーの見出し・強調

Aa あア

使用: PP Mori（SemiBold）
代替: Manrope

ティッカーの補足・通知文

Aa あア

使用: PP Mori（Regular）
代替: Inter

Structure

ページ構成（上から順）

01
ファーストビュー（ショーリール）
画面全体に作品映像を敷く。キャプチャ時は赤地に巨大な「SPORT」の文字と観客のシルエットのカットが映っていた。見出しやボタンは置かず、映像だけで始まる。
02
ティッカー帯
画面の縦中央にオレンジの帯を固定し、「Boc.Studio®」のロゴ、「Creative brand studio / Create, refresh and boost」、緯度経度と「Barcelona」を横一列に繰り返す。
03
Work（作品エリア）
h1「Work」を持つ高さ約2,200pxの領域。フルページキャプチャでは料理のCG映像のカットが全面で続き、帯はどの位置でも画面中央に残る。
04
末尾セクション
見出しのない高さ900pxのセクション。キャプチャ上は映像が続いており、テキスト要素は確認できない。
05
プライバシー通知
右下に黒いピル型の通知を固定し、方針文を横に流しながら、丸いボタン2つ（情報・了承）を右端に並べる。

Interaction

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

ティッカー帯は position: fixed; top: 50% で固定し、同じ内容を2回並べて @keyframes の translateX(-50%) で無限に流すマーキー
背景のショーリールは autoplay・muted・loop の video を object-fit: cover で全面表示。stack に WebGL があるため、映像の切り替えにシェーダー効果を使っている可能性がある
右下の通知ピルは内部テキストを横に流し、両端を mask-image のグラデーションでフェードさせると再現できる
Lenis で慣性スクロールを付け、映像の上で帯が動かずに残る感覚を強めている

検出された技術:LenisNext.jsWebGL

Reproduce

再現するときのポイント

01構成要素を「全面映像」「中央固定の帯」「右下の通知」の3つに絞る
02帯の色（#f63e1e 付近のオレンジ）は映像の色に負けない彩度で、文字は黒に近い色にする
03帯の中身はロゴ・肩書き・所在地の3要素を等間隔で繰り返し、途切れないように複製して流す

再現MDに含まれるもの

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

boc-studio.katapick.md

1---
2title: "Boc.Studio 再現用デザイン仕様書"
3source: https://boc.studio/
4katapick: https://katapick.com/sites/boc-studio
5category: ポートフォリオ
6region: 海外 (ES)
7tags: [ダーク, 映像主体, ミニマル, マーキー]
8launched: 2026-09
9verified: 2026-09-26
10difficulty: 2/5
11estimated_hours: 10
12generator: Katapick
13---
14 
15# Boc.Studio — 再現用デザイン仕様書
16 
17> 見出しもボタンも置かず、いきなり映像から始まる。バルセロナのスタジオBoc.Studioのポートフォリオは、全画面のショーリールにオレンジの帯を1本通すだけ。説明を削るほど、映像が前に出る。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ