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

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

- URL: https://revelatio.studio/
- 解説ページ: https://katapick.com/sites/revelatio-studio
- カテゴリ: ポートフォリオ / 地域: 海外（BR）/ 業種: ブランディング・デザインスタジオ
- テイスト: 3D/WebGL、ミニマル、モノクロ、テキスト主体、スクロール演出、固定ナビ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 32 時間）

## 編集部のひとこと（Leo）
スクロールするとASCIIの画面がぐんぐん迫ってくる！映画館で最前列にワープしたみたいで、近づくほど絵の粒が文字だってバレていく感じ。この種明かし、鳥肌！

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

## 配色
- #000000 Black（ヒーロー・都市リストの背景）
- #f6f6f6 Off White（作品・ケイパビリティの背景）
- #090909 Ink（テキスト）
- #ffffff White（反転テキスト / 強調都市名）
- #292929 Graphite（ヘッダーのボックス背景（スクショから採色））

## フォント
- 見出し・都市リスト: Neue Haas Grotesk Text Pro（代替: Inter Tight）
- 本文・ナビ・タグ（同一ファミリーをサイズ違いで使用）: Neue Haas Grotesk Text Pro（代替: Inter）

## よくある質問
### Revelatio Studioのサイトで使われているフォントは？
見出しから本文まで Neue Haas Grotesk Text Pro の1ファミリーのみが使われています。無料で近づけるなら Inter Tight（見出し）と Inter（本文）が使えます。

### Revelatio Studioのような文字で描く映像表現はどう作る？
Three.js などで映像をテクスチャにし、フラグメントシェーダーで画面をセルに分割して、各セルの明度に応じた文字グリフを描き分けるASCIIエフェクトが一般的です。

### Revelatio Studioのデザインはどんなサイトの参考になる？
ブランディング・デザイン・開発を一体で行う小〜中規模スタジオや、ミニマルなトーンで作品を主役にしたいクリエイターのポートフォリオの参考になります。

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