PortfolioOverseas / ITPicked 2026.09.26

Pensatori Irrazionali

ポートフォリオのWebデザイン参考 — クリエイティブスタジオ（ブランディング・Web・ゲーム・映像）

出典: pensatori-irrazionali.com

Editor's note — 編集部の視点

取引先のロゴを、布のリボンにして束ねてる。

欧州拠点のクリエイティブハウスPensatori Irrazionaliのスタジオサイトは、実績ロゴの3Dリボンと巨大な筆記体の章扉で、説明より先に“格”を感じさせる。

LeoMotion & Direction

サービスの境目を蛍光グリーンやピンクの帯がバーッと横切るの、ライブの転換でレーザーが走る瞬間みたい！グレーの静けさがあるから、帯が来るたびに「次の曲来る！」って体が構える！

1FVは実績ロゴを刷った布リボンの束だけ。取引先の一覧を、そのままキービジュアルに変えている
2章扉は画面幅の筆記体と銅版画風の天使。グロテスクの本文と並べ、古典と現代をぶつける
3サービスの境目に緑・ピンク・赤のマーキー帯を流す。グレーの画面で、色が章の目印になる

Color

Pensatori Irrazionaliの配色

Typography

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

見出し・本文

Aa あア

使用: Helvetica Now
代替: Inter Tight

章扉の筆記体見出し・番号

Aa あア

使用: Ballet
代替: Ballet

アクセント

Aa あア

使用: PP Editorial
代替: Instrument Serif

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

本文The quick brown fox — 参考を型にする14px · 1.1 · 400
ボタンKatapick 型20px · 1.4 · 400

Structure

ページ構成（上から順）

01
ヒーロー
左上にライオンの紋章とイタリア国旗色のライン、右上に角を落とした2つのボタン。実績ロゴを刷った布リボンの3Dの束が右から流れ込み、左下に「(Atelier)」のラベルとステートメントを置く。
02
Works
画面幅いっぱいの筆記体「Works」と天使の銅版画風イラスト、「By Pensa…」の見出し。Mayweather・FaZe Clan・Neymar Jr.・Cadillac などの実績を、罫線付きの2列リストとロゴで並べる。
03
Trusted by
取引先ロゴを細い枠のタイルに収め、5列×2段のグリッドで並べる。
04
From Los Angeles To Tokyo
左右の端に地図のシルエットと座標を置き、拠点から活動範囲の広がりを見せる区間。
05
Disciplines
筆記体「Disciplines」とペガサスのイラストで、サービス紹介の章扉を作る。
06
サービス詳細
筆記体の番号1〜4と、Brand Identities / Web Development / Game Design / Video Production の項目表、LEARN MORE ボタン、作例画像の横並び。各サービスの間を色違いのマーキー帯で区切る。

Interaction

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

ロゴ入りの布リボンは、布の質感を持たせた Three.js（WebGL）の3Dオブジェクトと思われる。動かさない場合はレンダリング画像をスクロールで translate / rotate させるだけでも近づく
「Works」「Disciplines」の横の「By Pensa…」が画面外へはみ出しており、見出しが横に流れる演出と思われる。GSAP ScrollTrigger で x をスクロール進捗に紐づけると再現可能
「LEARN MORE ABOUT BRANDING — LET'S WORK —」の帯は、同じ文字列を2つ並べて @keyframes で translateX させる無限マーキーで再現可能
Lenis の慣性スクロール。作例画像の横並びは Swiper のカルーセルと思われる

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

Pensatori Irrazionaliをスクロールしたときのフレーム1 — 01

Pensatori Irrazionaliをスクロールしたときのフレーム2 — 02

Pensatori Irrazionaliをスクロールしたときのフレーム3 — 03

Pensatori Irrazionaliをスクロールしたときのフレーム4 — 04

Pensatori Irrazionaliをスクロールしたときのフレーム5 — 05

Pensatori Irrazionaliをスクロールしたときのフレーム6 — 06

検出された技術:Three.jsLenisSwiperNext.jsWebGL

Reproduce

再現するときのポイント

01背景は純白でなく #f5f5f5、文字も #434343 のグラファイトにして、画面全体を柔らかいグレーでまとめる
02筆記体は章扉と番号だけに使い、本文のグロテスクとの落差で見出しを立たせる
03サービスごとに蛍光色を1色ずつ割り当て、見出しのドットとマーキー帯で同じ色を繰り返す
04実績は文字の羅列ではなく、ロゴ入りの3Dオブジェクトやロゴグリッドなど“物”として見せる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全6セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

pensatori-irrazionali.katapick.md

1---
2title: "Pensatori Irrazionali 再現用デザイン仕様書"
3source: https://pensatori-irrazionali.com/
4katapick: https://katapick.com/sites/pensatori-irrazionali
5category: ポートフォリオ
6region: 海外 (IT)
7tags: [3D/WebGL, ライト, 大胆なタイポ, マーキー, 余白]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# Pensatori Irrazionali — 再現用デザイン仕様書
17 
18> 取引先のロゴを、布のリボンにして束ねてる。欧州拠点のクリエイティブハウスPensatori Irrazionaliのスタジオサイトは、実績ロゴの3Dリボンと巨大な筆記体の章扉で、説明より先に“格”を感じさせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22