PortfolioOverseas / BRPicked 2026.10.03

Revelatio Studio

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

サイトを見るrevelatio.studio

revelatio.studio開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

チームの集合写真が、ぜんぶ文字でできてる。

ブラジルのスタジオRevelatio Studioのポートフォリオは、チーム写真をASCII表現に置き換え、デザインとコードを一体で扱う姿勢をFV1枚で証明する。

LeoMotion & Direction

スクロールするとASCIIの画面がぐんぐん迫ってくる！最前列にワープしたみたいで鳥肌！近づくほど絵の粒が全部文字だってバレていく、この種明かしの寄り方、何度でも見たい！

1黒地に浮かぶ樽型のASCII画面。ブラウン管めいた歪みが、コードで絵を描くスタジオの名刺になる
2書体は Neue Haas Grotesk の1ファミリーだけ。サイズと余白の差で、見出しから業務リストまで階層を引く
3拠点や取引先の都市名を大きく敷き詰め、1都市だけを強調。地名の数で、活動範囲の広さを実感させる

Color

Revelatio Studioの配色

Typography

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

見出し・都市リスト

Aa あア

使用: Neue Haas Grotesk Text Pro
代替: Inter Tight

本文・ナビ・タグ（同一ファミリーをサイズ違いで使用）

Aa あア

使用: Neue Haas Grotesk Text Pro
代替: Inter

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

特大見出しKatapick 型36px · 1.1 · 400
見出しKatapick 型36px · 1.1 · 400
小見出しKatapick 型36px · 1.18 · 400
本文The quick brown fox — 参考を型にする21px · 1.3 · 400
ボタンKatapick 型12px · 1.5 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左上にロゴと Work / Approach / About / Careers をまとめた濃グレーのボックス、右上に EN/PT 切替と「Get in touch」の小さなボックス。スクロール中も追従する。
02
ヒーロー
黒地の中央に樽型に歪んだASCII表現の集合写真。左下に2行の見出し「Branding, Product Design & Code. One integrated vision.」。スクロールで画面が拡大していく。
03
作品一覧
明るいグレー地に3行のリード文と右寄せのフィルタ（Branding / Website / Product / Code）。大1＋小1の上段、小3の下段で作品カードを並べ、各カードにタグと短い説明。
04
ケイパビリティ
3〜4列のテキストリストで、組織支援・技術・デジタルプロダクト・ブランド戦略などの業務を箇条書きする。
05
拠点都市リスト
Waterloo, New York… と続く都市名を大きな文字で敷き詰め、1都市だけ濃色（黒地では白）で強調。明るい地から黒地へ切り替わる長いピン留め区間。
06
ステートメントと実績数値
黒地に左の大きなステートメント、右に短い会社説明と「Know us better」リンク。下に Since / Projects / Countries / Recognitions の数値が続く（9000px以降は抽出データの見出しのみで確認）。
07
アフターケア・推薦文
公開後の支援を扱うセクションと、14件の推薦文（見出しのみで確認）。
08
クライアント・ニュース・CTA
Selected Clients、News、「Want to talk about a project?」と見積・採用・問い合わせの3導線で締める（見出しのみで確認）。

Interaction

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

ヒーローは映像や写真をWebGLのフラグメントシェーダーで文字タイルに置き換えるASCIIエフェクトと思われる。明度に応じて文字を選び、樽型の歪みはUVのディストーションで再現できる
ヒーローのASCII画面はスクロールに合わせて拡大していく（フルページ撮影で段階的にサイズが変わっている）。GSAP ScrollTrigger の scrub で scale を補間する構成が近い
都市リストはスクロール進捗に応じて強調する都市が移る演出で、各 span の color を ScrollTrigger で順に切り替えると再現できる
Lenis の慣性スクロールと、Swiper による推薦文やニュースのスライダーが使われていると思われる

スクロールのコマ撮りLenis · 120–850ms

検出された技術:GSAPLenisSwiperWebflowWebGL

Reproduce

再現するときのポイント

01書体を1ファミリーに絞り、見出し・リスト・本文の差はサイズと行間だけで付ける
02配色は黒・オフホワイト・白の3色で、色は作品サムネイルにだけ持たせる
03ASCIIエフェクトは実写素材を使い、文字の明度差で被写体の輪郭が読めるサイズに調整する
04ヘッダーは小さなボックスに分割して左右に置き、コンテンツ面を広く空ける

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

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

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

revelatio-studio.katapick.md

1---
2title: "Revelatio Studio デザイン分析書"
3source: https://revelatio.studio/
4katapick: https://katapick.com/sites/revelatio-studio
5category: ポートフォリオ
6region: 海外 (BR)
7tags: [3D/WebGL, ミニマル, モノクロ, テキスト主体, スクロール演出, 固定ナビ]
8launched: 2026-08
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# Revelatio Studio — デザイン分析書
16 
17> チームの集合写真が、ぜんぶ文字でできてる。ブラジルのスタジオRevelatio Studioのポートフォリオは、チーム写真をASCII表現に置き換え、デザインとコードを一体で扱う姿勢をFV1枚で証明する。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22