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

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

- URL: https://2xa.studio/
- 解説ページ: https://katapick.com/sites/2xa-studio
- カテゴリ: ポートフォリオ / 地域: 海外（NL）/ 業種: コンピュテーショナルデザインスタジオ
- テイスト: ダーク、等幅フォント、大胆なタイポ、3D/WebGL、モノクロ、グリッド
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 5/5（目安 48 時間）

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

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

## 配色
- #0f0f0f Carbon（背景（ダーク））
- #fdfdfd Paper（背景（ライト））
- #cecece Silver（ロゴ / テキスト）
- #858585 Mid Gray（補足テキスト）
- #feff0d Signal Yellow（作品内のアクセント）
- #020ff3 Code Blue（作品内のアクセント / ハイライト）

## フォント
- ナビ・本文・ラベル（独自の可変等幅フォント）: 2XAMONOVF（代替: Share Tech Mono）
- 大見出し: HelveticaProRoman（代替: Inter）

## よくある質問
### 2xA Studioのサイトで使われているフォントは？
UIと本文にスタジオ独自の可変等幅フォント 2XAMONOVF、大見出しに Helvetica Pro が使われています。無料で近づけるなら Share Tech Mono と Inter の組み合わせがおすすめです。

### 2xAのようなASCIIアート風の表現はどう作る？
画像や3DシーンをCanvasに描き、ピクセルの明るさに応じて @ # * . などの文字に置き換えて表示するのが一般的です。p5.js や Three.js の AsciiEffect も使えます。

### どんな業種の参考になる？
クリエイティブコーディングのスタジオ、デザイン事務所、研究・実験色の強いクリエイターのポートフォリオサイトの参考になります。

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