Pensatori Irrazionali

1. 01

   ヒーロー

   左上にライオンの紋章とイタリア国旗色のライン、右上に角を落とした2つのボタン。実績ロゴを刷った布リボンの3Dの束が右から流れ込み、左下に「(Atelier)」のラベルとステートメントを置く。

2. 02

   Works

   画面幅いっぱいの筆記体「Works」と天使の銅版画風イラスト、「By Pensa…」の見出し。Mayweather・FaZe Clan・Neymar Jr.・Cadillac などの実績を、罫線付きの2列リストとロゴで並べる。

3. 03

   Trusted by

   取引先ロゴを細い枠のタイルに収め、5列×2段のグリッドで並べる。

4. 04

   From Los Angeles To Tokyo

   左右の端に地図のシルエットと座標を置き、拠点から活動範囲の広がりを見せる区間。

5. 05

   Disciplines

   筆記体「Disciplines」とペガサスのイラストで、サービス紹介の章扉を作る。

6. 06

   サービス詳細

   筆記体の番号1〜4と、Brand Identities / Web Development / Game Design / Video Production の項目表、LEARN MORE ボタン、作例画像の横並び。各サービスの間を色違いのマーキー帯で区切る。

• ロゴ入りの布リボンは、布の質感を持たせた 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

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

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

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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# Pensatori Irrazionali — デザイン分析書
16 
17> 取引先のロゴを、布のリボンにして束ねてる。欧州拠点のクリエイティブハウスPensatori Irrazionaliのスタジオサイトは、実績ロゴの3Dリボンと巨大な筆記体の章扉で、説明より先に“格”を感じさせる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22