PortfolioOverseas / NLPicked 2026.09.26

2xA Studio

ポートフォリオのWebデザイン参考 — コンピュテーショナルデザインスタジオ

出典: 2xa.studio

Editor's note — 編集部の視点

ロゴも見出しも、コードで描いた記号でできてる。

アムステルダムとアテネのデザインスタジオ2xAのポートフォリオは、ASCIIアートやジェネラティブな作品をページの骨格に使い、“コードで考える”姿勢を読む前に体感させる。

LunaType & Whitespace

縦長の等幅で詰めた本文、最初は文字化けかと思った。でも大見出しだけはHelveticaで素直に置いてる。崩すのは下の層だけ、読ませる一線は守る。わかってるじゃん。……いいね！！

1巨大な「2xA STUDIO」は角丸の短い棒を並べて組む。ロゴ自体が、プログラムの出力に見える
2黒地で実験作品を、白地で実案件を見せる。章の明暗が、そのまま遊びと仕事の切り替えになる
3ヘッダーにアテネとアムステルダムの時刻を並べる。2拠点のスタジオだと、数字だけで伝わる

Color

2xA Studioの配色

Typography

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

ナビ・本文・ラベル（独自の可変等幅フォント）

Aa あア

使用: 2XAMONOVF
代替: Share Tech Mono

大見出し

Aa あア

使用: HelveticaProRoman
代替: Inter

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

見出しKatapick 型144px · 1 · 400
小見出しKatapick 型23.8px · 1 · 400
本文The quick brown fox — 参考を型にする19px · 1.25 · 400
ボタンKatapick 型23.8px · 1 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左に「2xA STUDIO」、中央寄りに「ATH(GR)」「AMS(NL)」と2拠点の時刻、右に ABOUT / PROJECTS / CONTACT。縦長の等幅書体で統一。
02
ヒーロー
黒地のキャンバスに、キリル文字を詰めたNの字形、ASCII文字のグラデーション、座標のような数字など、ジェネラティブな作品が切り替わりながら表示される。
03
ロゴ
角丸の短いバーを並べて組んだ巨大な「2xA STUDIO」を画面幅いっぱいに置く。
04
Generative Code Explorations
黒地に大見出しを分割して配置し、実験作品のサムネイルを不揃いなグリッドに散らす。
05
About
白地に「Code-Driven Design Studio Between Amsterdam & Athens」の大見出しと段組の本文を重ね、単語を画面幅に均等割りした「On Computation As A Way Of Thinking」の一行で区切る。
06
Selected Projects
「View All (5)」への導線と、ABR Festival・Buna Tetu・Miao World の作品写真と説明文を番号付きで並べる。
07
Awards & Achievements
黒地に大見出しを重ね、プロジェクト・組織・受賞・年の4列の表で受賞歴を並べる。
08
フッター
バー状の巨大なロゴの下に Instagram / Behance / メールアドレス / Privacy と「STUDIO SOUNDS」。

Interaction

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

ヒーローは Three.js / WebGL で、文字や図形をコードで生成するスケッチを順に切り替えていると思われる
About の本文は文字が欠けたり混ざったりした状態でキャプチャされており、テキストがスクランブルしながら組み上がる演出と思われる
プロジェクト名の一部を黒や青の帯で反転させるハイライトは、文字ごとに背景色を切り替える演出と思われる
Lenis の慣性スクロールで、黒と白の章を滑らかにつないでいる

スクロールのコマ撮りLenis · 100–1000ms

検出された技術:Three.jsLenisWebGL

Reproduce

再現するときのポイント

01ナビ・本文・ラベルは縦長の等幅書体に統一し、大見出しだけを Helvetica 系に任せる
02ロゴや見出しを、角丸の短いバーや ASCII 文字の集まりとして描く（CSS Grid か Canvas で文字を点に分解する）
03黒 #0f0f0f と白 #fdfdfd の章を交互に置き、色は作品の中だけに使う
04単語を justify-content: space-between で画面幅に均等割りした一行を、章の区切りに使う

再現MDに含まれるもの

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

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

2xa-studio.katapick.md

1---
2title: "2xA Studio 再現用デザイン仕様書"
3source: https://2xa.studio/
4katapick: https://katapick.com/sites/2xa-studio
5category: ポートフォリオ
6region: 海外 (NL)
7tags: [ダーク, 等幅フォント, 大胆なタイポ, 3D/WebGL, モノクロ, グリッド]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 5/5
12estimated_hours: 48
13generator: Katapick
14---
15 
16# 2xA Studio — 再現用デザイン仕様書
17 
18> ロゴも見出しも、コードで描いた記号でできてる。アムステルダムとアテネのデザインスタジオ2xAのポートフォリオは、ASCIIアートやジェネラティブな作品をページの骨格に使い、“コードで考える”姿勢を読む前に体感させる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22