# Boc.Studio｜ポートフォリオのWebデザイン参考

> 見出しもボタンも置かず、いきなり映像から始まる。バルセロナのスタジオBoc.Studioのポートフォリオは、全画面のショーリールにオレンジの帯を1本通すだけ。説明を削るほど、映像が前に出る。

- URL: https://boc.studio/
- 解説ページ: https://katapick.com/sites/boc-studio
- カテゴリ: ポートフォリオ / 地域: 海外（ES）/ 業種: クリエイティブ・ブランドスタジオ
- テイスト: ダーク、映像主体、ミニマル、マーキー
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-24 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 10 時間）

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

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

## 配色
- #181d21 Graphite（背景）
- #f63e1e Signal Orange（アクセント（ティッカー帯・スクショから採色））
- #0d0d0d Jet Black（サーフェス）
- #303030 Charcoal（UIサーフェス）
- #f3f3f3 Off White（テキスト）
- #adadad Silver Gray（補助テキスト）

## フォント
- ティッカーの見出し・強調: PP Mori（SemiBold）（代替: Manrope）
- ティッカーの補足・通知文: PP Mori（Regular）（代替: Inter）

## よくある質問
### Boc.Studioのサイトで使われているフォントは？
PP Mori が使われています。ティッカーの見出しは太め、補足は標準のウェイトです。無料で近づけるなら Google Fonts の Manrope や Inter が使えます。

### Boc.Studioのような流れるティッカー帯はどう作る？
帯を position: fixed で画面中央に固定し、中身を2セット並べて CSS アニメーションで translateX(-50%) まで移動させてループします。GSAP で速度をスクロールに連動させる方法もあります。

### Boc.Studioのデザインはどんな業種の参考になる？
映像制作会社、モーションデザインスタジオ、クリエイティブエージェンシーなど、作品映像そのものを見せたいポートフォリオサイトの参考になります。

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