PortfolioOverseas / ESPicked 2026.09.24

Boc.Studio

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

サイトを見るboc.studio

boc.studio開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

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

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

LeoMotion & Direction

赤地に「SPORT」と観客のシルエット、からの料理のCG！ジャンルが真逆のカットを平気でつなぐの、フェスのセトリみたいでアガる！切り替えにWebGLのシェーダーが噛んでるっぽいのも気になる！

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

Color

Boc.Studioの配色

Typography

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

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

Aa あア

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

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

Aa あア

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

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

特大見出しKatapick 型28.3px · 1 · 400
ボタンKatapick 型28.3px · 1.2 · 400

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 で慣性スクロールを付け、映像の上で帯が動かずに残る感覚を強めている

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

検出された技術:LenisNext.jsWebGL

Reproduce

再現するときのポイント

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

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

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

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

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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# Boc.Studio — デザイン分析書
16 
17> 見出しもボタンも置かず、いきなり映像から始まる。バルセロナのスタジオBoc.Studioのポートフォリオは、全画面のショーリールにオレンジの帯を1本通すだけ。説明を削るほど、映像が前に出る。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22